چگونه از css استفاده کنیم ؟

چگونه از css استفاده کنیم ؟

به 3 روش می توانید دستورات css را بر روی اسناد html خود اعمال کنید :

1 – استایل شیت های خارجی (External Style Sheet)

2 – استایل شیت های داخلی (Internal Style Sheet) :

3- استایل شیت در جا (Inline)

 

1 – خارجی (External Style Sheet) :

در این روش تمامی دستورات css را درون فایل هایی جداگانه نوشته و با پسوند .css دخیره می کنید و هرکجا که نیاز به اعمال دستورات مورد نظر داشته باشد باید فایل css مورد نظر را به صفحه html الحاق کنید .

اتصال فایل های css به اسناد html

<link rel="stylesheet" type="text/css" href="mystyles.css”>

دلیل برگه خواندن css همین است می توانیم یک برگه از سبک ها داشته باشم .

 

دستور بالا را که الحاق فایل css مربوطه سند html است می توانید در هر جایی از سند html بنویسید ،ولی بهتر است در داخل تگ head قرار دهید که زود لود شود و خصوصیات مورد نظر رو بر روی عناصر اعمال کنید .

حدالمکان سعی کنید css های خود را به این روش بنویسید یعنی به صورت خارجی زیرا از نظر سئو خیلی مهم می باشد .برای آشنایی بیشتر به  مراجعه نمایید .

 

آدرس فایل css مورد نظر شما در href قرار می گیرد .

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

 

 

2 – داخلی (Inline) :

در این روش تمامی دستورات css خود را درون سند html و در داخل تگ <style></style> قرار می دهید .

مثال :

<style type=”text/css”>

h2{color:red}

</style>

 می توانید مثال بالا را در هر کجای سند html قرار دهید.

3 – در جا (Inline) :

همان خصوصیت style تگ ها می باشد ، که در درون هر تگ تعریف می شود .این روش توصیه نمی شود زیرا باعث ادغام لایه نمایش و لایه محتوا می شود .

از معایب این روش :

    کدها را ناخوانا و نا مرتب می کنید .

     تغیرات بعدی سخت تر می شود .

     باعث افزایش حجم  صفات می شود .

 

هر دستور css می تواند یک یا مجوعه ای از خصوصیات را در بر بگیرد که خصوصیات مابین کاراکتر های { و } قرار می گیرند .

در هر خط می توانید یک قاعده بنویسید برای نوشتن چند قاعده در یک خط باید هر قاعده را با کاراکتر ; از هم جدا کرد .

شکل کلی دستورات css :

انتخابگر {

قواعد

}

مثال :

h2

{

Color:red;

}

h2 = انتخابگر    و  color=red  قواعد

 

سعی کنید همیشه دستورات css را به صورت خارجی بنویسید زیرا هم از نظر سئو مفید می باشد و کد دستورات کم تری هم می نویسید و تغیرات آن در در صورت نیاز آسان تر خواهد بود .

 


توسط : عثمان رحیمی  3 ماه قبل ، سه شنبه 4 شهریور 1393 ساعت 05:52  0  1803

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


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط