CSS در HTML | تگ CSS | تگ استایل

روش های استفاده از دستورات css در html

۱- روش خطی

در این روش، دستورات css در داخل هر تگ html نوشته می‌شن:

در مثال بالا یک تگ h1 داریم که رنگ قلم اون رو آبی تعیین کردیم. اما اگه دقت کنین می‌بینین که استایل‌ها یا دستورات css داخل خود تگ h1 نوشته شدن. به این روش، روش خطی گفته می‌شه. چون تگ html و دستورات سی اس اس در قالب یک دستور نوشته می‌شن. این روش، توصیه نمی‌شه و می‌شه گفت روش بدیه. چون هم طول فایل اچ تی ام ال رو زیاد می‌کنه هم کدها در هم تنیده‌اند و در بسیاری از مواقع نمی‌تونیم از هم جداشون کنیم.

فرض کنید در یک پروژه بزرگ، که می‌خواین یه سایت بزرگ با تعداد زیادی صفحه طراحی کنین و هر صفحه، هزاران کد و تگ و دستور css داره، چجوری می‌تونین در یک تگ بخصوص، استایل‌ها و دستورات css رو تغییر بدین؟ اصلا فکر نکنم بشه پیداش کرد. بخوام به این روش نمره بدم، نمره‌اش از ۲۰ می‌شه ۲ .در انگلیسی به این روش می‌گن Inline.

۲- روش داخلی

این روش، موضوع بحث امروز ماست. این روش نسبت به روش قبل یکم بهتره. در این روش باید از تگ css یا همان تگ استایل استفاده کنیم. اما تگ استایل چیه؟

تگ style

این تگ داخل تگ head نوشته می‌شه. اگه نمی‌دونین تگ head چیه روش کلیک کنین یکم بخونین، ثواب داره. این تگ عین پدرش (تگ head)، باز و بسته می‌شه و استایل‌ها، داخل تگ آغازی و تگ پایانی نوشته می‌شن. مثال زیر را دریابید:

الان یکم بهتر شد. نه؟ چرا؟ چون دستورات css و html رو از هم جدا کردیم. دیگه لازم نیست دستورات سی اس اس و داخل دستورات اچ تی ام ال بگردیم. اگه به شکل بالا دقت کنین، داخل تگ head یه تگ نوشتیم به اسم style که باز و بسته می‌شه. داخل فضای بین باز و بسته شدن، دستورات و استایل‌هامون رو تایپ کردیم.

به این تگ، تگ استایل یا تگ css هم گفته می‌شه. نمره اینم با یکم پارتی بازی نهایتا می‌شه ۱۰ که نَمونه. در زبان انگلیسی به این روش، Internal گفته می‌شه.

پاورپوینت درباره CSS — هدف و کاربرد آن

کلیک کنید

۳- روش خارجی

این روش بهترین روش ممکنه. در این روش دستورات css و html کامل از هم ایزوله می‌شن. در این متد، فایلی ایجاد می‌کنیم به نام style.css که همه دستورات سی اس اس، داخل اون فایل نوشته می‌شن. برای استفاده از کدهای نوشته شده در فایل style.css در داخل تگ‌های html و اعمال اون‌ها کافیه با تگ link بهشون لینک بدیم. به مثال زیر دقت کنین:

فایل style.css :

فایل index.html :

در زبان انگلیسی به این روش External  گفته می‌شود. حال که هر ۳ روش رو باهم بررسی کردیم، به تگ استایل style اما به صورت تخصصی می‌پردازیم:

تگ استایل یا تگ css

همانگونه که گفتیم تگ style جزو فرزندان تگ هِده. اطلاعاتش هم استایل‌ها و آرایش‌های مربوط به سند یا فایل html جاریه.

خصوصیت‌های تگ style

تگ style کلا ۲ صفت رو می‌تونه بگیره:

صفت type در تگ استایل

هرچند این صفت جزو خصوصیت‌های این تگه اما فقط یک مقدار می‌تونیم بهش بدیم و اون هم text/css هستش. پس اگه این صفت رو ننویسین هم مهم نیست:

<style type="text/css">

  #roman { 
    list-style-type: upper-roman; padding-left: 50px; color: #000080;
  }
  #roman li:before {
    content: "..."; color: #000080; padding-left: 0px; 
  } 

</style>

صفت media در تگ style

این صفت تعیین می‌کنه که استایل‌های داخل این تگ، در کدام نمایشگها اعمال بشه.

نکات مهم درمورد تگ استایل

1. تگ استایل حتما باید داخل تگ head نوشته بشه. بعد از شروع و قبل از پایان. می‌تونیم در هر جایی داخل head قرارش بدیم.
2. باید به صورت تگ باز و تگ بسته نوشته بشه و دستورات css بین تگ‌های آغازی و پایانی نوشته می‌شن.
3. استفاده از این تگ و در نهایت استفاده از استایل دهی داخلی برای اعمال دستورات css در html  کاری غیر حرفه ایست.
4. می‌توان در یک صفحه html از چندین تگ style استفاده کرد، اما توصیه نمی‌شه.
5. هر تگ استایل تنها برای یک صفحه قابل استفاده است. به عبارتی تگ style برای صفحه‌ای اعمال می‌شه که داخل اون نوشته شده. برای یک سایت با ۳ صفحه، باید در داخل هر صفحه یک تگ css نوشت.

پشتیبانی مرورگرها از تگ استایل

همه مرورگرها از این تگ پشتیبانی می‌کنند:

پاورپوینت معرفی زبان HTML — آشنایی با زبان رایج نشانه گذاری

پاورپوینت معرفی زبان HTML — آشنایی با زبان رایج نشانه گذاری

کلیک کنید

نام مرورگر
پشتیبانی می کند؟	بله	بله	بله	بله	بله

استایل یا دستورات css پیش فرض

مرورگرها به صورت پیش فرض، اگه شما انگولکش نکنین، تگ استایل رو با این css نشون می‌دن :

style {
  display: none;
}

در پایان آموزش استفاده از css در html پیشنهاد می‌کنم اگر قصد آموزش کامل html رو دارین، همه مقالات اچ تی ام ال رو در منوی برنامه نویسی از همین سایت، در قسمت بالا مطالعه بفرمایین. جلسه بعد می‌پرسم 🙂

منابع :

https://www.w3schools.com/html/html_css.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style