استایل در HTML
قبلاً میتوانید ساختار صفحه بسازید و با مسیر به فایلهای دیگر اشاره کنید. سؤال بعدی مبتدی این است که ظاهر محتوا را چطور عوض کند: رنگ متن، پسزمینه و اندازه. در تمرین اولیهٔ HTML میتوانید این کار را با ویژگی style انجام دهید. این یک در کوچک به مفاهیم CSS است — برای دمو مفید — در حالی که طراحی کامل سایت بعداً به CSS درست منتقل میشود.
ویژگی style چیست؟
ویژگی style اجازه میدهد اعلانهای CSS را مستقیم روی تگ شروع یک عنصر HTML بگذارید. مرورگر آن اعلانها را میخواند و همان عنصر را مطابقشان رنگ میکند. شما زبان دوم را از صفر اختراع نمیکنید؛ قواعد کوتاه CSS را جایی مینویسید که HTML از قبل فراهم کرده. برای همین استایل درونخطی ابزار آموزشی خوبی است، حتی اگر پروژههای حرفهای همهٔ طراحی را داخل attribute نگه ندارند.
پاسخ مستقیم
ظاهر را با style="property: value;" روی عنصر اضافه کنید. ویژگیهای شروع شامل color (رنگ متن)، background-color (ناحیه پشت محتوا) و font-size (اندازهٔ متن) هستند. کل فهرست را داخل نقلقول بگذارید. چند اعلان را با نقطهویرگول جدا کنید. برای سایت چندصفحهای واقعی، فایل CSS یا بلوک <style> بهتر است تا همان ظاهر را روی هر تگ تکرار نکنید — اما در این درس روی خواندن و نوشتن اعلانهای درونخطی شفاف تمرکز کنید.
ویژگی و مقدار، یکییکی
هر اعلان یک ویژگی (چه چیزی عوض شود) و یک مقدار (چطور دیده شود) دارد. بینشان دونقطه است. بهتر است چند ویژگی را خوب یاد بگیرید تا اینکه فهرست عظیمی حفظ کنید.
یک ویژگی در هر پاراگراف
html<p style="color: blue;">متن آبی</p>
<p style="background-color: lightyellow;">پسزمینه زرد روشن</p>
<p style="font-size: 24px;">متن بزرگتر</p>خواندن مثال
color: blueفقط رنگ متن همان پاراگراف را عوض میکندbackground-color: lightyellowپشت متن را رنگ میکندfont-size: 24pxاندازه را تنظیم میکند؛pxواحد رایج مبتدی است- هر پاراگراف
style="..."خودش را دارد تا سه اثر جدا و قابلدیدن بمانند - رنگهای نامدار مثل
blueبرای تمرین خوباند؛ بعداً مقدارهای hex مثل#336699هم میبینید
اگر در مرورگر هیچ تغییری ندیدید، ذخیره، تازهسازی، و نقلقول دور کل مقدار style را چک کنید.
چند اعلان در یک ویژگی
میتوانید چند اعلان را داخل یک style ترکیب کنید. فهرست را کوتاه نگه دارید تا HTML خوانا بماند. پایان هر اعلان با نقطهویرگول — حتی آخرین — اشکالی ندارد و هنگام ویرایش بعدی واضحتر است.
اعلانهای ترکیبی style
html<p style="color: navy; background-color: #f0f0f0; font-size: 18px;">
متن سرمهای روی پسزمینه خاکستری روشن
</p>چرا این الگو مهم است
- یک عنصر میتواند همزمان رنگ، پسزمینه و اندازه داشته باشد
- نقطهویرگول اعلانها را جدا میکند تا مرورگر هر جفت را بفهمد
#f0f0f0رنگ hex است؛ برای مبتدی اجباری نیست ولی در CSS واقعی رایج است- جملهٔ داخل پاراگراف متن عادی HTML است؛ فقط
styleظاهر را عوض میکند
روز اول ده تصمیم طراحی را در یک attribute نچپانید. اول نحو را با دو سه ویژگی شفاف یاد بگیرید.
style روی عناصر مختلف
ویژگی style فقط برای p نیست. تیتر، span و بسیاری عناصر دیگر همانطور از آن استفاده میکنند. این کمک میکند ببینید استایل دنبال عنصری است که به آن وصل کردهاید — نه یک کلید جادویی سراسری.
تیتر و پاراگراف با style
html<h1 style="color: darkgreen;">یادداشت باغ</h1>
<p style="color: #333333;">متن بدنه با خاکستری تیره.</p>
<p style="background-color: honeydew; font-size: 20px;">نکتهٔ برجسته با پسزمینه سبز ملایم.</p>به چه چیز توجه کنید
- رنگ
h1خودکار پاراگرافها را عوض نمیکند - پاراگراف دوم پسزمینه و اندازه را ترکیب میکند
- استایل درونخطی محلی است: روی همان عنصر اثر میگذارد (و با قواعد عادی CSS میتواند فرزندان را هم تحتتأثیر قرار دهد — فعلاً دمو را ساده نگه دارید)
الان style درونخطی، بعداً CSS
style درونخطی برای آزمایش سریع است. وقتی بیست صفحه همان رنگ تیتر سرمهای را بخواهند و باید بیست attribute را ویرایش کنید دردسر میشود. CSS مشترک — بلوک <style> در head یا فایل .css بیرونی — ظاهر را یکجا نگه میدارد. جلوتر در مسیر یادگیری، CSS جداگانه میآید. در این جلسهٔ HTML کار شما فهم ایدهٔ property:value و نوشتن چند مثال درست درونخطی است، نه اینکه استایل درونخطی را معماری نهایی کل سایت بدانید.
تمرین در ویرایشگر
- صفحهای با یک
h1و سه پاراگراف کوتاه بسازید. - به پاراگراف اول
colorبدهید. - به دومی
background-colorبدهید. - به سومی ترکیب
colorوfont-sizeبدهید. - اختیاری: خود
h1را باstyleجدا رنگ کنید. - ذخیره و تازهسازی کنید. تأیید کنید هر بلوک فرق دارد.
- عمداً یک مثال را خراب کنید (حذف نقلقول یا
px)، تازه کنید، شکست را ببینید، بعد درست کنید.
دیدن یک style شکستخورده نقلقول و واحد را سریعتر از کپی نمونههای بینقص یاد میدهد.
اشتباهاتی که استایل را پنهان میکنند
- فراموش کردن نقلقول دور مقدار:
style=color:redدر نوشتن عادی attribute معتبر نیست - قاطی کردن
color(متن) باbackground-color(پشت متن) و فکر کردن «رنگ هیچ کاری نکرد» - حذف واحد جایی که اندازه لازم دارد (
font-size: 24بهجای24pxدر بسیاری موارد مبتدی) - واژهپردازی که نقلقول صاف را با نقلقول خمیده داخل attribute عوض میکند
- چپاندن طراحی کل صفحه در استایل درونخطی بهجای یادگیری CSS مشترک بعدی
- عوض کردن فایل بدون ذخیره قبل از تازهسازی — مرورگر هنوز نسخهٔ قبلی را نشان میدهد
خلاصه
- ویژگی
styleاعلانهای CSS را به یک عنصر HTML اضافه میکند - بنویسید
property: value;و کل فهرست را داخل نقلقول بگذارید - ویژگیهای شروع:
color،background-color،font-size - چند اعلان را با نقطهویرگول ترکیب کنید؛ دمو را کوتاه و خوانا نگه دارید
- استایل درونخطی برای یادگیری و آزمایش کوچک عالی است، نه نگهداری طراحی کل سایت
- CSS مشترک وقتی یک جا برای کنترل ظاهر میخواهید در مسیر بعدی میآید
- همیشه با ذخیره + تازهسازی چک کنید؛ وقتی استایل «عجب کار نمیکند» نقلقول و واحد را بررسی کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود