به عنوان اولین پستم میخوام الگوهای آبشاری یا CSS رو براتون معرفی کنم. ویکیپدیا CSS رو اینجوری تعرف کرده:
“الگوهای آبشاری یا شیوه نامه آبشاری سَبْک یا سیاساس (Cascading Style Sheets CSS)، روشی ساده برای نمایش چیدمان و جلوههای تصویری (مانند نوع قلم، رنگ و اندازهها) بر صفحههای وب اند. الگوهای آبشاری از جنس زبانهای نشانهگذاری، با ساختار متن ساده رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پیدرپی، برای چگونگی نمایش هر صفحه وب افزوده میشود. به گفتهای ساده تر، این دستورها روش نشان داده شدن قلمها و اندازه شان، رنگها و پس زمینهها، روش تقسیمات (DIV) و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای میدهند.” در واقع CSS نحوه نمایش عناصر HTML رو تعریف میکنه.
ترکیب سی اس اس :
هر یک از نقش های CSS از ۲ بخش تشکیل شده اند : انتخابگر (Selector) و یک یا چند اعلان (Declaration).
. انتخابگرها معمولاً همون عناصر صفحه HTML ما هستن.
. هر اعلان (ترجمه بهتری براش پیدا نکردم) از صفت و مقدار اون صفت تشکیل شده.
. صفت همون نوع استایل ما هستش که قراره تغییر کنه (مثل : فونت، رنگ، اندازه فونت و …).
. هر اعلان با سمی کلن از همدیگه جدا میشن و کل صفتهامون هم بین ۲ تا براکت قرار دارن.
1
|
p { color : red ; text-align : center ;} |
برای اینکه CSS مون بهتر خونده بشه، میتونیم هر اعلان رو تویه یک خط بنویسیم. به این شکل :
1
2
3
4
5
|
p { color : red ; text-align : center ; } |
توضیحات CSS
comments یا توضیحات توی همه زبان های برنامه نویسی به شکل های مختلف وجود دارن. اگه بخواین در آینده با خوندن CSS’تون دچار سردرگمی نشین یکی از بهترین راهها گذاشتن توضیحاته. توی CSS کامنت ها با “*/” شروع و با “/*” تموم میشن.
1
2
3
4
5
6
7
8
|
/*This is a comment*/ p { text-align : center ; /*This is another comment*/ color : black ; font-family : arial ; } |
ID و Class سی اس اس
CSS این اجازه رو به شما میده تا بتونین سلکتورهایی با اسم دلخواه خودتون داشته باشین. که بهشون “id” و “class” میگن.
سلکتور ID
ID برای عناصر منحصر به فرد و معمولاً برای تقسیم بندی کلی صفحه استفاده میشه. مثلاً Content, Header یا Footer. انتخاب گر ID با علامت شارپ “#” تعریف میشه.
1
2
3
4
|
#header{ text-align : center ; background-color : red ; } |
توی صفحه هم باید اینطوری نوشته بشه :
1
|
< div id = "header" ></ div > |
* ID رو نباید با عدد شروع کرد چون مرورگر فایرفاکس پشتیبانی نمی کنه.
سلکتور Class
بر خلاف ID از کلاس برای تعریف استایل گروهی از عناصر صفحه استفاده و با علامت نقطه “.” تعریف میشه.
1
|
. center { text-align : center ;} |
* Class رو نباید با عدد شروع کرد چون فقط مرورگر اینترنت اکسپلورر پشتیبانی میکنه!
راههای وارد کردن CSS
3 راه برای وارد کردن الگوی آبشاری وجود داره :
۱- الگونامه خارجی
در این روش برای اتصال یک سند CSS که با پسوند .css
شناخته میشود، از تگ <link> در قسمت <head> استفاده میشه. مثال:
1
2
3
|
< head > < link rel = "stylesheet" type = "text/css" href = "style.css" /> </ head > |
2- الگو نامه داخلی
الگو نامه داخلی در قسمت <head> در سند اچتیامال، با استفاده از تگ <style> تعریف میشه :
1
2
3
4
5
6
|
< head > < style type = "text/css" > a {color:#fff;} span {margin-left:20px;} </ style > </ head > |
3- الگوی خطی
1
|
< p style = "color:sienna;margin-left:20px" >This is a paragraph.</ p > |
کلاً الگوی خطی رو من پیشنهاد نمیکنم، وقتی به قسمت سلکتورها رسیدیم میگم چرا D:
بعدی > |
---|