در حال بارگذاری...

روش‌های افزودن CSS

ممکن است قانون‌های CSS را بی‌نقص نوشته باشید و باز هم هیچ تغییری روی صفحه نبینید؛ دلیلش ساده است: مرورگر اصلاً آن‌ها را بارگذاری نکرده. در این جلسه سه روش رایج برای وصل کردن CSS به HTML را می‌بینید و اینکه کدام را باید پیش‌فرض خودتان کنید.

چطور CSS را به صفحهٔ HTML اضافه کنیم؟

سه راه دارید: یک stylesheet خارجی که از داخل head به آن لینک می‌دهید، یک بلوک داخلی <style> در head، یا ویژگی درون‌خطی style روی یک عنصر. برای سایت واقعی و پروژه‌های چندصفحه‌ای، با یک فایل .css جدا شروع کنید.

نگاهی سریع به سه روش

پیش از شروع به کدنویسی، با این جدول روش مناسب را انتخاب کنید. در بخش‌های بعد برای هر کدام یک مثال کوتاه می‌بینید.

📊 روش‌های افزودن CSS

روش کجا قرار می‌گیرد استفاده در چند صفحه بهترین کاربرد
stylesheet خارجی فایل جدا با پسوند .css و یک <link> در head عالی انتخاب پیش‌فرض برای پروژه‌ها و همین کورس
CSS داخلی <style> … </style> در head همان صفحه فقط همان یک صفحه دموی سریع و تمرین تک‌فایلی
CSS درون‌خطی style="…" روی یک عنصر HTML ندارد اصلاح موقتی و یک‌باره (کم استفاده کنید)

stylesheet خارجی (انتخاب پیش‌فرض)

HTML و CSS را در دو فایل جدا نگه دارید. داخل head با عنصر link به stylesheet اشاره کنید؛ مرورگر فایل CSS را می‌گیرد و قانون‌هایش را اعمال می‌کند.

لینک کردن stylesheet خارجی

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

قانون‌ها را در فایل styles.css کنار فایل HTML بنویسید (اگر فایل در زیرپوشه است، href را با مسیر درست عوض کنید):

فایل styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

چرا برای کار واقعی روش خارجی بهتر است

  • یک stylesheet می‌تواند ظاهر چندین صفحهٔ HTML را تعیین کند
  • برای تغییر ظاهر لازم نیست لابه‌لای تگ‌ها دنبال استایل بگردید
  • مرورگر می‌تواند فایل .css را cache کند و بین صفحه‌ها دوباره نگیرد
  • rel="stylesheet" و href درست را فراموش نکنید؛ یک اشتباه کوچک در مسیر باعث می‌شود صفحه بدون هیچ پیام خطایی بی‌استایل بماند

CSS داخلی (بلوک <style> در head)

برای یک صفحهٔ تمرینی می‌توانید قانون‌ها را داخل عنصر <style> در head بنویسید. در جلسه‌های مقدمه و Syntax هم از همین الگو استفاده کردیم تا HTML و CSS در یک فایل بمانند.

بلوک style داخلی

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

چه موقع CSS داخلی مشکلی ندارد

برای دمو یا تکلیفی که باید در یک فایل تحویل شود، CSS داخلی انتخاب درستی است. اما با بزرگ‌تر شدن پروژه جواب نمی‌دهد: اگر همان بلوک <style> را در همهٔ صفحه‌ها کپی کنید، نسخه‌ها کم‌کم با هم فرق پیدا می‌کنند و هر تغییر کوچک باید چندجا انجام شود. به‌محض اینکه بیش از یک صفحه دارید، یا می‌خواهید کدها مرتب‌تر باشند، به stylesheet خارجی بروید.

CSS درون‌خطی (ویژگی style)

در روش درون‌خطی، declarationها را مستقیم با ویژگی style روی خود عنصر می‌نویسید. سلکتور و فایل جدایی در کار نیست و فقط همان یک عنصر استایل می‌گیرد.

ویژگی style درون‌خطی

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

کم استفاده کنید

استایل درون‌خطی برای یک بررسی سریع و موقت راحت است، ولی ظاهر را به داخل ساختار صفحه می‌کشاند، دوباره‌استفاده‌کردنش سخت است و وقتی بحث cascade و specificity پیش بیاید، بازنویسی (override) کردنش هم دردسر دارد. ترجیح بدهید از class در stylesheet استفاده کنید. قانون‌های تعارض در cascade را در جلسه‌های بعد می‌بینید؛ فعلاً درون‌خطی را استثنا بدانید، نه عادت.

کدام روش را انتخاب کنیم؟

  • ساختن سایت یا پروژه‌های این کورس: stylesheet خارجی
  • یک فایل دموی کوتاه در کلاس: <style> داخلی قابل قبول است
  • تغییر یک عنصر برای چند ثانیه هنگام دیباگ: درون‌خطی کمک می‌کند — بعد قانون را به stylesheet منتقل کنید
    استفادهٔ هم‌زمان از چند روش مجاز است. وقتی یک property از چند جا مقدار بگیرد، مرورگر طبق قانون‌های cascade تصمیم می‌گیرد (بعداً توضیح داده می‌شود). عادت خوبی که می‌توانید داشته باشید: استایل‌های ثابت را در فایل خارجی نگه دارید و یک property را در هر سه روش پخش نکنید.

خودتان امتحان کنید

  1. فایل‌های howto.html و styles.css را در یک پوشه بسازید.
  2. در howto.html یک head با <link rel="stylesheet" href="styles.css"> بگذارید و در body این تیتر را بنویسید: <h1 class="hero">How-to practice</h1>.
  3. در styles.css این قانون را بنویسید: .hero { color: #0f766e; }. بعد فایل HTML را در مرورگر باز کنید.
  4. رنگ را به #1d4ed8 تغییر دهید، فایل CSS را ذخیره کنید و صفحه را تازه کنید؛ رنگ تیتر باید عوض شود.
  5. موقتاً style="color: #b45309;" را روی h1 اضافه کنید و صفحه را تازه کنید. بعد ویژگی را پاک کنید تا دوباره stylesheet کنترل رنگ را به دست بگیرد.

اشتباهات رایج

  • از سر عادت گذاشتن <link rel="stylesheet" …> در body — جایش head است، کنار بقیهٔ اطلاعات سند
  • غلط تایپی در href (مثلاً style.css به‌جای styles.css) که باعث می‌شود فایل هرگز بارگذاری نشود و صفحه بی‌استایل بماند
  • جا انداختن rel="stylesheet" در عنصر link
  • چسباندن یک بلوک کامل <style> در تک‌تک صفحه‌ها به‌جای استفاده از یک فایل خارجی مشترک
  • تکیه بر style درون‌خطی برای همهٔ رنگ‌ها و فونت‌ها — HTML شلوغ می‌شود و نگه‌داری‌اش سخت

خلاصه

  • سه روش داریم: stylesheet خارجی، <style> داخلی و ویژگی درون‌خطی style
  • روش پیش‌فرض برای صفحه‌های واقعی: فایل خارجی با <link rel="stylesheet" href="…"> در head
  • CSS داخلی به درد تمرین تک‌فایلی می‌خورد و درون‌خطی فقط برای اصلاح‌های یک‌باره و نادر
  • غلط در مسیر یا جا افتادن rel از دلایل رایج «بی‌اثر بودن» استایل‌هاست
  • تمرین کنید: یک فایل .css واقعی را لینک کنید، یک مقدار را عوض کنید و صفحه را تازه کنید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Css آموزش