فصل ۱ | CSS Basics

مقدمه ای بر CSS

CSS مخفف عبارت Cascading Style Sheets (برگه‌های سبک آبشاری) است. این زبان برای طراحی و زیباسازی صفحات وب استفاده می‌شود و مشخص می‌کند که عناصر HTML باید چگونه نمایش داده شوند؛ مثل رنگ، فاصله‌گذاری، اندازه، فونت و چیدمان کلی صفحه. اگر HTML را اسکلت و محتوای یک صفحه وب در نظر بگیریم، CSS همان چیزی است که ظاهر و جلوه‌ی بصری را به آن می‌دهد.

CSS چه کاری انجام میدهد؟

با CSS می‌توان ویژگی‌های ظاهری زیادی را برای عناصر HTML تعریف کرد، از جمله:

  • تغییر رنگ متن و پس‌زمینه
  • تنظیم فونت و اندازه نوشته‌ها
  • تعیین فاصله بین عناصر (margin و padding )
  • چیدمان و جایگذاری عناصر در صفحه
  • طراحی صفحات واکنش‌گرا ( Responsive ) برای موبایل و دسکتاپ

چرا CSS مهم است؟

بدون CSS ، صفحات وب فقط شامل متن و عناصر ساده و بدون هیچ‌گونه طراحی خواهند بود. CSS باعث می‌شود:

  1. طراحی از محتوا جدا شود و مدیریت پروژه ساده‌تر گردد.
  2. بتوان ظاهر چندین صفحه را با یک فایل CSS مشترک کنترل کرد.
  3. صفحات وب زیباتر، خواناتر و کاربرپسندتر شوند.

نحوه‌ی اتصال CSS به HTML

معمول‌ترین و بهترین روش، استفاده از یک فایل CSS جداگانه است که با تگ <link> به فایل HTML متصل می‌شود.

نکته: بهتر است تگ <link> را داخل بخش <head> فایل HTML قرار بگیرد.
index.html
<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"content="width=device-width, initial-scale=1.0">

    <title>صفحه من</title>
    <link rel="stylesheet"href="style.css">
</head>

<body>

    <h1>عنوان صفحه</h1>


</body>
</html>
style.css
h1 {
    color: blue;
    text-align: center;
}

در این مثال، فایل style.css با استفاده از تگ link به index.html متصل شده است. سپس در فایل CSS ، به عنصر h1 گفته‌ایم که رنگ متن آبی و تراز آن وسط‌چین باشد.

ساختار کلی یک قانون CSS

هر قانون CSS از دو بخش اصلی تشکیل شده است: Selector (انتخاب‌گر) که مشخص می‌کند کدام عنصر HTML استایل بگیرد، و Declaration Block (بلوک اعلان) که شامل ویژگی‌ها و مقادیر آن‌هاست.

style.css
p {
    color: red;
    font-size: 16px;
}

در این نمونه، p نقش Selector را دارد و تمام پاراگراف‌های صفحه را انتخاب می‌کند. داخل آکولاد { } دو ویژگی تعریف شده : color برای رنگ متن و font-size برای اندازه‌ی فونت. هر ویژگی با یک : از مقدارش جدا شده و با ; پایان می‌یابد.