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

css در html تگ css تگ استایل

چگونه می توان از دستورات css در html استفاده کرد؟ تگ css یا تگ استایل چه کاربردی دارد؟ روش داخلی استفاده از css در html چگونه است؟

دستورات css نوشته میشن که در کدهای html اعمال بشن. درواقع دستورات css به تنهایی هیچ صفحه ای رو ایجاد نمی کنن، بلکه نقش آرایشگر رو برای صفحات html بازی می کنن. در فیلم آموزش html به صورت کامل و کاربردی انواع روش ها رو توضیح دادیم اما در این مقاله هم می خواهیم هر 3 روش رو شرح بدیم:

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

1- روش خطی

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

css در html تگ css تگ استایل

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

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

2- روش داخلی

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

تگ style

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

css در html تگ css تگ استایل

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

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

3- روش خارجی

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

فایل style.css :

css در html تگ css تگ استایل

فایل index.html :

css در html تگ css تگ استایل

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

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

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

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

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

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

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

صفت media در تگ style

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

<“style media=”value>

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

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

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

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

نام مرورگرپشتیبانی گوگل کروم از تگ css تگ استایل css در htmlپشتیبانی muzila از تگ css تگ استایل css در htmlحمایت safari از تگ css تگ استایل css در htmlپشتیبانی Opera از تگ css تگ استایل css در htmlپشتیبانی explorer از تگ css تگ استایل css در html
پشتیبانی می کند؟بلهبلهبلهبلهبله

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

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

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

منابع :

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

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

 

مطالب زیر را حتما بخوانید

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.