03
سپتامبر
در این بخش ساختار دستورات CSS را یاد خواهید گرفت. در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چراکه در بخش های بعدی بطور مفصل انواع استایل های عناصر را آموزش خواهم داد. بنابراین فقط به بخش های مورد استفاده در یک دستور CSS، نحوه جدا کردن دستورات ، جایگاه دستورات و بطور کلی ساختار دستور دقت نمایید.
Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.
Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.
مثال : در دستور زیر، مشاهده میکنید که مقدار هر خاصیت، بعد از علامت دو نقطه “:” در جلوی آن نوشته می شود. همچنین در پایان هر جفت خاصیت و مقدار علامت “;” گذاشته می شود. کل خاصیت ها و مقدارها در علامت براکت نوشته میشود:
|
1
|
p {color:red;text-align:center;} |
برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید:
|
1
2
3
4
5
|
p{color:red;text-align:center;} |
CSS Comment
در تمامی زبان های برنامه نویسی امکانی وجود دارد که در کنار کدهای اصلی خود، توضیحاتی بنویسید که کدهای آن قسمت را شرح میدهند و هنگامی که مدت ها بعد شما و یا شخص دیگری به آنها مراجعه میکند، این توضیحات اضافه کمک بسیاری برای تغییرخواهند کرد. این توضیحات هنگام اجرای سایت نادیده گرفته می شوند بنابراین هیچ خطایی بوجود نخواهد آمد و می توانید با خیال راحت هرچه را که می خواهید با هر زبانی درج کنید. شرط اینکار اینست که توضیحات خود را با علامت “/*” شروع کنید و با علامت “*/” به پایان برسانید.
|
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
همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می خواهیم استایل روی آن اعمال شود را ذکر میکنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف
بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.
اعمال دستورات فقط بر روی یک عنصر واحد توسط id
برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه کنید
مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم :
|
1
|
<p id="para1">This is a Paragraph.<p> |
سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:
|
1
2
3
4
5
|
#para1{text-align:center;color:red;} |
بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
نکته: هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.
اعمال دستورات بر روی یک گروه از عناصر توسط Class
برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Classکه برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه کنید
مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :
|
1
|
<p class="cneter">This is a Paragraph.</p> |
سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.” می نویسیم:
|
1
2
3
4
|
.cneter{text-align:center;} |
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
نکته: هرگز صفت Class را با عدد شروع نکنید چراکه فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.