معماری
ضعیفبد نیستمتوسطخوبعالی (1 votes, average: 5٫00 out of 5)
Loading...

آموزش طراحی وب – قسمت ششم CSS-Part2

به نام آفریننده عشق، خداوند مهربان

با ششمین قسمت از مجموعه آموزشی طراحی وب در خدمت کاربران میهن لرن هستیم. در قسمت های پیشین به ترتیب آموزش طراحی صفحات وب در فتوشاپ (Mock upاموزش HTML ، دو قسمت HTML5 و یک قسمت CSS را آموزش دادیم، هم اکنون به ادامه آموزش CSS می پردازیم و در واقع در این قسمت آموزش سی اس اس تمام شده و این قسمت همراه قسمت قبلی آموزش جامع CSS را تشکیل می دهند و انشالله در قسمت بعدی CSS3 که یکی از مباحث بروز و پرطرفدار می باشد را آموزش خواهیم داد.

آموزش کامل CSS بصورت فارسی
آموزش کامل CSS بصورت فارسی
  • در این قسمت خواهیم آموخت :

– تنظیم عرض و ارتفاع
– ترکیب انتخابگر ها
– انتخابگر های سی اس اس
– چند صفت کاربردی (Padding و Margin)
– صفت Display
– حاشیه ها
– کار روی لیست ها
– کار روی جداول
– موقعیت عناصر – صفت position
– تنظیم نشانه گر ماوس
– شناور کردن عناصر (کنترل چینش چپ یا راست)
– انواع روش های ترازبندی عناصر
– ایجاد منو / CSS Navigation bar
– شفاف کردن تصاویر
– نمایش قسمتی از تصویر
– ایجاد گالری عکس
– قانون @media

جهت دانلود فیلم آموزشی این قسمت به همراه 50 مثال تمرینی و کتاب PDF این قسمت به ادامه مطلب مراجعه کنید.

(توجه : پیشنهاد می شود بجای استفاده از مطالب پست حتما PDF کم حجم این قسمت که در پایین جهت دانلود رایگان قرار داده شده است را دانلود کنید، چون کد های سی اس اس هنگامی که در ادیتور سایت ما نوشته می شوند بر عکس نشان داده می شوند و دچار اشتباه نشوید، هر چند که اگر کمی با کد ها آشنا باشید زیاد دچار مشکل نخواهید شد ولی پیشنهاد ما این است حتما از پی دی اف آموزشی استفاده کنید.)

تنظیم کردن عرض و ارتفاع در سی اس اس

برای تنظیم کردن عرض یک عنصر در سی اس اس از صفت width استفاده می شود:
Div.a {width: 200px}
همچنین می توانید بصورت درصدی در اندازه ها استفاده کنید بعنوان مثال:
div.a {height: 100%}
یعنی عرض کل صفحه را بگیرد، می توانید اعداد مورد نظر خود را بدهید مثلا 50% نصف عرض صفحه می باشد یا 25% یک چهارم صفحه.
صفت height برای تنظیم ارتفاع می باشد.
صفات max-heigh, min-height و max-width, min-width برای تنظیم حداکثر و حداقل اندازه تنظیم می شود یعنی در این محدوده اندازه می تواند باشد. بعنوان مثال اگر یک کادر داشته باشیم که max-width آن 500 پیکسل باشد وقتی صفحه را کاربر کوچک می کند کادر نیز از صفحه بیرون نمی زند و هم گام با کوچک شدن صفحه مرورگر کادر نیز کوچک میشود در واقع کادر ما یک حالت داینامیک مانند به خود می گیرد ولی وقتی که width ان برابر با 500 پیکسل باشد دیگر وقتی صفحه مرورگر عرض ان از 500 پیکسل رو به کاهش بود کادر همراه آن کوچک نمی شود و ثابت سر جای خود باقی می ماند در واقع از صفحه مرورگر بیرون می زند.

ترکیب انتخابگر های سی اس اس – CSS Combinators
در قسمت قبلی بطور کامل انتخابگر های سی اس اس (Selector) را به شما اموختیم. در اینجا قصد داریم اندکی از بحث ترکیب سلکتور ها را به شما بگوییم. البته این بحث مربوط به سی اس اس 3 می شود ولی چون مرتبط با قسمت قبلی می باشد در همین جا ادامه می دهیم:
چهار ترکیب مختلف در سی اس اس 3 وجود دارد:
• descendant selector
• child selector
• adjacent sibling selector
• general sibling selector
روش اول :
div p {
background-color: yellow;
}
در اینجا کلیه عناصر p که درون تگ div انتخاب خواهد شد.
روش دوم :
div > p {
background-color: yellow;
}
در اینجا فقط فرزندان p داخل تگ div انتخاب خواهند شد، یعنی p هایی که مستقیم فرزند div هستند و نه p هایی که درون تگ دیگری در دایو هستند، یعنی فرزند دوم نباشند. مثال داخل فایل تمرینی یا فیلم اموزشی را ببینید متوجه خواهید شد.
روش سوم :
div + p {
background-color: yellow;
}
در این روش اولین تگ p بعد از تگ div انتخاب می شود.

روش چهارم:
div ~ p {
background-color: yellow;
}
در این روش تمامی عناصر p خارج از عنصر div انتخاب می شوند.
همچنین اگر هنوز با سلکتور ها اشنایی ندارید می توانید قسمت قبلی را از سایت میهن لرن دانلود کنید و با این مفهوم اشنا شوید و همچنین در لینک های زیر بطور جزئی تر تعدادی سلکتور معرفی شده است.
w3schools.com/css/css_pseudo_classes.asp
w3schools.com/css/css_pseudo_elements.asp
همچنین برای سلکت کردن بر اساس صفت:
w3schools.com/css/css_attribute_selectors.asp

چند صفت کاربردی در CSS
در اولین بخش این آموزش می خواهم چند خصوصیت کاربردی را برایتان توضیح دهم:
به تصویر زیر نگاه کنید، بخش های مختلف یک کادر را نشان می دهد، از خصوصیات زیر می توان در چینش ان استفاده کرد:

CSS Padding - Margin - Border

Padding: به فاصله بین محتوا (Content) تا حاشیه (Border) گفته می شود.
Margin: فاصله حاشیه یا کلا فاصله کادر از اطرافش را مارجین می گوییم.
به کد زیر توجه کنید:
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
یعنی فاصله بین محتوا تا حاشیه 25 پیکسل و فاصله کادر نسبت به اطراف 25 پیکسل (مارجین) همچنین ضخامت حاشیه 25 پیکسل و عرض کادر 300 پیکسل می باشد.
همچنین هم اکنون می توان دید که اندازه پدینگ، مارجین و حاشیه هم جمع در اندازه کلی می شود.
همچنین شما می توانید به هر طرف یک پدینگ یا مارجین خاص خودش را بدهید. مثلا
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
یا همه را می توانید خلاصه در یک دستور بنویسید:
padding: 25px 50px 75px 100px;
یعنی فاصله از بالا 25 پیکسل، سمت راست 50 پیکسل، پایین 75 و چپ 100 پیکسل.
یک مثال دیگر :
padding: 25px 50px;
یعنی بالا و پایین 25 پیکسل و چپ و راست 50 پیکسل.
مثال اخر :
padding: 25px;
یعنی از همه طرف 25 پیکسل.
برای صفت margin هم به همین شکل می توانید استفاده کنید. همچنین یک مقدار بنام auto می تونید به این صفات بدهید که بطور خودکار اندازه را از دو طرف یکسان بدهد بعنوان مثال:
Margin: 25px auto;
یعنی از بالا و پایین 25 پیکسل و نسبت به دو طرف اندازه یکسان که در برخی مثال ها برای ایجاد موقعیت وسط چین به این شکل استفاده می شود.

نمایش عناصر یا پنهان کردن انها و نحوه اشغال سطر در سی اس اس – Display property
در اینجا قصد معرفی دو صفت به شما را دارم که می توانید توسط آن کنترلی روی نحوه ی نمایش داشته باشید. بعنوان مثال بتوانید با استفاده از سی اس اس زمانی که روی یک دکمه کلیک می شود یک عنصر خاص پنهان شود و یا بحثی که در طراحی یک صفحه وب حتما برایتان کاربردی خواهد بود اینکه در بعضی قسمت های قالب باید عناصر در کنار هم قرار بگیرند یا inline باشند و در بعضی جاها بصورت block قرار بگیرند.
صفت display با مقدار block : این باعث می شود وقتی شما یک عنصر داشتید که اینگونه تنظیم شده باشد دیگر عنصر دیگری را کنار خود نپذیرد. بعنوان مثال وقتی دو باکس کنار هم طراحی کرده اید وقتی کادر اول بلوک باشد دیگر کادر دوم کنار آن قرار نخواهد گرفت بلکه در پایین آن قرار خواهد گرفت یا بطور کلی بگوییم عناصر بلوک عنصر دیگری را کنار خود نمی پذیرند و تمام سطر را اشغال می کنند (در فصل دوم که بصورت پروژه محور کار شود بیشتر با این بحث اشنا می شوید) . مثالی از عناصر block-level :
<div>
<p>
<h1> .. <h6>
<form>
<header>
<footer>
<section>
و همچنین عناصر inline در خط جدید شروع نمی شوند و پشت سر هم قرار می گیرند. عناصر inline :
<span>
<img>
<a>
در پایین قصد داریم یک مثال از inline بزنیم، در واقع می خواهم یک عنصر block را به inline تبدیل کنم، این مثال زمانی برای شما کاربرد دارد مثل وقتی که بخواهید یک منو افقی در بالای سایت خود ایجاد کنید که مثلا باید از لیست ها استفاده کنید و لیست ها نیز بطوری هستند که عناصر انها در زیر هم قرار می گیرد ولی ما باید کاری کنیم که عناصر یا هر خط در کنار هم قرار بگیرد (ارجاع – فایل این مثال در فایل های تمرینی موجود است و همچنین در فیلم اموزشی نیز کامل توضیح داده می شود) :
li {
display: inline;
}
عنصر li را از حالت پیش فرض block به inline تغییر دادیم، هم اکنون در لیست ul که li های خود را تعریف می کنیم، انها در کنار هم قرار می گیرند و می توانیم یک منو افقی ایجاد کنیم.
هم اکنون به سراغ مثالی از حالت block می رویم و یک عنصر که بصورت پیش فرض inline هست را به block تبدیل می کنیم، بر عکس مثال قبل:
span {
display: block;
}
در واقع هر تعداد عنصر span را در کنار هم بنویسیم (این عنصر برای نوشتن متن ها بود وقتی که بخواهیم استایلی را روی انها اعمال کنیم، به قسمت های پیشین مراجعه کنید تا عناصر اچ تی ام ال را یاد بگیرید) بطور مرتب کنار هم قرار میگیرند ولی می توانیم از هر نقطه ای که بخواهیم خط را بشکنیم و ادامه نوشته در خط بعد بیاید، به همین دلیل امدیم برای عنصر span صفت display با مقدار block تعریف کردیم تا این عناصر کنار هم قرار نگیرند و در واقع هر وقت یک عنصر باز شد و متنی را درون ان نوشتیم هنگامی که بسته شد و عنصر دیگر باز شد دیگر در کنار هم قرار نگیرند بلکه در زیر هم نوشته شوند، این مثال برای تمامی عناصر صدق می کند.
و اما برای مخفی کردن عناصر دو روش وجود دارد:
h1.hidden {
display: none;
}
در بالا مشخص کردیم، عنصر h1 که کلاس آن hidden است، هر متنی درون آن باشد مخفی شود.

h1.hidden {
visibility: hidden;
}
در این کد که از صفت visibility بجای displayبرای مخفی کردن استفاده شده است. تفاوت این دو در این است که هنگامی که از display برای مخفی کردن استفاده می شود جای خالی ان را هم از بین می برد ولی در روش دوم نه، متن مخفی می شود ولی فضایی که اشغال کرده است بصورت خالی باقی می ماند. در واقع اینگونه فرض کنید که توسط display انگار کلا عنصر حذف شده است ولی توسط visibilityمثل این می ماند که عنصر فقط مخفی شده است.
از ویژگی مخفی کردن عناصر در منو ها می توانید استفاده کنید.

حاشیه ها – CSS Borders
با استفاده از صفت border می توانید به کادر ها حاشیه بدهید.

CSS Borders

<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>

همچنین برای افزایش ضخامت حاشیه، صفتی به نام border-width داریم:
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}
با صفت border-color می توانید رنگ دلخواهتان را به حاشیه اعمال کنید:
p.one {
border-style: solid;
border-color: red;
}
به هر سمت می توانید یک حاشیه متفاوت بدهید:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
مشاهده می کنید حاشیه سمت بالا و پایین نقطه چین و سمت چپ و راست خط پیوسته می باشد.
همانطور که پیشتر گفتیم به شکل زیر هم صفت ها مقادر دهی می شوند، کد زیر معادل کد بالاست:
p {
border-style: dotted solid;
}
همچنین می توانید بطور خلاصه در صفت border همه مشخصات حاشیه را بدهید:
p {
border: 5px solid red;
}
اولی ضخامت حاشیه، دومی شکل حاشیه (پیوسته، خط چین، نقطه چین یا..) و سومی رنگ آن می باشد.
همچنین با صفت outline-style می توانید یک حاشیه خارجی به حاشیه فعلی بدهید، این صفت دقیقا همان مقادیر صفت border-style را می گیرد و با outline-color می توانید رنگ ان را تغییر دهید و از حاشیه متمایز کنید. این صفت نیز دقیقا همانند border خلاصه می شود در صفت outline .

CSS Outline border

کار روی لیست ها – CSS List
در قسمت های پیشین انواع لیست ها از قبیل مرتب و نامرتب را در html معرفی کردیم.
با تگ <ul> لیست های نامرتب را داشتیم که کنار هر گزینه یک دایره تو پر قرار می گرفت و با تگ <ol> لیست های مرتب را مشخص می کردیم که با اعداد کنار هر خط نشانه گذاری می شد. هم اکنون قصد داریم با استفاده از سی اس اس روی لیست ها کار کنیم.
برای تغییر شکل کنار هر لیست همانند شکل زیر :
CSS Lists

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
مشاهده کردید که جهت تغییر شکل گزینه کنار هر خط از صفت list-style-type استفاده کردیم که مقدار circle برای دایره، square برای مربع، upper-roman برای حروف یونانی، lower-alpha برای حروف کوچک انگلیسی می باشد.
همچنین می توانید عکس بجای علائم قرار دهید با صفت list-style-image :
ul {
list-style-image: url(‘sqpurple.gif’);
}

جدول ها در سی اس اس – CSS Tables
پیشتر دیدید که براحتی با اچ تی ام ال جداول مورد نظر را ایجاد می کردیم. هم اکنون با سی اس اس می توانیم کنترل بیشتری روی جدول ها داشته باشیم.
دادن حاشیه به جدول :
table, th, td {
border: 1px solid black;
}
تگ table و th و td برای ایجاد ستون های جدول را با صفت border به ضخامت 1 پیکسل و solid یعنی خط پیوسته و رنگ مشکی یک حاشیه ایجاد کردیم. کد بالا را که در فایل های تمرینی قرار داده ایم اگر باز کنید در مرورگر متوجه می شوید حاشیه بصورت دو خط کنار هم می باشد، برای اینکه تک خط کنیم باید صفت border-collapse را مشخص کنیم:
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}
در کد زیر مشاهده میکنید که ما اندازه جدول را هم مشخص کرده ایم:
table {
width: 100%;
}

th {
height: 50px;
}
عنصر table برای اندازه کل جدول که 100% یعنی برابر با کل عرض صفحه ای که داریم، th هم عنوان جدول می باشد که ارتفاع ان برابر با 50 پیکسل و قطع عرض ان هم برابر با عرض جدول است.
برای اینکه فاصله ای بین کلمه داخل جدول و اطراف ان ایجاد کنیم از padding استفاده می کنیم:
td {
padding: 15px;
}
رنگ دادن به جدول :
table, td, th {
border: 1px solid green;
}

th {
background-color: green;
color: white;
}
در اینجا ما به حاشیه و عناوین جدول رنگ سبز را اعمال کردیم. و به نوشته های عناوین جدول رنگ سفید. دقت کنید که این دستورات را قبلا خوانده ایم.

موقعیت عناصر – Position Property
توسط این خصوصیت می توانید عناصر را پشت هم قرار دهید و یا موقعیت آنها را مشخص کنید و همچنین زمانی که محتوای یک عنصر بسیار زیاد می شود چه اتفاقی بیافتد.
به چهار روش ما می توانیم موقعیت عناصر را مشخص کنیم، اگر postition برابر باشد با :
Static : در این شیوه عنصر از top, bottom, left, right تاثیر نمی گیرد و در هر جا که کد ان عنصر نوشته شود موقعیت آن هم همان جا دیده می شود.
div.static {
position: static;
border: 3px solid #8AC007;
}
Relative : عنصر نسبت به مکان عادی خودش موقعیت دهی می شود. و از top, bottom… تاثیر می گیرد.
div.relative {
position: relative;
left: 30px;
border: 3px solid #8AC007;
}
Fixed : در این نوع موقعیت عنصر ثابت می ماند، حتما بار ها کادر های کنار یا گوشه صفحه وب سایت ها را دیده اید که حتی با اسکرول کردن و رد صفحه جابجا شدن باز هم ثابت می مانند.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}
Absolute : عنصر نسبت به والد خود موقعیت دهی می شود، به موقعیت چپ، راست، بالا و پایین که مشخص می کنیم قرار می گیرد. همچنین عنصری که به این شکل موقعیت دهی شود از حالت عادی خارج شده و می تواند روی سایر عناصر نیز قرار بگیرد.
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
بحث بعدی که در همین جا داریم، روی هم قرار دادن عناصر می باشد یا Overlapping :
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
در این مثال که اگر در فیلم اموزشی یا فایل های تمرینی نگاه کنید، همانند تصویر زیر چون یکی از خصوصیات عنصر img برابر با z-index:-1 می باشد باعث می شود تا این عنصر در زیر سایت عناصر قرار بگیرد، این عدد می تواند + یا – باشد و اگر در اینجا + یک باشد روی سایر عناصر قرار می گیرد. توجه داشته باشید برای z-index حتما position باید absolute باشد.

z-index in css

یک خصوصیت دیگر داریم بنام overflow که باعث می شود وقتی که حجم مطالب یا محتوای یک عنصر مثلا یک کادر بیشتر از ظرفیت آن باشد، اسکرول ظاهر شود و بتوانیم در عنصر پایین و بالا شویم تا کل محتوا را بخوانیم.

Overflow: auto;

این مقدار را باید برای عنصر مشخص کنیم تا باعث شود مرورگر بطور اتوماتیک با سرریز کردن برخورد کند همچنین این صفت چند مقدار دیگر دارد scroll و hidden ، اولی می گوید که اگر سریز شد، اسکرول بیاید و دومی می گوید خیر، پس بهتر است ما از همان روشی که گفتیم یعنی اسکرول خودکار استفاده کنیم. همچنین اگر تصویری داشتیم درون یک کادر که از کادر بیرون زد و کادر اندازه ان نبود می توانیم overflow ان را برابر با auto قرار دهیم تا همسان شوند..

نشانه گر ماوس در سی اس اس Mouse Cursor

برای داشتن نشانه های مختلف ماوس، اینکه وقتی نشانه گر ماوس روی متن یا عنصر مورد نظر ما برود به چه شکلی در بیاید یک خصوصیت بنام cursor داریم که مقادیر زیر را می پذیرد و هر مقدار یک شکل ماوس دارد که در فایل تمرینی همراه آموزش می توانید همه را مشاهده کنید و یا در فیلم اموزشی این قسمت :

Mouse Cursor in css

شناور کردن عناصر – float

توسط این خصوصیت می توانید یک عنصر را فشار دهید به سمت چپ یا راست، بعنوان مثال در طرح بندی صفحه بسیار کاربرد دارد وقتی که یک عنصر مثل کادر ایجاد می کنید و در سمت راست بطور پیش فرض قرار می گیرد، اما شما می خواهید به سمت چپ برود باید float آن را برابر با left قرار دهید.

بعنوان مثال در یک صفحه نوشته داریم و عکس، می خواهیم عکس در سمت چپ نوشته ها قرار بگیرد بنابرین float را به شکل زیر مقدار می دهیم و حاصل می شود شکل زیر :

img {
float: right;
margin: 0 0 10px 10px;
}

نتیجه :

Float in CSS

همچنین اگر چندین عنصر داشته باشیم همه پشت سر هم قرار می گیرند به شکل زیر توجه کنید:

float in css

در اینجا به صفت دیگری می رسیم که دارای اهمیت است، به شکل بالا توجه کنید بعنوان مثال می خواهیم در هر سطر 4 عکس باشد، اینجا باید چگونه عمل کنیم!؟ با استفاده از صفت clear .

Clear سه مقدار میگیرد left, right, both یعنی از کدام سمت دیگر نگذارد در سطر عنری جای بگیرد، بعنوان مثال به شکل زیر توجه کنید که div4 از clear:left استفاده می کند:

clear property in css

انواع روش های ترازبندی عناصر در سی اس اسCSS Layout – Horizontal Align

وسط چین کردن با استفاده از مارجین :

.center {
margin: auto;
width: 60%;
border:3px solid #8AC007;
padding: 10px;
}

در کد بالا margin را برابر با auto مقدار دادیم این باعث می شود بطور خودکار عنصر وسط چین شود، دقت کنید اگر width:100% باشد این امکان وجود ندارد. همچنین این خاصیت در مرورگر اینترنت اکسپلورر 8 و پایین تر از ان کاربردی ندارد مگر !DOCTYPE بالای آن تعریف شده باشد.

راست چین یا چپ چین کردن با استفاده از صفت position :

.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}

همانطور که پیشتر گفتیم خصوصیت position وقتی برابر با absolute باشد نسبت به چپ، راست، پایین و بالا مقدار دهی می شود. زمانی که right:0px باشد یعنی در سمت راست است و اگر left:0px باشد یعنی در سمت چپ عنصر قرار دارد.

نکته: هنگامی که با position ترازبندی میکنید بهتر از است margin و padding برای body تعریف کنید تا در مرورگر های مختلف نمایش یکسانی را داشته باشیم.

body {
margin: 0;
padding: 0;
}

تراز بندی چپ یا راست توسط float :

این خصوصیت را پیشتر به شما آموختیم.

.right {
float: right;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}

ایجاد یک منو عمودی و افقی توسط سی اس اس – CSS Navigation Bar

همانطور که می دانید هر سایت چندین منو می تواند داشته باشد، این منو ها توسط سی اس اس و یا بوت استرپ براحتی ایجاد می شوند.

نوار منو در واقع لیستی از لینک هاست. بنابراین پیاده سازی ان در اچ تی ام ال به شکل زیر خواهد بود:

<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>

همانطور که مشاهده می کنید یک لیست به شکل زیر ایجاد شد:

list

اما بهتر است نقطه کنار لیست را حذف کنیم، اگر یادتان باشد در قسمت پیش گفتیم چگونه، با استفاده از دستور سی اس اس زیر :

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

با استفاده از صفت list-style-type:none; نقطه های کنار هر خط حذف می شود و اینکه margin و padding را برابر با 0 قرار دادیم برای حذف تنظیمات پیش فرض مرورگر می باشد.

برای اینکه هم اکنون یک نوار منو عمودی داشته باشیم بهتر است خصوصیت display را نیز مقدار دهی کنیم:

a {
display: block;
width: 60px;
}

این باعث می شود که لینک ها کنار هم قرار نگیرند و محدوده ما شکل بگیرد با عرض 60 پیکسل.

این شکل ساده ایجاد منو بار عمودی بود که برایتان گفتیم، اما شکل زیباتر ان را برایتان ایجاد کرده ایم و در فایل های تمرینی قرار داده ایم همچنین در فیلم اموزشی بحث خواهد شد.

برای ایجاد منو یک منو افقی دو راه وجود دارد استفاده از inline یا floating، کد های اچ تی ام ال را به همان شکل بالا می نویسیم ولی به عنصر li باید صفت displayرا بصورت inlineبدهیم تا لینک ها در کنار هم قرار بگیرند.

li {
display: inline;
}

و عنصر ul را نیز به همان شکل قبلی استایل می دهیم.

و اما ایجاد منو افقی به روش floating به شکل زیر می باشد:

li {
float: left;
}

a {
display: block;
width: 60px;
}

در li خصوصیت float را برابر با left قرار دادیم تا عناصر کنار یکدیگر قرار بگیرند.

همچنین a صفت display ان را برابر block قرار دادیم تا تمام فضای لینک قابل کلیک کردن باشد و محیط ما شکل بگیرد.

شفاف کردن تصاویر در سی اس اسCSS Image Opacity / Transparency

این مبحث مربوط به سی اس اس 3 می شود، اما چون جلوتر نحوه ایجاد گالری عکس را فرا میگیریم بهتر است این بحث را نیز بیاموزیم که اگر بخواهید در گالری خود اعمال کنید.

به شکل های زیر نگاه کنید تا مفهوم شفاف کردن تصاویر را درک کنید.

image opacityTransparent box in css

بعنوان مثال وقتی یک گالری تصویر دایم، دوست داریم تا با رفتن نشانه گر ماوس روی هر عکس، کمی شفافتر شود و یا ابتدا تصاویر کمرنگ و شفاف باشند سپس با رفتن ماوس روی آن ها رنگ واقعی خود را بگیرند.

برای شفاف سازی تصاویری ما از خصوصیتی به نام opacity استفاده می کنیم. این صفت مقداری از 0.0 تا 1.0 به خود می گیرد که در اولین حالت یعنی نا پدید و در دومین حالت که 1.0 باشد یعنی تیره و پر رنگ، حالا در این بین ما می توانیم سایر مقادیر همچون 0.5 و.. را اعمال کنیم.

img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

در مثال بالا مشخص کردیم تمام عناصر img یا در واقع تمام عکس های ما شفاف و کمرنگ شوند و در صورتی که نشانه گر ماوس روی عکس ها رفت یعنی img:hover به حالت پر رنگ یعنی 1.0 تبدیل شوند.

جهت مشاهده مثال های بیشتر به فیلم آموزشی یا فایل های تمرینی مراجعه کنید.

نمایش قسمتی از تصویرImage Sprites

به تصویر زیر نگاه کنید:

css

می توانیم بجای اینکه از سه تصویر مختلف استفاده کنیم، یک تصویر داشته باشیم و در هر جا بسته به شکل مورد نیاز همان قسمت را نمایش دهیم.
بعنوان مثال در تصویر بالا اگر بخواهیم فقط قسمت خانه را نمایش دهیم:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
مشاهده میکنید که ابتدا با دادن width و height اندازه را مشخص کردیم و سپس در خصوصیت background عکس را دادیم و با 0 و 0 مشخص کردیم چه بخشی نمایش داده شود از کل عکس، اولین 0 یعنی left:0px و دومین 0 فاصله از سمت بالا (top:0px) است.
برای اینکه بیشتر با این قسمت آشنا شوید، لطفا به فیلم اموزشی مراجعه کنید. همچنین از فایل های تمرینی که روی سایت میهن لرن قرار داده شده استفاده کنید.
ایجاد یک گالری عکس با سی اس اس
کد های ایجاد یک گالری عکس در زیر آمده است و همچنین جهت مشاهده توضیحات، لطفا به فیلم آموزشی مراجعه کنید.
<html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}

div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}

div.img a:hover img {
border:1px solid #0000ff;
}

div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>

<div class=”img”>
<a target=”_blank” href=”klematis_big.htm”>
<img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”klematis2_big.htm”>
<img src=”klematis2_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”klematis3_big.htm”>
<img src=”klematis3_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”klematis4_big.htm”>
<img src=”klematis4_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>

</body>
</html>

قانون @media
همانطور که می دانید، نحوه نمایش یک شی یا یک فونت روی صفحه نمایش یا روی دیوایس های مختلف با روی کاغذ می تواند جهت نمایش بهتر متفاوت باشد. بعنوان مثال شاید ما در صفحه نمایش لپ تاپ صفحه سایت را با فونت BRoya در اندازه 15 مناسب ببینیم اما این اندازه هنگام چاپ روی کاغذ کوچک باشد و بهتر باشد که از اندازه فرضا 18 استفاده شود. در سی اس اس این قابلیت وجود دارد که نحوه نمایش هر صفحه را در رسانه های مختلف مشخص کنیم. بعنوان مثال اگر از صفحه سایت پرینت گرفته شود به چه شکل باشد.
به مثال زیر توجه کنید:
@media screen {
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}

@media print {
p {
font-family: georgia, serif;
font-size: 14px;
color: blue;
}
}
در بالا مشخص کرده ایم که فونت روی صفحه نمایش verdana با اندازه 17 پیکسل باشد، اما اگر چاپ شد از فونت Georgia و اندازه 14 پیکسل برای نمایش متن استفاده شود و رنگ ان نیز آبی باشد.

دانلود فیلم آموزشی

مشاهده آنلاین

دانلود PDF آموزشی

دانلود فایل های تمرینی

تولید کننده و ناشر : میهن لرن

حجم فیلم آموزشی : 200 مگابایت / زمان : 1 ساعت و 45 دقیقه / کیفیت : عالی 720p

پیشنهاد می شود از مجموعه های ویژه آموزشی میهن لرن بازدید کنید:

 

دانلود قسمت های پیشین طراحی وب:

  1. قسمت اول: آموزش طراحی سایت در فتوشاپ (مکاپ سایت)
  2. قسمت دوم: آموزش HTML
  3. قسمت سوم: آموزش HTML5 قسمت اول
  4. قسمت چهارم: آموزش HTML5 قسمت دوم
  5. قسمت پنجم: آموزش CSS قسمت اول
  6. قسمت ششم(فعلی): آموزش CSS قسمت دوم
  7. ادامه دارد..

کاربران عزیز میهن لرن، لطفا با نظرات سازنده خود حامی و همراه ما باشید. همچنین در صورت مشکل در دانلود حتما از طریق ایمیل و یا نظرات ما را مطلع کنید.

همچنین ببینید

آموزش فریم ورک اسپرینگ | Spring

راه اندازی خودکار (Autowiring) در فریم ورک اسپرینگ

به نام خدای بخشنده مهربان خوشحالیم که بعنوان اولین مرجع فارسی زبان، آموزش های مربوط …

4 دیدگاه

  1. سلام وقت بخیر
    اموزشتون خیلی عالی از این همه زحماتتون واقعا ممنونم خسته نباشید.

  2. سلام. از زحمات شما بسیار ممنونم خیلی زحمت میکشین.هر روز سایتتون رو دنبال میکنم. منتظر آموزش هفتم هستم.
    با تشکر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *