یکی از مهم ترین وجهه های دنیای وب نمود و شکل ظاهری صفحات اینترنتی است. این ظاهر زیبا و دلنشین حاصل سال ها تلاش و پیشرفت تدریجی از سوی برنامه نویسان و توسعه دهندگان بوده است و طی یک شب به وجود نیامده است. واضح است که زبان های متعدد و بسیاری در دنیای وب مورد استفاده قرار می گیرند اما ظاهر هر وب سایت نهایتا به دو عنصر اصلی وابسته است که بدون آن ها هیچ صفحه ی اینترنتی در دنیا وجود نخواهد داشت: زبان HTML و زبان CSS.
پس از بیان این نکته، اولین چیزی که در ذهن خواننده شکل می گیرد یک سوال است؛ زبان JavaScript چطور؟ ما منکر نقش کلیدی و اساسی زبان جاوا اسکریپت در صفحات وب امروزی نیستیم اما هر وب سایتی از هر نوعی که باشد به HTML و CSS نیاز دارد. به عبارت دیگر می توان وب سایتی داشت که از زبان جاوا اسکریپت استفاده نکند اما امکان ندارد وب سایتی داشته باشیم که HTML و CSS نداشته باشد؛ وب سایت را مانند یک ساختمان در نظر بگیرید! HTML به منزله ی ساختار و اسکلت آهنی یک ساختمان است و CSS به منزله ی آجر ها و نمای یک ساختمان و غیره. آیا می توان ساختمانی داشت که اسکلت بندی ندارد؟!
CSS مخفف Cascading Style Sheets است که معنی «صفحات استایل آبشاری» را می دهد!
ترجمه ی این عبارت نیاز به کمی توضیح دارد!
در این معنی کلمات صفحات استایل قابل درک هستند چرا که CSS صفحاتی از کد هستند که به استایل و ظاهر یک وب سایت مربوط اند اما چرا «آبشاری»؟! جناب آقای Håkon Wium Lie (از توسعه دهندگان و سازندگان اولیه زبان CSS) در پایان نامه ی دکترای خود (در این لینک) کلمه ی cascade را به این شکل معنی کرده است:
CASCADING:
THE PROCESS OF COMBINING SEVERAL STYLE SHEETS AND RESOLVING CONFLICTS BETWEEN THEM.
آبشاری:
فرآیند ترکیب چندین صفحه ی استایل و رفع ناسازگاری های بین آن ها.
حتما می گویید چه ناسازگاری یا تضادی می تواند بین صفحات CSS وجود داشته باشد که آن ها را برطرف کنیم؟ در ادامه ی این دوره خواهید فهمید که ما می توانیم برای یک عنصر HTML بیش از یک مورد قانون CSS بنویسیم و آن را به چند شکل استایل دهی کنیم؛ به طور مثال در یک دستور CSS رنگ یک متن را قرمز اعلام میکنیم و در دستوری دیگر رنگ همان متن را بنفش انتخاب می کنیم! این قوانین CSS (بسته به نوع ابراز و نوشتار و موقعیتشان) هر کدام دارای درجه ای از اولویت هستند بنابراین می توان آن ها را به عنوان یک آبشار در نظر گرفت که از بالا به پایین می ریزد و قوانین بالای آبشار اهمیت بیشتری دارند. زمانی که ما این آبشار را تعریف کنیم و اهمیت هر نوع قانون را مشخص کنیم، در هنگام مواجهه با ناسازگاری و تضاد می توانیم نتیجه را مشخص کنیم. به طور مثال آن متن قرمز باشد یا بنفش؟ کدام دستور اولویت دارد؟
جدول زیر ترتیب این اولویت ها را نشان می دهد:
جدول ترتیب اولویت های آبشاری در CSS
شما هنوز با هیچ کدام از موارد آشنا نشده اید بنابراین جای نگرانی نیست، در قسمت های آینده به طور کامل در موردشان بحث خواهیم کرد.
نکته: موارد استفاده از CSS تنها به صفحات وب محدود نمی شود بلکه می توان از آن ها برای تعیین ظاهر هر نوع media (پرینت گرفتن کاغذ، ظاهر وب سایت، ظاهر pdf و …) نیز استفاده کرد.
ساختار کلی CSS
ساختار کلی یک دستور CSS
موارد استفاده شده در بالا و نکات اصلی:
- selector به «معنی انتخاب کننده» است. همانطور که از نامش مشخص است، کارش انتخاب عنصر یا عناصری است که می خواهید دستورات CSS را روی آن‌ها اعمال کنید. به طور مثال در تصویر بالا گفته ایم تگ های h1 را انتخاب کن (تمام تگ های h1).
- declaration به معنی «اعلان» است؛ به عبارت دیگر در این قسمت چیزی را که می خواهید، اعلام می کنید. هر اعلان خود از دو قسمت property و value تشکیل شده است. به طور مثال color که رنگ متن را تعیین می کند یک property یا خصوصیتِ متن است و blue (آبی) مقدار یا value آن است.
- در تصویر بالا پس از انتخاب عنصر مورد نظر (تگ های h1) گفته ایم رنگ متنشان آبی (blue) باشد و سپس اندازه ی فونت شان را نیز 12 پیکسل قرار داده ایم.
- بعد از هر declaration از علامت نقطه ویرگول استفاده می کنیم.
- فضای خالی (white space) در این نوع دستورات اهمیتی ندارد.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
|
در کد بالا یک مثال کامل از یک دستور CSS آورده شده است. شما به راحتی می توانید مقادیر آن را تغییر دهید اما از آنجایی که این جلسه صرفا جهت آشنایی با زبان CSS بوده است نیازی به این کار نیست. اگر در این جلسه متوجه مثال ها نمی شوید اصلا جای نگرانی نیست چرا که هنوز در مورد کدنویسی CSS صحبت نکرده ایم، در قسمت های بعدی به سراغ مباحث پیشرفته تر و عملی تر CSS خواهیم رفت.
منبع: سایت روکسو
