سبک (style)
«تگ style» برای تعریف «شیوه نامه (Style Sheet)» است. یعنی می گویی هر عنصر چطور دیده شود. این یعنی ظاهر را با CSS کنترل می کنیم، نه محتوا. تمرکز ما روی «ظاهر (Presentation)» است، نه «معنا (Semantics)».
تعریف و کاربرد تگ style
تگ <style> قوانین CSS را داخل صفحه می گذارد. این تگ باید داخل بخش <head> باشد. سپس مرورگر بر اساس این قوانین، عناصر را رنگ آمیزی و چیدمان می کند.
نمونه ساده با تگ style
<html>
<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
قانون آخر مهم است (تداخل قوانین)
اگر چند تگ style پشت سرهم باشند، قانونِ آخر می بُرد. یعنی رنگ نهایی از آخرین سبک خوانده شده می آید.
<html>
<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
<style>
h1 { color: green; }
p { color: pink; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ویژگی ها (Attributes) در تگ style
media: رسانه هدف را تعیین می کند؛ مثل چاپ.type: نوع محتوا؛ معمولاًtext/css.
نکته: برای فایل CSS بیرونی از تگ link کمک بگیر.
تنظیم پیش فرض CSS برای style
مرورگرها خود تگ <style> را نمایش نمی دهند.
style {
display: none;
}
تمرین مرحله ای تگ style
- یک فایل HTML بساز.
- داخل
<head>تگ style بگذار. - برای h1 و p رنگ تعیین کن.
- صفحه را باز کن و نتیجه را ببین.
لینک های مفید
بیشتر بخوان: تگ head، تگ link، و همچنین خود تگ style.
جمع بندی سریع
- تگ style قوانین CSS را نگه می دارد.
- باید داخل head قرار بگیرد.
- قانون آخر، نتیجه را تعیین می کند.
- برای فایل بیرونی از link استفاده کن.