آموزش جامع CSS

🎯 اهداف یادگیری

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

📌 CSS چیست؟

CSS (Cascading Style Sheets) زبانی برای استایل‌دهی به صفحات وب است که ظاهر و چیدمان عناصر HTML را تعیین می‌کند:

css

            body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

            

مزایای استفاده از CSS:

جداسازی محتوا از ظاهر: تغییرات طراحی بدون تغییر ساختار HTML
صرفه‌جویی در زمان: استایل‌دهی یکپارچه به چندین صفحه
انعطاف‌پذیری بیشتر: طراحی واکنش‌گرا برای دستگاه‌های مختلف

📌 ساختار پایه CSS

هر قانون CSS از سه بخش اصلی تشکیل شده است:

css

            selector {
    property: value;
}

اجزای تشکیل‌دهنده:

سلکتور (Selector): عنصر HTML مورد نظر برای استایل‌دهی
ویژگی (Property): مشخصه‌ای که می‌خواهید تغییر دهید (مانند رنگ، فونت و...)
مقدار (Value): مقدار مورد نظر برای ویژگی تعیین شده

📌 روش‌های اعمال CSS

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

۱. CSS داخلی (Inline)

html

            <h1 style="color: blue; text-align: center;">عنوان صفحهh1>

۲. CSS داخلی (Internal)

html

            <head>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
    style>
head>

            

۳. CSS خارجی (External)

html

            <head>
    <link rel="stylesheet" href="styles.css">
head>

css

            h1 {
    color: blue;
    text-align: center;
}

            

مقایسه روش‌ها:

روش	مزایا	معایب
Inline	اولویت بالا، تغییر سریع	عدم امکان استفاده مجدد، شلوغی کد
Internal	مدیریت آسان برای صفحات تکی	عدم امکان استفاده در چند صفحه
External	استفاده مجدد، مدیریت متمرکز	نیاز به بارگذاری فایل اضافی

📌 سلکتورهای پایه CSS

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

۱. سلکتور عنصر (Element Selector)

css

            p {
    color: red;
}

۲. سلکتور کلاس (Class Selector)

css

            .highlight {
    background-color: yellow;
}

۳. سلکتور ID (ID Selector)

css

            #header {
    font-size: 24px;
}

۴. سلکتور جهانی (Universal Selector)

css

            * {
    margin: 0;
    padding: 0;
}

            

۵. سلکتور گروهی (Grouping Selector)

css

            h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

اولویت سلکتورها (Specificity):

Inline styles (بالاترین اولویت)
IDs
Classes, attributes و pseudo-classes
Elements و pseudo-elements (کمترین اولویت)

📌 کامنت‌نویسی در CSS

کامنت‌ها در CSS با /* شروع و با */ پایان می‌یابند:

css

            /* این یک کامنت تک‌خطی است */
/*
 * این یک کامنت چندخطی است
 * که برای توضیحات طولانی استفاده می‌شود
 */
.btn {
    padding: 10px 20px; /* فاصله داخلی دکمه */
}

            

نکات کامنت‌نویسی:

برای بخش‌های مهم کد کامنت بنویسید
از کامنت‌های واضح و مختصر استفاده کنید
کامنت‌ها را به‌روز نگه دارید
از کامنت‌گذاری بیش از حد خودداری کنید

📌 تمرین عملی

فایل CSS زیر را با رعایت اصول صحیح تکمیل کنید:

css

            /* استایل‌های کلی صفحه */
/* استایل‌های هدر */
/* استایل‌های منوی ناوبری */
/* استایل‌های فوتر */

            

راهنمای تمرین:

برای هر بخش کامنت مناسب قرار دهید
از سلکتورهای مناسب استفاده کنید
ویژگی‌های زیر را اعمال کنید:
- رنگ پس‌زمینه body: #f8f9fa
- رنگ متن پیش‌فرض: #333
- فونت پیش‌فرض: Arial, sans-serif

📌 قدم بعدی

در درس بعدی با رنگ‌ها و پس‌زمینه‌ها در CSS آشنا خواهیم شد!

❮ خانه بعدی ❯