آموزش HTML 4
آموزش طراحی سایت

---

قالب بندی صفحات HTML

تگ < style > :

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

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

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

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

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

خواص مهم تگ style
نام خاصيت	نوع خاصيت	شرح
type	text/css	نوع محتويات درون تگ style را تعيين می کند که برای استفاده از قالب CSS آن را برابر text/css تنظيم می کنيم .
media	screen tty ty projection handheld print braille auarl all	نوع رسانه نمايش دهنده صفحه اينترنتی را برای اعمال قالب های style به آنها را تعيين می کند . چنانچه فقط يک نوع رسانه خاص در اين قسمت عنوان شود ، خصوصيات style مورد نظر فقط در هنگام نمايش صفحه وب در آن رسانه اعمال خواهد شد و برای ساير رسانه ها به صورت ساده نمايش داده می شود . که می تواند يکی از موارد زير باشد : screen : صفحه نمايش کامپيوترهای معمولی . tty : ماشين تحرير راه دور ، تله تايپ ( برای ماشين هايی که دارای نحوه نمايش ثابت هستند ) . tv : وسايلی همچون تلويزيون با رزوليشن پايين . projection : برای نمايش در پروژکتورها . handheld : برای کامپيوتر های دستی و جيبی . barille : در اسناد مخصوص به افراد نابينا ( بريل ) . print : برای پرينت در دستگاه های چاپگر . auarl : برای سيستم های صوتی . all : برای همه نوع سيستم ها .

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

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

1. کدهای مربوط به style را فقط یکبار در sheet style نوشته و از آن می توان برای هزاران صفحه به صورت مشترک استفاده کرد.
2. می توان ظاهر و مشخصات کليه صفحاتی که 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 مورد نظر ارتباط دارند :

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

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

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

   مثال : #label

2. برای تعیين عناصر بر پايه class آنها از روش زير استفاده می شود :

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

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

   مثال : .header

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

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

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

   مثال : td.header

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

   مثال : p.matn

4. برای تعیين عناصر بر پايه نوع و 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 عناصر دسته از عناصر اعمال شده است : در خط 1 برای عنصر پاراگراف ( p ) که id آن برابر farsi است ، چيدمان نوشته ( text-align ) از سمت راست و جهت نوشته ( direction ) از راست به چپ تعيين شده است . در خط 2 برای کليه عناصری از نوع table که عضو کلاس ex هستند ، در خاصيت ترکيبی border حاشيه ای به رنگ آبی ، با اندازه 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 .	خروجی

---

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

---

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است : بلهخیر نام :                  آدرس Email :       نظر شما :     سوال امنیتی : فرزند بچه شما چه نسبتی با شما دارد ؟