CSS در HTML
قبلاً با ویژگی style و مقدارهای رنگ، تغییر ظاهر کوچک را تمرین کردید. سایت واقعی بهندرت همهٔ قواعد طراحی را روی هر تگ نگه میدارد. CSS (Cascading Style Sheets) زبان توصیف ظاهر است. این جلسه روی چگونگی بارگذاری CSS توسط HTML در سه روش رایج تمرکز میکند — نه ساخت سامانهٔ طراحی کامل.
CSS اینجا چه میکند؟
HTML محتوا را ساختاربندی میکند. CSS ظاهر را توصیف میکند: رنگ، فاصله، فونت و ایدههای چیدمان که بعداً عمیقتر میشوند. صفحهٔ HTML میتواند چند اعلان را روی یک عنصر حمل کند، یک stylesheet کوچک داخل سند نگه دارد، یا به فایل جداگانهٔ .css اشاره کند. انتخاب جای درست، دمو را سریع و پروژهٔ واقعی را قابلنگهداری نگه میدارد.
پاسخ مستقیم
برای آزمایش سریع از CSS درونخطی با style="..." روی یک عنصر استفاده کنید. برای تمرین تکصفحهای یک بلوک داخلی <style>...</style>، معمولاً در <head> بگذارید. وقتی صفحات زیاد باید ظاهر مشترک داشته باشند، فایل بیرونی .css را با <link rel="stylesheet" href="styles.css"> وصل کنید. بهمحض اینکه reuse و HTML تمیز مهم شد، CSS بیرونی را ترجیح دهید.
سه روش در یک نگاه
📊 سه روش افزودن CSS
| روش | کجا | بهترین برای |
|---|---|---|
| درونخطی | ویژگی style روی تگ | آزمایش یکبارهٔ خیلی کوچک |
| داخلی | عنصر style در head | دموی تکصفحهای |
| بیرونی | فایل .css + link | استایل مشترک سایت |
CSS درونخطی (یادآوری)
CSS درونخطی روی یک عنصر زندگی میکند. برای آزمایش سیثانیهای عالی است و برای کل وبسایت ضعیف، چون هر ظاهر تکراری باید دوباره کپی شود.
یادآوری CSS درونخطی
html<p style="color: teal;">CSS درونخطی روی یک عنصر</p>درونخطی هنوز کِی کمک میکند
- چک سریع یک رنگ یا اندازه
- آموزش ایدهٔ property:value از جلسات قبل
- override موقت موقع یادگیری — بعد قاعده را به stylesheet ببرید
کل برند چندصفحهای را فقط با attribute درونخطی نسازید. آن مسیر سخت بهروز میشود.
CSS داخلی در head
stylesheet داخلی عنصر <style> است که قواعد CSS همان فایل HTML را نگه میدارد. مبتدی معمولاً آن را در <head> میگذارد تا استایل قبل از محتوای body اعلام شود.
CSS داخلی در head
html<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>خواندن مثال داخلی
- عنصر
styleحاوی CSS است، نه تگهای ساختار صفحه p { color: navy; }یعنی «در این سند همهٔpمتن سرمهای بگیرند»- یک قاعده میتواند چند پاراگراف را بدون تکرار
style="..."استایل دهد - CSS داخلی هنوز در همین یک فایل HTML گیر است — صفحهٔ دیگر آن را نمیبیند مگر بلوک را کپی کنید
CSS بیرونی با link
CSS بیرونی قواعد را در فایلی مثل styles.css نگه میدارد. HTML با عنصر link به آن وصل میشود. این الگوی رایج استایل مشترک سایت است.
لینک stylesheet بیرونی
html<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>برای کار کردن CSS بیرونی چه چیزهایی باید درست باشد
linkبهrel="stylesheet"نیاز دارد تا مرورگر رابطه را بفهمدhrefباید با مسیر درست به فایل واقعی CSS اشاره کند (جلسهٔ File Paths)- داخل
styles.cssقواعدی مثلp { color: navy; }وh1 { color: darkgreen; }مینویسید - اگر مسیر غلط باشد HTML باز میشود — ولی بدون استایل دیده میشود
برای تمرین اول فایل CSS را کنار HTML بگذارید؛ زیرپوشه را وقتی مسیرها محکم شدند امتحان کنید.
انتخاب روش
بپرسید استایل تا کجا باید سفر کند:
- یک آزمایش سریع روی یک عنصر → درونخطی
- یک صفحهٔ تمرین، چند قاعده →
<style>داخلی درhead - صفحات زیاد، یک ظاهر مشترک →
.cssبیرونی +link
وقتی بعداً وارد کورس کامل CSS شوید، stylesheet بیرونی پیشفرض پروژههای واقعی میشود. این جلسهٔ HTML مطمئن میشود بتوانید درست وصلش کنید.
تمرین در ویرایشگر
page.htmlبا یک تیتر و دو پاراگراف بسازید.styles.cssبا یک قاعده برای رنگh1و یکی برای استایلpبسازید.- در
headمربوط به HTML این را بگذارید:<link rel="stylesheet" href="styles.css">. - صفحه را باز کنید. اگر استایل نبود، مسیر و
relرا چک کنید. - موقتاً
styles.cssرا عوض نام دهید یا جابهجا کنید، تازه کنید، شکست را ببینید، بعدhrefرا درست کنید. - اختیاری: یک قاعده را به بلوک داخلی
<style>ببرید و مقایسه کنید.
شکستن عمدی لینک، اشتباه مسیر را سریعتر از فقط خواندن یاد میدهد.
اشتباهاتی که صفحه را بیاستایل میگذارند
- فراموش کردن
rel="stylesheet"رویlink - گذاشتن
styles.cssدر پوشهٔ دیگر ولی لینک طوری که انگار کنار HTML است - پر کردن هر تگ با
styleدرونخطی بهجای یک stylesheet مشترک - انداختن بلوک بزرگ
<style>تهbodyاز روی عادت وقتی برای مبتدیheadروشنتر است - ویرایش فایل CSS ولی تازهسازی HTML دیگری غیر از همان که لینک کردهاید
خلاصه
- CSS ظاهر HTML را میسازد؛ HTML میتواند CSS را درونخطی، داخلی یا بیرونی بار کند
styleدرونخطی برای آزمایش کوچک خوب است، نه کل سایت<style>داخلی درheadبرای تمرین تکفایلی مناسب است.cssبیرونی بهعلاوهٔlink rel="stylesheet"رویکرد رایج مشترک است- مسیر درست فایل بهاندازهٔ خود قواعد CSS مهم است
- روشی را ترجیح دهید که با وسعت reuse استایل جور باشد
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود