آموزش تگ style در HTML

1 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ style در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ style در HTML به صورت کامل آشنا بشید.

تگ Style در HTML

تگ style یا استایل ، تگی است که در قسمت هد یا Head صفحه قرار میگیرد و با استفاده از آن میتوان دستورات CSS را درون صفحه تعریف کرد.

وقتی زبان HTML رو بطور کامل یاد گرفتی و تموم شد برو سمت CSS و آموزش قدم به قدم زبان CSS رو شروع کن، البته میتونی هردو تاشو باهمدیگه یاد بگیری ولی بهتره اول HTML بعد CSS رو یاد بگیری.

مثال از تگ style در HTML

در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : بکار بردن تگ Style ( برای نوشتن دستورات CSS درون صفحه HTML )

 <head>
  <style> 
body{
    background-color:#f2f2f2;
    text-align:center;
   } 
   h2{
    color:blue;
    background-color:#fff;
    padding:10px;
   } 
   p{
    color:red;
    background-color:#fff;
    padding:10px;
   } 
  </style>
 </head>

مثال شماره ۲ : بکار بردن صفت media ( مثلا میگیم این دستورات CSS برای صفحه پرینت است، یعنی وقتی کاربر اون صفحه رو پرینت زد، اون دستورات CSS هم همراهش اعمال میشه )

 <head>
 <!-- استایل در حالت عادی -->
  <style>
   body{background-color:#1E221E; text-align:center;}
   h2{color:red;}
   p{color:yellow;}
 </style>
<!-- استایل مخصوص صفحه پرینت -->
  <style media="print">
   body{background-color:white;}
   h2{color:blue;}
   p{color:red;}
  </style> 
 </head>

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

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ style در HTML پشتیبانی میکنند یا خیر.

 

جدول پشتیبانی مرورگرها+وردپرس پوش

 

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

جدول صفات تگ style در HTML

در جدول زیر میتوانید صفات را به همراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمود.

 

جدول صفات تگ style+وردپرس پوش

 

پشتیبانی از صفات و رویدادهای عمومی

تگ style از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

  • در یک صفحه تگ style همیشه قبل از تگ body و در بین تگ head باز و تگ head بسته قرار میگیرد.
  • محدودیتی از نظر تعداد در این تگ نداریم از چندین تگ Style بصورت همزمان میتوان درون صفحه استفاده کرد ( همانند مثال شماره ۲ )

دستورات CSS پیش فرض

معمولا مرورگرها تگ style را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

style {
  display: none;
}

شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

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