CSS (سی اس اس) چیست؟
- CSS (سی اس اس) سرنام واژگان Cascading Style Sheets است. (صفحات استایل آبشاری)
- با استفاده از CSS می توان، نحوه ی نمایش عناصر html را مشخص نمود.
- Styleها برای حل کردن یک مشکل به HTML 4.0 اضافه شدند.
- برگه های استایل خارجی (External Style Sheets) می توانند در انجام کارهای زیاد صرفه جویی کنند.
- برگه های استایل خارجی در فایل های با فرمت css. ذخیره می شوند.
HTML هرگز قصد نداشت که توسط تگ ها، صفحات را قالب بندی کند، بلکه قصد داشت محتوای یک سند را فقط نمایش دهد.
زمانی که تگ هایی مانند <font> و مشخصه هایی مانند color به HTML 3.2 اضافه شد، برای طراحان وب یک کابوس بزرگ آغاز شد. در وب سایت های بزرگ باید اطلاعات fontها و colorها به هر صفحه ای اضافه می شد و این کار بسیار هزینه بری بود.
برای حل این مشکل، CSS (سی اس اس) توسط کنسرسیوم W3C یا (World Wide Web) ایجاد شد.
در HTML 4.0 قالب بندی صفحات می تواند از فایل HTML حذف شده و در یک فایل CSS (سی اس اس) جدا ذخیره شود.
امروزه تمام مرورگرها، CSS (سی اس اس) را پشتیبانی می کنند.
Styleها معمولاً در فایلهای جداگانه با فرمت CSS (سی اس اس) ذخیره می شوند (External style sheets) اینکار شما را قادر می سازد فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات یک پروژه را تغییر دهید.
ساختار (syntax) دستورات CSS
یک قانون یا Rule در CSS از دو قسمت اصلی تشکیل شده است: گزینشگر یا Selector و اعلان یا Declaration
Selector معمولاً یک تگ HTML است که می خواهید آنرا قالب بندی کنید.
هر Declaration شامل یک Property و یک Value است.
Property در واقع یک خاصیت است که شما می خواهید آنرا تغییر دهید، هر Property یک مقدار دارد.
selectorها در CSS
در CSS برای دسترسی به عناصر HTML و تنظیم یک Style روی آن، سه راه وجود دارد:
از طریق ID عنصر HTML
از طریق Class عنصر HTML
از طریق نام تگ HTML
1- اختصاص Style از طریق ID عنصر
در CSS برای عناصر HTMLی که ID دارند می توان Style تعریف کرد.
در واقع توسط ID یا شناسه، Style تعریف شده را به یک و تنها یک عنصر اختصاص می دهد.
نکته: همانطور که می دانید ID عناصر در یک صفحه HTML، یکتا و Unique هستند، بنابراین Style تعریف شده فقط روی یک عنصر اعمال می شود.
در CSS برای تعریف این نوع Style از علامت “#” و در ادامه ID عنصر استفاده می شود.
2- اختصاص Style از طریق Class عنصر
در واقع Style تعریف شده را روی یک گروه از عناصر HTML اعمال می کند.
نکته: در یک فرم HTML برای چندین عنصر می توان، یک کلاس در نظر گرفت(“Class=”ClassName)، بنابراین Style تعریف شده روی تمام عناصر ذکر شده، اعمال خواهد شد.
در CSS برای تعریف این نوع Style از علامت “.” و در ادامه نام Class عنصر استفاده می شود.
3- اختصاص Style از طریق نام تگ
شما می توانید همچنین مشخص کنید که یک تگ مشخص در صفحه HTML از یک Style پیروی کند.
در CSS برای تعریف این نوع Style به هیچ علامت خاصی نیاز نیست و فقط باید نام تگ ذکر شود
CSSهای داخلی و خارجی
اعمال CSS بر روی تگهای HTML
برای تحقق این امر، سه راه وجود دارد:
برگه های استایل خارجی یا External style sheet
برگه های استایل داخلی یا Internal style sheet
استایل درون تگی یا Inline style
برگه استایل خارجی – External Style Sheet
زمانی که Styleها در صفحات مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.
هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.
یک فایل CSS خارجی می تواند در هر ویرایشگری نوشته شود و نباید شامل تگهای HTML باشد و همچنین باید فرمت آن css. باشد.
<head> <link rel="stylesheet" type="text/css" href="/mystyle.css" /> </head>
برگه های استایل داخلی – Internal Style Sheet
زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شود، باید از Style داخلی استفاده کرد.
Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
استایل درون تگی – Inline Styles
قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.
طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
ترتیب اعمال استایل ها
اگر چند Property روی یک Selector در دو style sheet مختلف تنظیم شود، در نهایت Selector مربوطه تمام مقادیر را به ارث خواهد برد.
زمانی که یک خصوصیت یکسان به روش های مختلف برای یک عنصر، با مقادیر مختلف تنظیم می شود در نهایت کدام مقدار در نظر گرفته می شود؟
بصورت کلی، ما می توانیم بگوییم که ترتیب اعمال استایل ها بصورت زیر خواهد بود که اولویت با مورد آخر است:
- پیش فرض مرورگر
- برگه های استایل خارجی
- برگه های استایل داخلی
- استایل های درون تگی
بنابراین بالاترین اولویت را استایل درون تگی دارد و این بدان معنا است که اگر خصوصیتی هم درون تگ و هم در head صفحه و هم در یک استایل خارجی تنظیم شده باشد، نهایتاً مقدار درون تگ در نظر گرفته می شود.
اگر لینک استایل خارجی، بعد از تعاریف استایل داخلی که در head صفحه قرار دارد، آورده شود، اولویت با تنظیمات درون استایل خارجی خواهد بود.