تگ < style > :
تاکنون در تمامی تگ های معرفی شده HTML ، ما خواص مورد نظر هر تگ را در درون خود تگ تعیین و مقدار دهی کردیم. در روش های طراحی وب قدیمی تر، ما مجبور بوديم برای هرعنصری در صفحه به صورت مجزا خاصيت ها را تعيين می کنيم . این کار چند اشکال عمده داشت :
- باعث تکرار شدن خواص مشابه در تگ های عنصرها می شد .
- حجم کد نویسی بالا رفته و سرعت طراحی کاهش می يافت .
- احتمال بروز خطا و اشتباه را افزايش می داد .
- اعمال تغييرات به صفحات و عناصر وقت و کار زیادی را طلب می کرد .
اما با معرفی روش قالب دهی صفحات ( Cascading Style Sheet ) یا CSS ، ما به وسـيله خاصيت تگ Style ، تمام خواص و تنظيمات مورد نياز را برای هر عنصر را در تگ Style تعيين می کنيم . خصوصيات موجود در تگ Style تقريبا تمامی نيازهای ويرايش ، تغيير شکل و افزودن جلوه های مختلف را به عناصر شامل می شود.
همانطور که قبلا ذکر شد ، صفحات HTML از یک سری عناصر تشکيل شده اند،که هر کدام توسط یک تگ معرفی می شوند . 3 روش عمده برای اعمال خواص از طريق Style به يک عنصر وجود دارد :
- تعيين خواص مورد نظر در خاصيت Style در درون تگ عنصر .
- تعيين خواص عناصر در تگ style در بخش head هر صفحه برای عناصر آن صفحه .
- تعيين خواص از طريق یک تگ Style بيرونی و پيوند ان عنصر به تگ Style . در اين حالت ابتدا باید مجموعه خواص را در یک تگ Style بيرونی به یکی از روش ارائه شده در پائين صفحه ايجاد می کنيم .
نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد .
خواص مهم تگ style | ||
نام خاصيت | نوع خاصيت | شرح |
type | text/css | نوع محتويات درون تگ style را تعيين می کند که برای استفاده از قالب CSS آن را برابر text/css تنظيم می کنيم . |
media | screen tty ty projection handheld braille auarl all |
نوع رسانه نمايش دهنده صفحه اينترنتی را برای اعمال قالب های style به آنها را تعيين می کند . چنانچه فقط يک نوع رسانه خاص در اين قسمت عنوان شود ، خصوصيات style مورد نظر فقط در هنگام نمايش صفحه وب در آن رسانه اعمال خواهد شد و برای ساير رسانه ها به صورت ساده نمايش داده می شود . که می تواند يکی از موارد زير باشد : screen : صفحه نمايش کامپيوترهای معمولی . tty : ماشين تحرير راه دور ، تله تايپ ( برای ماشين هايی که دارای نحوه نمايش ثابت هستند ) . tv : وسايلی همچون تلويزيون با رزوليشن پايين . projection : برای نمايش در پروژکتورها . handheld : برای کامپيوتر های دستی و جيبی . barille : در اسناد مخصوص به افراد نابينا ( بريل ) . print : برای پرينت در دستگاه های چاپگر . auarl : برای سيستم های صوتی . all : برای همه نوع سيستم ها . |
در زیر3 روش عمده برای تعيين خواص مورد نظر در تگ style را بيان می کنيم :
1 ) 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
تعيين خواص مورد نظر برای هر گروه :
پس از تعيين عناصر مورد نظر ، مجموعه خواص مورد نياز را در يک کروشه در مقابل نام آنها تعيين می کنيم . هر خاصيت به وسيله يک سمی کوولن ( ; ) از خاصيت ديگر جدا می شود و آخرين خاصيت نيازی به سمی کولون ندارد . به طور کلی از روش زير برای تعيين خاصيت ها استفاده می کنيم .
{ ... و مقدار 2 : خاصيت 2 ; مقدار 1 : خاصيت 1 } نام عنصر يا عناصر مورد نظر
مثال : در مثال زير چندين ويژگی برای عناصر از نوع جدول که عضو کلاس ex هستند ، تعيين کرده ايم :
table.ex { border : solid 2px blue ; width : 100px ; padding : 2px }
2 ) Internal Style Sheet :
اين نوع قالب دهی توسط تگ < style > در قسمت < heade > صفحه تعيين می شود . مجوعه مقادير موجود در اين style فقط به عناصر صفحه جاری اعمال می شود . کليه مقادير مورد نظر برای اجزای مختلف را بايد در تگ باز و بسته < style > فرار داد :
مثال : در مثال زير توسط تگ < style > در بخش head برای چند عنصر صفحه ويژگی هايي تعيين شده است . به توضيحات مثال دقت کنيد :
Example | |
< head > < style type = "text/css" > 1 p#farsi { text-align : right ; direction : rtl } 2 table.ex { border : solid 2px blue } < /style > < /head > |
کد |
در مثال فوق دو نوع قالب دهی به 2 عناصر دسته از عناصر اعمال شده است :
نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد . |
توضيحات |
3 ) Inline Style :
در اين نوع قالب دهی ، خصوصيات مورد نظر توسط خاصيت style در درون تگ عنصر مورد نظر تعيين می شود . اين خصوصيات فقط به عنصر مورد نظر اعمال می شوند .
مثال : در مثال زير برای يک پاراگراف توسط خاصيت style چندين ويژگی را تعيين کرده ايم :
Example | |
< p style = "color : blue ; text-align : left ; direction : ltr > This is a paragraph which is formatted with CSS . < /p > |
کد |
This is a paragraph which is formatted with CSS . |
خروجی |
منبع: دنیای فناوری با حساس کامپیوتر