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

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

اما با معرفی روش قالب دهی صفحات ( Cascading Style Sheet ) یا CSS  ، ما به وسـیله خاصیت تگ Style ،  تمام خواص و تنظیمات مورد نیاز را برای هر عنصر را در تگ  Style  تعیین می کنیم . خصوصیات موجود در تگ Style تقریبا تمامی نیازهای ویرایش ، تغییر شکل و افزودن جلوه های مختلف را به عناصر شامل می شود.
همانطور که قبلا ذکر شد ، صفحات HTML از یک سری عناصر تشکیل شده اند،که هر کدام توسط یک تگ معرفی می شوند . ۳ روش عمده برای اعمال خواص از طریق  Style  به یک عنصر وجود دارد :

تعیین خواص مورد نظر در خاصیت Style در درون تگ عنصر .
تعیین خواص عناصر در تگ style در بخش head هر صفحه برای عناصر آن صفحه .
تعیین خواص از طریق یک تگ Style بیرونی و پیوند ان عنصر به تگ Style . در این حالت ابتدا باید مجموعه خواص را در یک تگ Style بیرونی به یکی از روش ارائه شده در پائین صفحه ایجاد می کنیم .

نکته : برای یادگیری کلیه خاصیت های style و مقادیر آنها به بخش آموزش CSS بروید .

در زیر۳ روش عمده برای تعیین خواص مورد نظر در تگ style را بیان می کنیم :

۱ ) External Style Sheet :
هنگامی که قرار است مقادیر style به اجزای چندین صفحه مختلف به طور یکسان اعمال می شود ، بهترین روش استفاده از یک صفحه Style sheet خارجی و پس لینک کردن آن به صفحه مورد نظر است. این کار دو مزیت عمده دارد:

کدهای مربوط به style را فقط یکبار در sheet style نوشته و از آن می توان برای هزاران صفحه به صورت مشترک استفاده کرد.
می توان ظاهر و مشخصات کلیه صفحاتی که style به انها اعمال شده است را با یک تغییر کوچک در style sheet تغییر داد .

برای لینک کردن یک صفحه style خارجی به یک صفحه ، از تگ < link > در قسمت < head > صفحه استفاده می شود ، توجه شود که پسوند فایل های css ، style sheet است .
مثال : در مثال زیر یک صفحه style sheet خارجی را به صفحه HTML پیوند زده ایم . توجه شود که این کار باید در قسمت head صفحه انجام شود :

< head >
< link rel = “stylesheet” type = “text/css” href = “mystyle.css” />
< /head >

 

نکته مهم : خصوصیات مختلف style در صفحه style sheet بر مبنای پارامترهای دسته بندی مثل کلاس ، id یا نوع عنصر تعیین می شود . سپس در صفحه های وب باید بر اساس دسته بندی فوق ، اجزای مختلف را در class های مورد نظر قرار داده یا id آنها برابر مقدار در نظر گرقته شده ، قرار داد . در ادامه مطالب این مسئله را بررسی می کنیم .

دسته بندی و تعیین عناصر در Style Sheet ها :

هر عنصر HTML دو خاصیت id و class دارد . خاصیت id تعیین کننده یک نام منحصر به فرد برای عنصر است و خاصیت class به کلاسی که عنصر در آن عضویت دارد ، اشاره می کند . یک class محجموعه ای از عناصر مختلف است که در یک گروه واحد قرار دارند . به روش های زیر تعیین می کنیم که چه عناصری با چه id و class به style مورد نظر ارتباط دارند :

برای تعیین عناصر بر پایه id آنها از روش زیر استفاده می شود :

#id عنصر مورد نظر

مثال : عنصری که id آن برابر label است .

مثال : #label
برای تعیین عناصر بر پایه class آنها از روش زیر استفاده می شود :

. نام کلاس عنصر مورد نظر

مثال : عنصری که class آن برابر header است .

مثال : .header
برای تعیین عناصر بر پایه نوع و کلاس آنها از روش زیر استفاده می شود :

نام کلاس عنصر مورد نظر . نوع عنصر

مثال : تمام عناصری که از نوع td و عضو کلاس header هستند .

مثال : td.header

مثال : تمام عناصری که از نوع p و عضو کلاس matn هستند .

مثال : p.matn
برای تعیین عناصر بر پایه نوع و id آنها از روش زیر استفاده می شود :

عنصر مورد نظر # نوع عنصر id

مثال : عنصری از نوع p ، که id آن برابر header است .

مثال : p#header

تعیین خواص مورد نظر برای هر گروه :

پس از تعیین عناصر مورد نظر ، مجموعه خواص مورد نیاز را در یک کروشه در مقابل نام آنها تعیین می کنیم . هر خاصیت به وسیله یک سمی کوولن ( ; ) از خاصیت دیگر جدا می شود و آخرین خاصیت نیازی به سمی کولون ندارد . به طور کلی از روش زیر برای تعیین خاصیت ها استفاده می کنیم .

{ … و مقدار ۲ : خاصیت ۲ ; مقدار ۱ : خاصیت ۱ } نام عنصر یا عناصر مورد نظر

مثال : در مثال زیر چندین ویژگی برای عناصر از نوع جدول که عضو کلاس ex هستند ، تعیین کرده ایم :

table.ex { border : solid 2px blue ; width : 100px ; padding : 2px }

۲ ) Internal Style Sheet :

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

مثال : در مثال زیر توسط تگ < style > در بخش head برای چند عنصر صفحه ویژگی هایی تعیین شده است . به توضیحات مثال دقت کنید :

 < head >
< style type = “text/css” >
۱ p#farsi { text-align : right ; direction : rtl }
۲ table.ex { border : solid 2px blue }
< /style >
< /head >

در مثال فوق دو نوع قالب دهی به ۲ عناصر دسته از عناصر اعمال شده است :

در خط ۱ برای عنصر پاراگراف ( p ) که id آن برابر farsi است ، چیدمان نوشته ( text-align ) از سمت راست و جهت نوشته ( direction ) از راست به چپ تعیین شده است .
در خط ۲ برای کلیه عناصری از نوع table که عضو کلاس ex هستند ، در خاصیت ترکیبی border حاشیه ای به رنگ آبی ، با اندازه ۲ پیکسل تعیین شده است .

۳ ) Inline Style :

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

< p style = “color : blue ; text-align : left ; direction : ltr >
This is a paragraph which is formatted with CSS .
< /p >