فصل ۴ | CSS Basics

روش‌های اضافه کردن CSS به HTML

برای اعمال استایل به یک صفحه‌ی وب، سه روش اصلی وجود دارد که هرکدام کاربرد و مزایای خاص خودشان را دارند. در این درس با این سه روش آشنا می‌شویم: Inline CSS، Internal CSS و External CSS.

روش اول: Inline CSS

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

index.html
<p style="color: purple; font-size: 18px;">این یک متن نمونه است</p>

در این مثال، استایل رنگ و اندازه‌ی فونت فقط برای همین عنصر p تعریف شده است. توجه کنید که در Inline CSS، دستورها داخل کوتیشن نوشته می‌شوند و با علامت ; از هم جدا می‌شوند.

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

با استفاده از Class، می‌توان یک یا چند عنصر خاص را بدون توجه به نوع تگشان انتخاب کرد. برای نوشتن Class Selector در CSS از علامت . قبل از نام کلاس استفاده می‌شود.

نکته: استفاده‌ی زیاد از Inline CSS توصیه نمی‌شود، زیرا مدیریت و به‌روزرسانی کد را در پروژه‌های بزرگ سخت می‌کند.

روش دوم: Internal CSS

در این روش، استایل‌ها داخل تگ <style> و در بخش <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>
    <style>
        h1{
            color: teal;
        }
    </style>
    
</head>

<body>
    <h1>Hello World - سلام دنیا</h1>
</body>
</html>

در این مثال، تمام قوانین CSS داخل تگ <style> نوشته شده‌اند و فقط روی همین صفحه‌ی HTML اعمال می‌شوند.

روش سوم: External CSS

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

style.css
h1 {
    color: black;;
}
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>Hello World - سلام دنیا</h1>
</body>
</html>

در این مثال، تمام استایل‌ها در فایل جدا‌گانه‌ی style.css نوشته شده و با تگ <link> در بخش <head> به فایل index.html متصل شده‌اند.

مزیت اصلی External CSS

استفاده از فایل CSS خارجی چند مزیت مهم دارد:

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