قالب بندی صفحات HTML
تگ < style > :
تاکنون در تمامی تگ های معرفی شده HTML ، ما خواص مورد نظر هر تگ را در درون خود تگ
تعیین و مقدار دهی کردیم. در روش های طراحی وب قدیمی تر، ما مجبور بوديم برای هرعنصری
در صفحه به صورت مجزا خاصيت ها را تعيين می کنيم . این کار چند اشکال عمده داشت :
- باعث تکرار شدن خواص مشابه در تگ های عنصرها می شد .
- حجم کد نویسی بالا رفته
و سرعت طراحی کاهش می يافت .
- احتمال بروز خطا و اشتباه را افزايش می داد .
-
اعمال تغييرات به صفحات و عناصر وقت و کار زیادی را طلب می کرد .
اما با معرفی روش قالب دهی صفحات ( Cascading Style Sheet ) یا CSS ، ما به وسـيله
خاصيت تگ Style ، تمام خواص و تنظيمات مورد نياز را برای هر عنصر را در تگ Style
تعيين می کنيم . خصوصيات موجود در تگ Style تقريبا تمامی نيازهای ويرايش ، تغيير شکل
و افزودن جلوه های مختلف را به عناصر شامل می شود.
همانطور که قبلا ذکر شد ، صفحات HTML از یک سری عناصر تشکيل شده اند،که هر کدام توسط
یک تگ معرفی می شوند . 3 روش عمده برای اعمال خواص از طريق Style به يک
عنصر وجود دارد :
- تعيين خواص مورد نظر در خاصيت Style در درون تگ عنصر .
- تعيين خواص عناصر در
تگ style در بخش head هر صفحه برای عناصر آن صفحه .
- تعيين خواص از طريق یک تگ Style
بيرونی و پيوند ان عنصر به تگ Style . در اين حالت ابتدا باید مجموعه خواص را در یک
تگ Style بيرونی به یکی از روش ارائه شده در پائين صفحه ايجاد می کنيم .
نکته : برای يادگيری کليه خاصيت های style و مقادير آنها
به بخش آموزش CSS برويد .
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
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 خارجی و پس لینک کردن آن به صفحه
مورد نظر است. این کار دو مزیت عمده دارد:
- کدهای مربوط به 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
برای چند عنصر صفحه ويژگی هايي تعيين شده است . به توضيحات مثال دقت کنيد :
< 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 چندين
ويژگی را تعيين کرده ايم :
< 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 .
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :