تگ style چیست؟ چگونه در صفحات html استایل بندی کنیم؟ در این مقاله به صورت کامل با تگ style که کاملا مربوط به CSS میشود آشنا میشویم.
تگ Style
تگ <style>
برای تعیین اطلاعات استایل در یک سند HTML مورد استفاده قرار می گیرد. در داخل این تگ شما تعیین می کنید عناصر HTML چگونه و با چه استایلی در مرورگر نمایش داده شود. به طور کلی استفاده از تگ style زمانی است که میخواهیم به صورت داخلی کدهای css خود را در صفحات html معرفی کنیم.
هر سند HTML می تواند حاوی چندین تگ style
باشد.
مثال
در مثال زیر ما تگ <style> را درون تگ head قرار داده ایم که یک نمونه از استفاده از این تگ میباشد. با اینحال شما میتوانید از این تگ در بخش body صفحه خود نیز استفاده کنید.
<html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>A heading</h1> <p>A paragraph.</p> </body> </html>
میبینید که در مثال بالا تگ h1 به رنگ قرمز و تگ p رنگ آبی در آمده است و همانطور که گفتیم، این بخش با کد های CSS تکمیل میشود، برای یادگیری CSS پیشنهاد میکنم که مقالات آموزش CSS ما در میزفا را بخوانید.
خاصیت های تگ style
در جدول زیر خاصیت های اختصاصی تگ style را میبینید.
خاصیت | مقدار | توضیحات |
Media | کوئری مدیا | تعیین کننده نوع دستگاه یا رسانه ای که منبع رسانه ای برای بهینه سازی مورد استفاده قرار می گیرد |
Type | Text/css | تعیین کننده نوع رسانه تگ <style> |
این تگ با توجه به اینکه به صورت پنهان از دید کاربران است نیازی به استفاده از خاصیت های عمومی ندارد، با اینحال از خاصیت های عمومی و رویدادی (Event) پشتیبانی میکند. (البته بازم میگم طبق کاربرد این تگ اصلا نیازی به بیشتر خاصیت های عمومی و رویدادی ندارید ولی با این حال پشتیبانی میکنند دیگه… باز اگر به عنوان یک متخصص دارید لطف میکنین و مقاله من رو میخونید، اگر من اشتباه میکنم بگید که اصلاحش کنیم …)
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
ابتدا یک پاراگراف ایجاد کنید و نام و تاریخ امروز را درون آن بنویسید. سپس یک تگ style ایجاد کنید و درون آن کد های زیر را قرار دهید و نتیجه را به صورت تصویر عکس بگیرید و ارسال کنید.
p{
color: blue;
font-size: 45px;
font-style:italic;
}
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
توضیحاتی اولیه در رابطه با تگ style در این مقاله خواندیم و با آن آشنا شدیم. نوید معدن نژاد عزیز ، در آموزش های CSS خودش یک مقاله کامل در رابطه اتصال داخلی کدهای CSS نوشته است که از نظر پیاده سازی و مزایا و معایب این نوع اتصال را بررسی کرده است، با توجه به استفاده از تگ style برای اتصال داخلی کدهای CSS پیشنهاد میکنم ، این مقاله را بررسی کنید.
این مقاله نیز به پایان رسید، مثل همیشه اگر سوال، پیشنهاد یا انتقادی داشتین، منتظرشون خواهم بود و قول میدم که در اولین فرصت بهشون پاسخ بدم. تا مقاله بعدی فعلا…
10 پاسخ
با عرض سلام
نحوه ارجاع به این صفحه به صورتی که در تصویر ضمیمه آمده است صحیح است؟
عنوان مطلب (آدرس سایت).
سلام
ظاهرا که درسته ولی باید کدهاش رو هم دید و کلیک کرد تا بهتر نظر داد.
با سلام. من از ظاهر این کد که در تصویر ضمیمه آمده است یاد گرفتم. لینک های متعددی وجود دارند که ازشون یاد می گیرم. چون از سایت شما هم یاد گرفتم دوست داشتم بهتون لینک بدهم و معرفی کنم.
به همین خاطر سوال کردم که این ارجاع به همین صفحه درست است و مشکلی ندارد؟
سلام
متوجه شدم. اگر میخوای یک سایتی رو لینک بدی بهتره با تگ a این کار بکنی.
با این حال کار شما هم مشکلی نداره.
ممنونم از حضورت.
جواب
سلام علی اکبر. تو سوال گفته شده که باید از نتیجه ای که توسط کد حاصل میشه عکس بفرستی و نه خود کد. همچنین کد HTML رو هم بنویس
پاسخ سوال :
سلام محمد درسته. ممنون ازت و به زودی جایزهات را دریافت میکنی.
سلام چطور می توانم به تگ های html صفحات سایتم در وردپرس به صورت inline استایل دهی کنم ؟
و یا یک id به تگ ها html سایت در وردپرس اختصاص بدهم
؟
سلام
باید php بلد باشید.