آموزش CSS

✍️ محمود کاظمی 🔄 ۲ دی ۱۴۰۴ ⏱ حدود ۴ دقیقه

مقدمه

CSS (Cascading Style Sheets) زبان اصلی برای طراحی و استایل‌دهی به صفحات وب است. در کنار HTML که ساختار محتوا را تعریف می‌کند، و JavaScript که رفتار صفحات را کنترل می‌کند، CSS مسئول ظاهر بصری وب‌سایت شماست. با استفاده از CSS می‌توانید رنگ‌ها، فونت‌ها، طرح‌بندی‌ها، فاصله‌ها و تقریباً هر جنبه بصری دیگری را کنترل کنید.

چرا CSS مهم است؟

جداسازی محتوا از نمایش: HTML وظیفه تعریف ساختار محتوا (متن، تصاویر، لینک‌ها) را دارد، در حالی که CSS وظیفه استایل‌دهی آن را بر عهده دارد. این جداسازی باعث می‌شود نگهداری و به‌روزرسانی آسان‌تر شود.
سازگاری با دستگاه‌های مختلف: با استفاده از واحدهای نسبی و Media Queries، می‌توانید استایل‌هایی ایجاد کنید که در اندازه‌ها و رزولوشن‌های مختلف صفحه نمایش (موبایل، تبلت، دسکتاپ) به خوبی نمایش داده شوند.
بهبود تجربه کاربری (UX): یک طراحی خوب و منظم می‌تواند تجربه کاربری را به شدت بهبود بخشد.

تاریخچه مختصر CSS

CSS در اواسط دهه ۱۹۹۰ توسط هاکان وینم توسعه یافت تا مشکلی که وب‌سایت‌ها در آن زمان با آن مواجه بودند (نیاز به استایل‌دهی تکراری و سخت در HTML) را حل کند. نسخه‌های مختلفی از CSS منتشر شده است:

CSS1 (منتشر شده در ۱۹۹۶): اصول اولیه استایل‌دهی مانند رنگ‌ها و فونت‌ها.
CSS2 (منتشر شده در ۱۹۹۸): شامل استایل‌های پیشرفته‌تر مانند موقعیت‌یابی (Positioning) و نحوه‌های نمایش (Display modes).
CSS3 (در حال توسعه و به‌روزرسانی مداوم): این نسخه با معرفی ماژول‌ها، قابلیت‌های بسیار بیشتری مانند انیمیشن‌ها، ترنزیشن‌ها، Flexbox و Grid Layout را فراهم کرده است.

نحوه اعمال CSS به HTML

سه روش اصلی برای اعمال کردن استایل‌های CSS به یک سند HTML وجود دارد:

۱. استایل‌دهی درون‌خطی (Inline Styling)

در این روش، استایل‌ها مستقیماً در تگ‌های HTML با استفاده از ویژگی style اعمال می‌شوند.

مثال:

<h1 style="color: blue; font-size: 24px;">
    عنوان با استایل درون‌خطی
</h1>

نکات:

این روش فقط برای استایل‌های بسیار خاص و محدود استفاده می‌شود.
به دلیل اولویت بالا، ممکن است استایل‌های دیگر را نادیده بگیرد.
نگهداری آن دشوار است زیرا استایل‌ها در همه جای کد پراکنده هستند.

۲. استایل‌دهی داخلی (Internal Styling)

استایل‌ها در تگ style درون بخش head سند HTML تعریف می‌شوند.

مثال:

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color: green;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <h1>عنوان داخلی</h1>
    </body>
</html>

نکات:

برای استایل‌های مربوط به یک صفحه خاص مناسب است.
هنوز هم استایل‌ها درون فایل HTML قرار دارند.

۳. استایل‌دهی خارجی (External Styling)

این روش ترجیحی و استانداردترین روش است. استایل‌ها در یک فایل جداگانه با پسوند .css نوشته شده و سپس با استفاده از تگ link در بخش head به HTML متصل می‌شوند.

مثال (فایل style.css):

body {
    font-family: Tahoma, sans-serif;
    background-color: #f4f4f4;
}

p {
    line-height: 1.6;
}

مثال (فایل index.html):

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>این متن با استفاده از فایل استایل خارجی طراحی شده است.</p>
    </body>
</html>

نکات:

بهترین روش برای پروژه‌های بزرگ.
امکان نگهداری آسان و استفاده مجدد از استایل‌ها در چندین صفحه.

ساختار یک قانون CSS (CSS Rule)

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

انتخاب‌گر (Selector)

انتخاب‌گر مشخص می‌کند کدام عنصر HTML باید استایل بگیرد.

بلوک اعلان (Declaration Block)

این بلوک حاوی یک یا چند اعلان (Declaration) است که با آکولاد ({}) محصور شده‌اند. هر اعلان شامل یک ویژگی (Property) و یک مقدار (Value) است که با دو نقطه از هم جدا می‌شوند و با سمی‌کولن (;) پایان می‌یابد.

مثال:

selector {
    property: value;
    property2: value2;
}

انتخاب‌گرها (Selectors)

انتخاب‌گرها کلید اعمال استایل به عناصر خاص هستند.

۱. انتخاب‌گر عنصر (Element Selector)

همه نمونه‌های یک تگ HTML را هدف قرار می‌دهد.

مثال:

p {
    color: gray; /* تمام تگ های p را خاکستری می کند */
}

۲. انتخاب‌گر کلاس (Class Selector)

با استفاده از نقطه (.) قبل از نام کلاس، عناصری را انتخاب می‌کند که دارای آن ویژگی class در HTML باشند.

مثال HTML:

<p class="highlight">
    این متن برجسته است.
</p>

مثال CSS:

.highlight {
    background-color: yellow;
    font-weight: bold;
}

۳. انتخاب‌گر شناسه (ID Selector)

با استفاده از علامت هش (#) قبل از نام شناسه، یک عنصر منحصر به فرد را انتخاب می‌کند (هر شناسه در یک صفحه باید یکتا باشد).

مثال HTML:

<div id="main-header">
    سربرگ اصلی
</div>

مثال CSS:

#main-header {
    font-size: 32px;
    text-align: center;
}

۴. انتخاب‌گر ویژگی (Attribute Selector)

عناصری را بر اساس وجود یا مقدار یک ویژگی خاص انتخاب می‌کند.

مثال:

[target="_blank"] {
    /* همه لینک هایی که در پنجره جدید باز می شوند */
    color: purple;
}

a[href^="https"] {
    /* لینک هایی که با https شروع می شوند */
    text-decoration: underline;
}

۵. انتخاب‌گرهای ترکیبی (Combinators)

این انتخاب‌گرها روابط بین عناصر را تعریف می‌کنند:

انتخاب‌گر فرزند مستقیم (Child Combinator <):

ul > li {
    /* فقط li های مستقیمی که فرزند ul هستند */
    list-style-type: square;
}

انتخاب‌گر فرزند عمومی (Descendant Combinator (فاصله)):

div p {
    /* تمام تگ های p که در داخل هر تگ divی قرار دارند */
    margin-bottom: 10px;
}

انتخاب‌گر برادر مجاور (Adjacent Sibling Combinator +):

h1 + p {
    /* تگ p که بلافاصله بعد از یک h1 آمده است */
    margin-top: 0;
}

انتخاب‌گر برادر عمومی (General Sibling Combinator ~):

h1 ~ p {
    /* تمام تگ های p که بعد از یک h1 در همان سطح آمده اند */
    font-size: 14px;
}

۶. انتخاب‌گرهای شبه کلاس (Pseudo-classes)

برای استایل‌دهی به عناصر در حالت‌های خاص استفاده می‌شوند (مانند حالتی که ماوس روی آن است یا عنصری که بازدید شده است).

مثال:

a:hover {
    /* هنگام نگه داشتن ماوس روی لینک */
    color: red;
    text-decoration: none;
}

a:visited {
    /* لینک هایی که قبلاً بازدید شده اند */
    color: purple;
}

input:focus {
    /* هنگام فوکوس کردن روی فیلد ورودی */
    border: 2px solid blue;
}

li:first-child {
    /* اولین فرزند از نوع خود */
    font-weight: bold;
}

p:nth-child(odd) {
    /* پاراگراف های فرد در بین برادرانشان */
    background-color: #eee;
}

۷. انتخاب‌گرهای شبه عنصر (Pseudo-elements)

برای استایل‌دهی به بخشی از یک عنصر یا اضافه کردن محتوای مجازی استفاده می‌شوند.

مثال:

p::first-line {
    /* استایل فقط برای خط اول پاراگراف */
    font-weight: bold;
}

p::first-letter {
    /* استایل فقط برای حرف اول پاراگراف */
    font-size: 200%;
    float: left;
}

::selection {
    /* متنی که کاربر انتخاب می کند */
    background: orange;
}

مدل جعبه‌ای (The Box Model)

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

محتوا (Content): محتوای واقعی عنصر (متن، تصویر).
پَدینگ (Padding): فضای داخلی بین محتوا و حاشیه.
حاشیه (Border): خطی که پدینگ و محتوا را احاطه کرده است.
حاشیه خارجی (Margin): فضای خالی خارج از حاشیه که عنصر را از عناصر دیگر جدا می‌کند.

ویژگی‌های مدل جعبه‌ای

.box {
    width: 300px; /* عرض محتوا */
    height: 150px; /* ارتفاع محتوا */
    padding: 20px; /* 20px از همه طرف بین محتوا و حاشیه */
    border: 5px solid black; /* حاشیه 5 پیکسلی سالید سیاه */
    margin: 10px 20px 10px 20px; /* بالا، راست، پایین، چپ */
}

نکته مهم: به صورت پیش‌فرض، width و height فقط بر روی ناحیه محتوا اعمال می‌شوند. اگر پدینگ و حاشیه اضافه شود، اندازه کل جعبه بزرگتر
می‌شود.

Box-Sizing

با استفاده از box-sizing می‌توان نحوه محاسبه عرض و ارتفاع را تغییر داد:

box-sizing: content-box; (پیش‌فرض): عرض کل = عرض محتوا + پدینگ + حاشیه.
box-sizing: border-box;: عرض کل = عرض تعریف شده (width). پدینگ و حاشیه از این عرض کسر می‌شوند. این رفتار معمولاً ترجیح داده می‌شود.

مثال:

.my-element {
    width: 200px;
    padding: 10px;
    box-sizing: border-box; /* عرض نهایی 200px خواهد بود */
}

رنگ‌ها و واحدها

تعریف رنگ‌ها

رنگ‌ها را می‌توان به چندین روش تعریف کرد:

نام رنگ:
color: red;
هگزادسیمال (Hex):
color: #FF5733; (ترکیب RGB)
RGB:
color: rgb(255, 87, 51);
RGBA: شامل کانال شفافیت آلفا (0 تا 1):
color: rgba(255, 87, 51, 0.8);
HSL (Hue, Saturation, Lightness):
color: hsl(16, 100%, 60%);

واحدهای اندازه‌گیری

واحدها به دو دسته مطلق و نسبی تقسیم می‌شوند:

واحدهای مطلق:
- px (پیکسل): برای تعریف اندازه‌های دقیق.
- in, cm, mm, pt (نقطه).
واحدهای نسبی:
- %: بر اساس اندازه والد یا اندازه فونت.
- em: بر اساس اندازه فونت عنصر فعلی.
- rem: بر اساس اندازه فونت ریشه (عنصر html).
- vw (Viewport Width): ۱ درصد عرض صفحه نمایش.
- vh (Viewport Height): ۱ درصد ارتفاع صفحه نمایش.

مثال استفاده از واحدها:

html {
    font-size: 16px; /* تعریف پایه rem */
}

h1 {
    font-size: 2.5rem; /* 2.5 * 16px = 40px */
}

.container {
    width: 80%; /* 80 درصد عرض والد */
    padding: 1vw; /* یک درصد عرض صفحه */
}

تایپوگرافی (Typography)

کنترل ظاهر متن یکی از رایج‌ترین کارهای CSS است.

ویژگی‌های فونت

font-family: خانواده فونت (مانند Arial, ‘Times New Roman’, sans-serif).
font-size: اندازه فونت.
font-weight: ضخامت فونت (مثلاً 100 تا 900 یا normal/bold).
font-style: حالت فونت (normal, italic).
text-align: تراز متن (left, right, center, justify).
line-height: فاصله بین خطوط.
text-decoration: تزئینات متن (underline, none, line-through).
text-transform: تغییر حالت حروف (uppercase, lowercase, capitalize).

مثال:

p {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: justify;
    line-height: 1.8;
}

h2 {
    text-transform: uppercase;
}

مدیریت رنگ پس‌زمینه و تصاویر پس‌زمینه

رنگ پس‌زمینه

background-color: رنگ پس‌زمینه عنصر.

تصاویر پس‌زمینه

background-image: تنظیم تصویر پس‌زمینه (استفاده از url()).
background-repeat: نحوه تکرار تصویر (repeat, no-repeat, repeat-x, repeat-y).
background-position: موقعیت شروع تصویر (top, center, 50% 50%).
background-size: اندازه تصویر پس‌زمینه (cover, contain, یا مقادیر پیکسلی/درصدی).
background-attachment: ثابت بودن یا اسکرول شدن تصویر (fixed, scroll).

مثال ترکیب ویژگی‌ها:

.hero {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    height: 500px;
}

CSS Layout: موقعیت‌دهی (Positioning)

نحوه قرارگیری عناصر در صفحه توسط ویژگی
position کنترل می‌شود.

مقادیر position

static (پیش‌فرض): عنصر به طور عادی در جریان سند قرار می‌گیرد. ویژگی‌های top/right/bottom/left تأثیری ندارند.
relative: عنصر در جریان عادی باقی می‌ماند اما می‌توان آن را نسبت به موقعیت اصلی خود با استفاده از
top/right/bottom/left جابجا کرد.
absolute: عنصر از جریان عادی خارج می‌شود و موقعیت آن نسبت به نزدیک‌ترین والد دارای position غیر از
static تعیین می‌شود. اگر والد یافت نشد، نسبت به <html> تعیین می‌شود.
fixed: عنصر از جریان خارج شده و موقعیت آن نسبت به پنجره مرورگر (Viewport) ثابت می‌ماند، حتی هنگام اسکرول کردن.
sticky: ترکیبی از relative و fixed. تا زمانی که عنصر به یک آستانه مشخص (مثلاً 50px از بالا) نرسد، مانند relative رفتار می‌کند و سپس مانند fixed در جای خود می‌ماند.

مثال موقعیت‌دهی مطلق:

.parent {
    position: relative;
    width: 400px;
    height: 200px;
    border: 1px solid black;
}

.child {
    position: absolute;
    top: 10px;
    right: 10px; /* 10 پیکسل از گوشه راست والد فاصله می گیرد */
}

ویژگی های Z-index

برای کنترل ترتیب روی هم قرارگیری (Stacking order) عناصر دارای موقعیت مطلق، نسبی یا ثابت استفاده می‌شود. اعداد بالاتر در جلو قرار می‌گیرند.

مثال:

.layer1 {
    position: absolute;
    z-index: 10;
}

.layer2 {
    position: absolute;
    z-index: 100; /* این لایه روی لایه 1 می آید */
}

ویژگی float

برای شناور کردن عناصر به چپ یا راست و اجازه دادن به محتوای اطراف (مانند متن) برای پیچیدن دور آن استفاده می‌شود.

.image-float {
    float: left;
    margin-right: 15px;
}

نکته مهم: شناور کردن (float) باعث می‌شود عنصر از جریان عادی خارج شود، که ممکن است نیاز به پاکسازی حاشیه (clearing the float) داشته باشد (مثلاً با استفاده از overflow: hidden; یا تگ‌های clearfix).

CSS Layout مدرن: Flexbox

Flexbox (Flexible Box Layout) یک الگوی طرح‌بندی تک‌بعدی است که برای توزیع فضا و هم‌ترازی محتوا در یک ردیف یا ستون بسیار کارآمد است. برای استفاده از Flexbox، والد باید دارای خاصیت display: flex; باشد.

ویژگی‌های کانتینر (والد)

display: flex;
flex-direction: جهت اصلی جریان (row, column, row-reverse, column-reverse).
flex-wrap: نحوه رفتار آیتم‌ها هنگام کمبود فضا (nowrap, wrap).
justify-content: تراز بندی آیتم‌ها در امتداد محور اصلی (main axis).
- مثال: space-between, center, flex-start.
align-items: تراز بندی آیتم‌ها در امتداد محور متقاطع (cross axis).

ویژگی‌های آیتم (فرزندان)

flex-grow: میزان فضایی که آیتم باید اشغال کند در صورت وجود فضای اضافی.
flex-shrink: میزان کوچک شدن آیتم در صورت کمبود فضا.
flex-basis: اندازه اولیه آیتم قبل از توزیع فضای اضافی.
flex: ترکیب سه مورد بالا (مثلاً flex: 1 1 200px;).

مثال Flexbox:

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around; /* فضای مساوی بین آیتم ها */
    align-items: center;
}

.flex-item {
    flex-grow: 1; /* همه آیتم ها فضای باقیمانده را مساوی تقسیم می کنند */
    padding: 15px;
    border: 1px solid #333;
}

CSS Layout مدرن: Grid

CSS Grid یک الگوی طرح‌بندی دو‌بعدی (هم سطر و هم ستون) است که پیچیده‌ترین طرح‌بندی‌ها را به سادگی پیاده‌سازی می‌کند. برای استفاده از Grid، والد باید دارای خاصیت display: grid; باشد.

ویژگی‌های کانتینر Grid

grid-template-columns: تعریف تعداد و عرض ستون‌ها.
- از واحد fr (Fraction Unit) برای توزیع فضاهای باقی‌مانده استفاده می‌شود.
grid-template-rows: تعریف تعداد و ارتفاع سطرها.
gap: فاصله بین سطرها و ستون‌ها.

مثال Grid:

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 2fr; /* ستون اول 200px، ستون دوم 1 واحد، ستون سوم 2 واحد */
    grid-template-rows: auto 150px auto;
    gap: 10px;
}

قرار دادن آیتم‌ها در Grid

می‌توان آیتم‌ها را به صورت خودکار یا با تعیین دقیق موقعیت قرار داد:

grid-column-start / grid-column-end: شروع و پایان یک آیتم در امتداد ستون‌ها.
grid-row-start / grid-row-end: شروع و پایان یک آیتم در امتداد سطرها.

مثال:

.item-spanning {
    grid-column: 1 / span 2; /* شروع در ستون 1 و در امتداد 2 ستون قرار بگیرد */
    grid-row: 1;
}

طراحی واکنش‌گرا (Responsive Design) و Media Queries

طراحی واکنش‌گرا تضمین می‌کند که وب‌سایت شما در هر دستگاهی (از موبایل تا دسکتاپ بزرگ) به خوبی نمایش داده شود. این کار عمدتاً با استفاده از Media Queries انجام می‌شود.

Media Query Syntax

Media Queryها به مرورگر می‌گویند که یک سری قوانین CSS را فقط در صورتی اعمال کند که شرایط خاصی (معمولاً عرض صفحه) برآورده شود.

@media screen and (max-width: 768px) {
    /* استایل‌هایی که فقط برای صفحه نمایش هایی با عرض 768 پیکسل یا کمتر اعمال می شوند */
    .sidebar {
        width: 100%;
        float: none;
    }
    
    h1 {
        font-size: 24px;
    }
}

دسته‌بندی‌های رایج Media Query

max-width: برای دستگاه‌های کوچک‌تر (موبایل اول).
min-width: برای دستگاه‌های بزرگ‌تر (دسکتاپ اول).

مثال برای طراحی موبایل اول:

/* استایل های پیش فرض برای موبایل */
.container {
    padding: 10px;
}

@media screen and (min-width: 1024px) {
    /* استایل های دسکتاپ */
    .container {
        padding: 50px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

Viewport Meta Tag

برای اطمینان از اینکه مرورگر موبایل صفحه را به درستی مقیاس‌بندی کند، باید تگ زیر در بخش head فایل HTML قرار گیرد:

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

انیمیشن‌ها و ترنزیشن‌ها در CSS

CSS3 امکان ایجاد انیمیشن‌های روان را بدون نیاز به جاوااسکریپت فراهم می‌کند.

ترنزیشن‌ها (Transitions)

برای تغییر تدریجی استایل‌ها هنگام وقوع یک رویداد (مانند hover) استفاده می‌شود.

transition-property: ویژگی مورد نظر برای انیمیت شدن (مثلاً background-color).
transition-duration: مدت زمان انیمیشن (مثلاً 0.5s).
transition-timing-function: سرعت انیمیشن (ease, linear, ease-in-out).

مثال:

.button {
    background-color: blue;
    transition: background-color 0.4s ease-in-out;
}

.button:hover {
    background-color: red;
}

انیمیشن‌ها (Animations)

برای ایجاد انیمیشن‌های چند مرحله‌ای پیچیده‌تر، از قوانین @keyframes استفاده می‌شود.

مرحله ۱: تعریف انیمیشن با @keyframes:

@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(0);
    }
}

مرحله ۲: اعمال انیمیشن به عنصر:

.header-title {
    animation-name: slide-in;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* یا یک عدد مشخص */
    animation-direction: alternate; /* پخش به عقب و جلو */
}

نکات پیشرفته CSS

مقیاس پذیری و استفاده از متغیرها (CSS Custom Properties)

استفاده از متغیرها نگهداری کد را بسیار آسان‌تر می‌کند.

تعریف متغیر (در عنصر ریشه html):

:root {
    --main-color: #007bff;
    --spacing-unit: 16px;
}

استفاده از متغیر:

.primary-btn {
    background-color: var(--main-color);
    padding: var(--spacing-unit);
}

اولویت و وراثت (Specificity and Inheritance)

اولویت (Specificity) تعیین می‌کند کدام قانون CSS اعمال شود، زمانی که چندین قانون به یک عنصر اشاره می‌کنند.

ترتیب اولویت (از کم به زیاد):

استایل‌های مرورگر پیش‌فرض (User Agent Styles)
استایل‌های خارجی و داخلی (انتخاب‌گرهای عنصر)
انتخاب‌گرهای کلاس، ویژگی و شبه کلاسها
انتخاب‌گرهای ID
استایل‌های درون‌خطی (Inline Styles)
استایل‌های اعمال شده توسط !important (باید از این ویژگی پرهیز کرد)

فرمول تقریبی برای محاسبه اولویت:
اولویت = (تعداد IDها * ۱۰۰۰) + (تعداد کلاس‌ها و ویژگی‌ها * ۱۰۰) + (تعداد تگ‌ها * ۱۰)

نکات مربوط به وراثت (Inheritance)

برخی ویژگی‌ها (مانند color، font-family، line-height) به صورت خودکار به فرزندان به ارث می‌رسند، در حالی که برخی دیگر (مانند background-color، border) ارث نمی‌برند.

جمع‌بندی

CSS ستون فقرات طراحی وب است. درک عمیق مدل جعبه‌ای، انتخاب‌گرها و تکنیک‌های نوین طرح‌بندی مانند Flexbox و Grid برای ایجاد وب‌سایت‌های مدرن و واکنش‌گرا ضروری است. با تمرین مداوم و استفاده از منابعی مانند مستندات MDN، می‌توانید به تسلط کامل بر این زبان دست یابید و ظاهر وب‌سایت‌های خود را به طور کامل کنترل کنید. به یاد داشته باشید که جداسازی ساختار (HTML) از استایل (CSS) کلید پروژه‌های قابل نگهداری است.