آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

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