خانه / دوره آموزش مقدماتی CSS / قسمت چهارم آموزش CSS – CSS در HEAD صفحه

قسمت چهارم آموزش CSS – CSS در HEAD صفحه

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

&lt;head&gt;<br />
 &lt;style&gt;<br />
 &lt;!--<br />
 span { color:red; font-style:italic }<br />
 --&gt;<br />
 &lt;/style&gt;<br />
 &lt;/head&gt;

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید :

&lt;/pre&gt;<br />
&lt;div id=&quot;d2&quot;&gt;span { color:red; font-style:italic }&lt;/div&gt;<br />
&lt;pre&gt;

این خط مشخص می کند که هر بار که در صفحه از تگهای <STYLE> <STYLE/> استفاده می شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول ( ” ” ) که در متن HTML استفاده می شود از آکولاد ( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند.

وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود.

برای مثال کد زیر را وارد متن HTML خود می کنیم :

&lt;span&gt;این متن قرمز و ایتالیک است،&lt;/span&gt; اما این متن خارج تگ &amp;lt;span&amp;gt; است و مشخصات آنرا ندارد.&lt;br&gt;<br />
 &lt;span&gt;این متن نیز قرمز و ایتالیک است.&lt;/span&gt;

نتیجه را به صورت زیر مشاهده خواهید کرد :

این متن قرمز و ایتالیک است، اما این متن خارج تگ <span> است و مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.

با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام می دهیم که به آن خواهیم پرداخت.

نقد و بررسی

User Rating: ۴٫۴۶ ( ۲ votes)

درباره ی آریـان پــور

سلام . آریــان پور هستم . از نویسندگان میکروپـدیا .. علاقه مــند به برنامه نویسی و طراحی وب و شبکه ! دیدگاه ها و نظرات شما دوستان بررسی میشه و باعث دلگرمـی برای نوشتن مطالب بهتر و به روزتر . در تماس باشید با : aryanpour [at] micropedia [dot] ir با مـا همراه باشید ..

همچنین ببینید

قسمت یازدهم آموزش CSS – کار با متن ها ۲

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می …

۲۳ دیدگاه ها

  1. با سلام و سپاس بسیار عالی بود دوستان موفق باشید

  2. با سلام و سپاس بسیار عالی بود

  3. مثل همیشه عالی و خوب.
    ممنون

  4. مطلب خیلی جالبی بود. ممنون

  5. عالی بود
    ممنون بابت آموزش عالیتون
    سپاس

  6. پرینتر سه بعدی

    عالی

    اگه امکانش هست در باره meta tag ها و کاربردشون برامون به تفصیل توضیح بدید

    تشکر

  7. با سلام و تشکر از سایت فوق العاده شما.سایت شمارو به همه دوستان معرفی کردم.

  8. طراحی سایت املاک

    کمال تشکر را دارم بابت سایت خوبتون
    موفق باشید

  9. ممنون از آموزش های گام به گام و کاربردیتون

  10. ممنون از مقاله مفیدتون!

  11. سلام .
    برای انتشار مطالب مفید و آموزش های خوب تون از شما متشکرم .
    موفق باشید .

  12. ماشین های اداری

    سایت خیلی خوبی دارید

  13. خرید و فروش خودرو

    مثل همیشه خوب بود ممنون

  14. عالی بود مرسی از سایت خوبتون

  15. قیمت روز گوشی موبایل

    تشکر از آموزش csss

  16. از سایت بسیار خوبتون ممنونم موفق باشید

  17. با سلام و سپاس بسیار عالیب ود موفق باشید

  18. با سلام و سپاس بسیار عالی بود دوستان موفق باشید

  19. با سلام. خسته نباشید عرض می کنم و کمال تشکر را از شما دارم

  20. سایت خیلی خوبی دارین موفق باشین

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

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

پاسخ عبارت زیر را وارد کنید: *