تگ style در HTML

استایل بندی درون صفحه ای با تگ style

آشنایی با تگ style
آشنایی با تگ style

تگ 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 پیشنهاد می‌کنم ، این مقاله را بررسی کنید.

این مقاله نیز به پایان رسید، مثل همیشه اگر سوال، پیشنهاد یا انتقادی داشتین، منتظرشون خواهم بود و قول میدم که در اولین فرصت بهشون پاسخ بدم. تا مقاله بعدی فعلا…

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

10 نظر

10 پاسخ

  1. با عرض سلام
    نحوه ارجاع به این صفحه به صورتی که در تصویر ضمیمه آمده است صحیح است؟
    عنوان مطلب (آدرس سایت).

    1. سلام
      ظاهرا که درسته ولی باید کدهاش رو هم دید و کلیک کرد تا بهتر نظر داد.

      1. با سلام. من از ظاهر این کد که در تصویر ضمیمه آمده است یاد گرفتم. لینک های متعددی وجود دارند که ازشون یاد می گیرم. چون از سایت شما هم یاد گرفتم دوست داشتم بهتون لینک بدهم و معرفی کنم.
        به همین خاطر سوال کردم که این ارجاع به همین صفحه درست است و مشکلی ندارد؟

        1. سلام
          متوجه شدم. اگر میخوای یک سایتی رو لینک بدی بهتره با تگ a این کار بکنی.
          با این حال کار شما هم مشکلی نداره.
          ممنونم از حضورت.

    1. سلام علی اکبر. تو سوال گفته شده که باید از نتیجه ای که توسط کد حاصل میشه عکس بفرستی و نه خود کد. همچنین کد HTML رو هم بنویس

    1. سلام محمد درسته. ممنون ازت و به زودی جایزه‌ات را دریافت می‌کنی.

  2. سلام چطور می توانم به تگ های html صفحات سایتم در وردپرس به صورت inline استایل دهی کنم ؟
    و یا یک id به تگ ها html سایت در وردپرس اختصاص بدهم
    ؟

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=