این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ style در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ style در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Style در HTML
تگ style یا استایل ، تگی است که در قسمت هد یا Head صفحه قرار میگیرد و با استفاده از آن میتوان دستورات CSS را درون صفحه تعریف کرد.
وقتی زبان HTML رو بطور کامل یاد گرفتی پیشنهاد میکنم آموزش قدم به قدم زبان CSS رو شروع کن، یاهم میتونی هردوتاشو باهمدیگه یاد بگیری ولی بهتره اول HTML بعد CSS
Free-Learn
مثال از تگ style در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ Style ( برای نوشتن دستورات CSS درون صفحه HTML )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 روش اعمال میشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ style در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ style در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| media | media_query | مشخص میکند که استایل برای چه نوع رسانه ای می باشد ( مثه مثال شماره ۲ که گفتیم برای صفحه پرینت باشه ) |
| type | text/css | نوع محتوای داخل تگ style را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ style از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- در یک صفحه تگ
styleهمیشه در بین تگ head و تگ head نیز قبل از تگ body قرار میگیرد. - از چندین تگ Style بصورت همزمان میتوان درون صفحه استفاده کرد ( همانند مثال شماره ۲ )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ style را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
style { display: none; } |
