کد:
<html>
<head>
<link href=”../CSS-FILE-ADDRESS.css” type=”text/css” rel=”StyleShreet”/>
</head>
</html>
:: در روش زیر شما دستورات رو در فایلی با نام دلخواه با پسوند css. ذخیره کنید و لینک رو به جای ../CSS-FILE-ADDRESS.css قرار دهید.
نمونه ای از یک دستور CSS :
دستوری که می بینید مربوط میشه به حالت سوم یعنی استفاده در تگ Head و فراخوانی سند CSS که دستور بالا نمایی از یک دستور در فایل css می باشدکه به یک تگ h1 دستور داده شده که رنگ تمام تگ های h1 آبی باشه و اندازه قلم هم 12 پیکسل باشد.
با این حال به عبارتی میشه :
Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.
Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال
p {color:red;text-align:center;}
برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید:
p {
color:red;
text-align:center;
}
اما حالت دوم یعنی :
<div style=”CSS CODES”> CODE </div>
در اینجا دستورات CSS رو داخل تگ style قرار می دهیم. به این صورت
style="color#000000;font-family:tahoma;font-size:12px;"
این دستورو یا خاصیت رو میتونیم هر جا که دلمون میخواد قرار بدیم البته نه همه جا فقط در جاهایی که بشه بهش خاصیت های مختلف داد من چندتا از تگ های HTML که میشه بهش خاصیت CSS رو داد اینجا مینویسم :
<P></P>
مثال :
<P style="color#000000;font-family:tahoma;font-size:12px;" >متن شما </P>
<h3></h3>
مثال :
<h3 style="color#dddddd;font-family:Arial;font-size:14px;" >متن شما </h3>
امید وارم متوجه شده باشید حالا اما اینجا داشتیم به متن خاصیت میدادیم برای دیگر تگ ها هم به همین صورته البته اونجا دیگه با خاصیت هایی که می خوایم.
حالت اول هم که تقریبا مثل حالت سوم میمونه به مثال زیر توجه کنید متوجه میشید .
<style type=”text/css”>
p {
color:red;
text-align:center;
}
</style>
CSS Comment :
در تمامی زبان های برنامه نویسی امکانی وجود دارد که در کنار کدهای اصلی خود، توضیحاتی بنویسید که کدهای آن قسمت را شرح میدهند و هنگامی که مدت ها بعد شما و یا شخص دیگری به آنها مراجعه میکند، این توضیحات اضافه کمک بسیاری برای تغییرخواهند کرد. این توضیحات هنگام اجرای سایت نادیده گرفته می شوند بنابراین هیچ خطایی بوجود نخواهد آمد و می توانید با خیال راحت هرچه را که می خواهید با هر زبانی درج کنید. شرط اینکار اینست که توضیحات خود را با علامت "/*" شروع کنید و با علامت "*/" به پایان برسانید.
/*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تعریف میکنیم :
<p id="para1">This is a Paragraph.<p>
سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت "#" می نویسیم:
#para1{
text-align:center;
color:red;
}
بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
نکته : هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.
اعمال دستورات بر روی یک گروه از عناصر توسط Class
برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد "." قبل از آن اضافه کنید
مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Classمشترک در کدهای HTML تعریف میکنیم :
<p class="cneter">This is a Paragraph.</p>
سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت "." می نویسیم:
.cneter {
text-align:center;
}
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
