CSS چیست ؟
CSS مخفف Cascading Style Sheets می باشد و زبانی است برای مشخص کردن ویژگیهای ظاهری یک وب سایت. امروزه روی این مسئله خیلی تاکید می شود که حتما برای مشخص کردن ویژگیهای ظاهری یک صفحه به جای استفاده از تگ های HTML از CSS استفاده شود. علاوه بر این CSS می تواند این امکان را به شما بدهد که برای صفحه خود در مدیاهای مختلف ویژگیهای مختلفی در نظر بگیرید. بنابراین توسط CSS شما این قدرت را خواهید داشت که ظاهر وب سایت خود را هر گونه که بخواهید تغییر دهید، همیشه سعی کنید از CSS استفاده کنید.
هدف و کاربرد css چیست ؟
هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.
برخی از کاربردهای CSS عبارتند از:
– تعیین ارتفاع و عرض
– طراحی ریسپانسیو
– انتخاب پس زمینه
– انتخال محل قرار گرفتن یک عنصر مانند متن یا عکس و …
– تعیین چیدمان نوشته ها “چپ چین ، راست چین و …”
– مشخص کردن میزان فاصله ی عناصر از همدیگر
– تغییر در نوع نوشتاری “فونت، رنگ و …”
ساختار یا بدنه CSS
ساختار CSS از ۲ قسمت نام عنصر یا Selector و بخش اعلان یا Declaration تشکیل شده است.
نام عنصر (Selector)
قسمت معرفی یا صدا کردن عنصر صفحه وب می باشد که در HTML ساخته شده است.
بخش اعلان(Declaration)
این قسمت محل اختصاص دادن ویژگی و مشخصات به عنصر مورد نظر می باشد.
در تصور زیر h1 نام عنصر می باشد که متغیر می باشد و در میان علامت {} ویژگی و خصوصیت عنصر را با مقدار مورد نظر نوشته می شود. فراموش نکنید که نام عنصر متغیر می باشد و هر عنصر دارای ویژگی و خصوصیت مختص خود می باشد.
سه روش برای استفاده از استایل های CSS در HTML وجود دارد:
1- روش خطی inline stylesheets
در این روش استایل مورد نظر مستقیم در خصوصیت style آن تگ مقدار دهی می شود.
در مثال بالا برای تغییر رنگ صفحه به صورت خطی به این شکل عمل می کنیم:
<html>
<head>
<title> Css Styles </title>
<body style="background-color:red;">
</body>
</html>
2- روش درونی Internal Stylesheet
در این روش کلیه دستورات CSS بین دو تگ <style></style> واقع در تگ <head> قرار می گیرند.
مثلا برای تغییر رنگ زمینه صفحه به صورت زیر عمل می کنیم:
<html>
<head>
<title> Css Styles </title>
<style>
Body {
Background-color : red;
}
</style>
<body>
</body>
</html>
3- روش خارجی external stylesheets
در این روش کلیه استایل های مورد نظر درون فایلی جداگانه ای نوشته شده و با پسوند .css ذخیره میشود و سپس توسط برچسب <link> طبق اصول زیر به صفحه اضافه می شود:
<link rel="stylesheet" type="text/css" href="file.css">
دقت کنید که آدرس فایل file.css در href نوشته می شود.