آشنایی با CSS

۱. روش اول: CSS درون‌خطی

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

<h1 style="color: red;">عنوان قرمز</h1>

<p style="color: blue; font-size: 20px;">
    این پاراگراف آبی و بزرگ است.
</p>

CSS درون‌خطی: نمونه 01-inline-css

شرح مثال

مقدار ویژگی style یک یا چند اعلان CSS است. اگر چند اعلان بنویسید، بینشان نقطه‌ویرگول می‌گذارید. اینجا خبری از انتخابگر و آکولاد نیست، چون معلوم است استایل تنها برای همین تگ است.

۲. روش دوم: CSS داخلی

در این روش تمام استایل‌ها را یکجا، داخل تگ style در قسمت head می‌نویسیم.

<head>
    <meta charset="UTF-8">
    <title>CSS داخلی</title>

    <style>
        h1 {
            color: darkgreen;
            font-size: 32px;
        }

        p {
            color: gray;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <h1>عنوان اصلی</h1>
    <p>پاراگراف اول</p>
    <p>پاراگراف دوم</p>

</body>

CSS داخلی: نمونه 02-internal-css

شرح مثال

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

به همین ترتیب قانون دوم روی هر دو پاراگراف اعمال می‌شود، بدون اینکه چیزی به خود تگ‌ها اضافه کرده باشیم. همین تغییر ساده مشکل تکرار در روش قبلی را برطرف می‌کند: یک بار می‌نویسیم، همه جا اعمال می‌شود.

۳. انتخابگر کلاس

انتخابگر تگ تمام عنصرهای یک نوع را انتخاب می‌کند. اما اگر بخواهیم تنها بعضی پاراگراف‌ها قرمز باشند چه؟ اینجاست که کلاس به کمک می‌آید.

<style>
    .warning {
        color: red;
        font-size: 18px;
    }

    .success {
        color: green;
    }
</style>

<p>این یک پاراگراف معمولی است.</p>

<p class="warning">این یک هشدار است.</p>

<p class="success">عملیات با موفقیت انجام شد.</p>

<h2 class="warning">این عنوان هم هشدار است.</h2>

انتخابگر کلاس: نمونه 03-class-selector

شرح مثال

• در HTML به تگ یک ویژگی class می‌دهیم و برایش یک نام دلخواه انتخاب می‌کنیم.
• در CSS همان نام را می‌نویسیم و یک نقطه پیش از نام می‌گذاریم، مانند .warning. آن نقطه به معنی «این یک کلاس است» می‌باشد.
• یادتان باشد نقطه تنها در CSS نوشته می‌شود و در HTML نباید آن را بنویسید. این یکی از پرتکرارترین اشتباهات تازه‌کارهاست.

دو نکته مهم دیگر هم وجود دارد: نخست اینکه یک کلاس را می‌شود روی هر تعداد عنصر و حتی روی تگ‌های مختلف گذاشت. در مثال بالا کلاس warning هم روی یک پاراگراف است و هم روی یک عنوان. دوم اینکه یک عنصر می‌تواند چند کلاس داشته باشد؛ کافی است نامشان را با فاصله بنویسید: class="warning big".

۴. انتخابگر آی‌دی

آی‌دی شبیه کلاس است، با یک تفاوت اساسی: هر آی‌دی در کل صفحه تنها یک بار استفاده می‌شود.

<style>
    #main-title {
        color: darkblue;
        font-size: 36px;
    }

    #footer {
        color: gray;
        font-size: 14px;
    }
</style>

<h1 id="main-title">عنوان اصلی سایت</h1>

<p>متن معمولی صفحه</p>

<p id="footer">تمام حقوق محفوظ است.</p>

انتخابگر آی‌دی: نمونه 04-id-selector

شرح مثال

در CSS به جای نقطه، از علامت # استفاده می‌کنیم. بقیه چیزها مانند کلاس است.

۵. روش سوم: CSS خارجی

این همان روشی است که معمولاً در پروژه‌های حرفه‌ای استفاده می‌شود و از این پس روش ما هم همین است. استایل‌ها را در یک فایل جداگانه با پسوند css. می‌نویسیم.

<!-- فایل index.html -->
<head>
    <meta charset="UTF-8">
    <title>CSS خارجی</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>عنوان صفحه</h1>
    <p class="intro">متن معرفی</p>
</body>

/* فایل style.css */

h1 {
    color: #2f4f4f;
    font-size: 32px;
}

.intro {
    color: #666666;
    font-size: 18px;
}

CSS خارجی: نمونه 05-external-css، دو فایل جداگانه

شرح مثال

• تگ link داخل head فایل CSS را به صفحه وصل می‌کند. rel="stylesheet" یعنی «نوع این فایل، برگه استایل است» و href مسیر فایل است، دقیقاً با همان قوانین مسیر که در فصل دوم دیدیم.
• در فایل CSS دیگر تگ style نمی‌نویسیم. کل فایل، CSS است.
• توضیح در CSS شکل دیگری دارد: بین /* و */. علامت توضیح HTML در فایل CSS کار نمی‌کند.

وقتی چند استایل با یکدیگر تداخل پیدا می‌کنند

اگر یک عنصر از چند جا استایل بگیرد، کدام قانون اولویت دارد؟ قوانین به ترتیب زیر اولویت دارند:

1. CSS درون‌خطی بالاترین اولویت را دارد.
2. آی‌دی قوی‌تر از کلاس است.
3. کلاس قوی‌تر از انتخابگر تگ است.
4. اگر دو قانون قدرت یکسانی داشته باشند، آن که پایین‌تر نوشته شده برنده است.

همین قانون آخر دلیل این است که در فصل پانزدهم گفتیم فایل استایل خودمان باید بعد از فایل کتابخانه آماده نوشته شود.

۶. رنگ و پس‌زمینه

در CSS می‌توان رنگ را به سه روش نوشت. هر سه روش در نهایت همان نتیجه را ایجاد می‌کنند.

body {
    background-color: #f5f5f5;
}

h1 {
    color: darkgreen;                    /* نام انگلیسی رنگ */
}

h2 {
    color: #2f4f4f;                      /* کد شانزده‌شانزدهی */
}

p {
    color: rgb(100, 100, 100);           /* ترکیب قرمز، سبز، آبی */
}

.highlight {
    background-color: yellow;
    color: black;
}

رنگ و پس‌زمینه: نمونه 06-color-and-background

شرح مثال

دو ویژگی اصلی وجود دارد که به‌راحتی ممکن است با هم اشتباه شوند:

• color رنگ خود متن را تعیین می‌کند.
• background-color رنگ پس‌زمینه عنصر را.

رنگ‌ها را هم می‌توان به سه شکل نوشت:

1. نام رنگ. حدود صد و چهل نام انگلیسی مانند red و tomato از قبل تعریف شده‌اند. ساده است اما انتخاب محدودی دارد.
2. کد شانزده‌شانزدهی. یک علامت # و شش رقم. دو رقم اول مقدار قرمز، دو رقم بعد سبز و دو رقم آخر آبی است. هر جفت از 00 تا ff تغییر می‌کند. پس ff0000# قرمز کامل است و 000000# سیاه.
3. rgb. همان سه عدد، اما این بار از صفر تا ۲۵۵ و به صورت خوانا.

۷. ترازبندی و اندازه قلم

دو ویژگی پرکاربرد دیگر که با آنها متن را مرتب می‌کنیم.

h1 {
    text-align: center;
    font-size: 36px;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.justify {
    text-align: justify;
}

.small-note {
    font-size: 12px;
    color: gray;
}

ترازبندی و اندازه قلم: نمونه 07-text-align-and-font-size

شرح مثال

text-align جای قرار گرفتن متن در عرض عنصر را مشخص می‌کند:

font-size اندازه حروف است. رایج‌ترین واحدش فعلاً پیکسل است. اندازه پیش‌فرض متن در مرورگرها شانزده پیکسل است. در فصل دوازدهم واحدهای بهتری هم یاد می‌گیریم.

۸. نمونه نهایی فصل

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

<!-- 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 id="main-title">کارگاه طراحی وب</h1>

    <p class="intro">
        در این کارگاه ساخت صفحه‌های وب را از پایه یاد می‌گیریم.
    </p>

    <h2>سرفصل‌ها</h2>
    <ul>
        <li>آشنایی با HTML</li>
        <li class="done">آشنایی با CSS</li>
        <li>چیدمان صفحه</li>
    </ul>

    <p class="note-box">
        ثبت‌نام تا پایان همین هفته ادامه دارد.
    </p>

    <p id="footer">مؤسسه فنی و آموزشی کادوس</p>

</body>
</html>

/* style.css */

body {
    background-color: #f5f5f5;
    color: #333333;
    text-align: right;
}

#main-title {
    color: #2f4f4f;
    font-size: 34px;
    text-align: center;
}

h2 {
    color: #2f4f4f;
    font-size: 22px;
}

.intro {
    font-size: 18px;
    color: #555555;
    text-align: justify;
}

.done {
    color: green;
}

.note-box {
    background-color: #fff3cd;
    color: #7a5b00;
    font-size: 15px;
}

#footer {
    text-align: center;
    color: gray;
    font-size: 13px;
}

نمونه نهایی فصل: نمونه 08-final-example

شرح مثال

در فایل CSS پنج نوع انتخابگر مختلف داریم و هر کدام کار متفاوتی می‌کند:

• body استایل پایه کل صفحه را می‌دهد. رنگ متن و راست‌چینی که اینجا تعریف شده، به همه عنصرهای داخل بدنه هم می‌رسد. به این رفتار ارث‌بری می‌گویند.
• h2 انتخابگر تگ است و روی همه عنوان‌های سطح دو اعمال می‌شود.
• main-title# و footer# آی‌دی هستند و هر کدام تنها یک عنصر یکتا را هدف می‌گیرند.
• intro. و done. و note-box. کلاس هستند و می‌شود آنها را هر جای دیگری از سایت هم بار دیگر استفاده کرد.

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

خلاصه فصل