تمامي tag هاي HTML خواصي دارند كه بوسيله آنها مي توان نحوه نمايش آنها را تغيير داده يا تنظيم نمود . از جمله اين خواص (Attributes) ميتوان به فونت ، رنگ ، مكان نمايش وغيره اشاره نمود.
اين attribute ها از سه طريق زير قابل تعريف هستند.
1- هنگامي كه HTML tag نوشته مي شود attribute هاي آن ذكر شود.
مثال:
<IMG SRC = "cone . gif">
2- بوسيله CSS بخشي از attribute ها قابل تنظيم هستند.
مثال:
<p style = "font family : Arial" > This is a sample </p>
اين روش به سه شكل قابل اجرا مي باشد كه بعدا توضيح داده مي شود.
3- بوسيله javaScript وبرنامه نويسي مي توان خواص (Property) ها هر شي موجود در صفحه HTML را تغيير داد. با توجه به اينكه در محيط مرورگر (browser) همه چيز به عنوان شي (object) در نظر گرفته مي شود لذا قابليت اشاره به خواص شي به خواندن يا نوشتن آنها فراهم شده است. اين بحث به Document Object Model (DOM) معروف است كه در فصل javaScript توضيح داده خواهد شد.
مزاياي استفاده از CSS چيست؟
1- سبب مي شود تا به راحتي بتوان شكل و شمايل صفحه HTML يا تمام صفحات يك سايت را با سرعت هر چه بيشتر تغيير داد. به عبارت ديگر ميتوان يك مركز كنترل به وجود آورد.
2- اگر از CSS به نحو خوبي استفاده شود سبب كاهش حجم صفحات سايت و كمتر شدن حجم download صفحات براي كاربران مي گردد. در نتيجه سرعت سايت بيشتر شده و كارايي آن افزايش مي يابد.
3- ميتواند سرعت توليد صفحات HTML را افزايش دهد. اين كار بوسيله ساخت الگوها(Template) و استفاده مكرر از آنها عملي مي شود.
CSS و Browser
مرورگرهاي موجود كه عمدتا Internet Explorer و Netscape و Opera هستند سعي كرده اند تا از استانداردهاي CSS1 و CSS2 استفاده كنند.ولي بهر حال اختلافاتي با هم دارند. آنچه كه از اين به بعد توضيح داده مي شود در ارتباط با IE 4.0 به بعد مي باشد. اين نوع مرورگرها ونسخه هاي بعدي آن بيشترين نوع مرورگرهاي استفاده شده در سطح اينترنت هستند.
انواع Style Sheets
CSS به سه روش زير مي تواند با صفحات HTML بكار رود.
1- Inline Style Sheets ، در اين حالت style مورد نظر به يك tag خاص اضافه شده و تنها بر روي محتويات همان tag تاثير مي گذارد. اين نوع Style Sheets از اولويت اول برخوردار بوده و دو روش ديگر را خنثي مي كند. مثال :
<p style ="font: 12pt Arial">
Inline Style Sheets Test
</p>
2- Embeded Style Sheets : در اين حالت CSS ها در يك محل در فايل HTML جمع شده ومي تواند تعاريف ساده يا پيچيده داشته باشد. ميزان تعريف CSS ها بستگي به نياز شما دارد . اين روش از اولويت كمتري نسبت به روش قبل برخوردار بوده ولي اولويت آن نسبت به روش بعدي (Linked Style Sheets) بيشتر است و تعاريف آن را خنثي مي كند. مثال:
<style>
H1 {font : 28pt Arial Black }
H2 {font : 20pt Arial Red }
P {font : 10pt Times }
</style>
اين style در بخش <HEADE>…</HEADE> صفحه HTML قرار مي كيرد.
3- Linked Style Sheets: در اين روش تمام تعاريف CSS در فايلي با پسوند (.CSS) قرار ميگيرد. سپس هر فايلي كه نيازبه اين تعاريف دارد آنرا بصورت زير به خود متصل مي كند
<link rel = "style sheet" href = "My Style.css" type = "text/css">
اين tag در محدوده <HEADE>…</HEADE> صفحه HTML مورد نظر قرار مي گيرد .
فايل My Style.css ميتواند مشابه زير باشد.
BODY{background : # FFFFFF : color : # FFFFOO : margin-top : 10px ; margin-left : 0.75in ; margin-right : 0.75in}
P { font-family : 12pt Arial , Times , Serif ;}
H1 {Color : # OOFFFF }
H2 {Color : # FFOOFF }
H3 {Color : # OOFFOO }
نحوه نگارش CSS
براي نوشتن يك تعريف Style Sheets بايستي اول براي مرورگر تعيين نمود كه اين تعاريف را بر روي كدام tag يا كدام دسته از tag ها اعمال كند. لذا انتخاب كننده (Selector) مطرح ميشود.
مدل اول از Selector ها اصطلاحا type selector مي نامند. در اين حالت بر روي عناصر خاصي از HTML اعمال مي شوند. بعنوان مثال
H1 {font family : Arial }
H2 {font-color : blue }
P {font-family : Times , Serif , font-size : 10pt
در اين مثالها P, H1 , H2 بعنوان Selector هستند وآنچه كه درون علامتهاي {} است تعاريفي است كه بر روي tag هاي نوع Selector اعمال مي شود. مثالهاي ديگر :
H1, H2 , H3 {font-family : Arial , Times , Serif}
H4 , H5 , H6 {Color : blue ;font-weight : bold}
مدل دوم از Selector ها را اصطلاحا Attribute Selector مي نامند . در اين حالت يكسري Attribute هايي به tag هاي HTML اضافه شده وبراي آن tag كار خاصي انجام ميدهد. در اين مثال ALT يك Attribute است كه به IMG tag اضافه شده است.
<IMG SRC = "jpboton.jpg" ALT = "Button for Jumping">
از ديگر حالتهاي اين مدل مي توان به ID و CLASS اشاره كرد.
Class Attribute گروهي از عناصر هستند كه همه آنها داراي مقدار مشابهي براي Attribute CLASS خود مي باشند. هر tag اي كه در محدوده و باشد مي تواند يك كلاس داشته باشد. وقتي به يك عنصر ، كلاس داده شود تمام نمونه هاي آن عنصر مي توانند از كلاس استفاده كنند. مثال:
<style>
Spanish {font-family :"American Type writer" , zar}
English {font-family : Arial , Helvetica , Sanserif }
<style> <P class = "spanish"> Estas palabras se expersen en Espanoles </p>
<P class = "english"> This word are expressed in English </p>
اين نوع از كلاسها ميتوانند به هر tag اي اضافه شوند.
<H1 class = "Spanish"> Bienvenidos </H1>
<H3 class = "English"> Welcome </H3>
چنانچه بخواهيد انواعي از كلاسهاي يك tag خاص (مثلا H1) را داشته باشيد مي توانيد به صورت زير عمل كنيد.
H1.blue {font-color : blue}
H1.red { font-color : red}
H1.green { font-color : green}
و به صورت زير ميتوان از آنها استفاده كرد.
<H1 class = "blue"> Water </H1>
<H1 class = "red"> Blood </H1>
<H1 class = "green"> Leaf </H1>
براي آنكه بتوان يك كلاس را به چندين tag هاي مختلف اعمال كرد بايستي از ذكر نام tag هنگام تعبيف كلاس خود داري كرد. در مثال زير اولين اولين كلاس فقط به tag هاي H3 اعمال مي شود ولي كلاس دوم به هر نوع tag اي كه از اين كلاس استفاده كند اعمال مي گردد.
H3. English {font-family : Arial , Times , Serif ; font-size : 12pt}
. English { font-family : Arial , Times , Serif ; font-size : 12pt}
بهترين مدل از CSS در كلاس پياده سازي مي شود و قدرت انعطاف زيادي دارد. به راحتي ميتواند طداحي را تغيير دهد.
ID Attribute طراحي شده است تا فقط بر روي يك عنصر اعمال شود. بايستي يك ID selector را همانند روش class تعريف كرد ولي در ابتداي تعريف آن يك علامت # و به دنبال آن نام مي آيد.
# reserved {color : black}
<em id ="reserved">word</em>
در مورد كلاسها يك نوع خاص به نام شبه كلاس Pseudo-class نيز وجود دارد. اين نوع از كلاسها ، اشاره به زير مجموعه هاي يك tag مي كنند. مثلا در مورد لينك (A) شبه كلاسهاي زير وجود دارد.
A : link {color : green }
A : visited {color : red }
A : active {color : blue }
مدل ديگري ازSelector ها را اصطلاحا Contextual Selector مي نامند. گاهي اوقات لازم است يك style هنگامي به يك عنصر اعمال شود كه داراي عنصر parent خاصي باشد.
مثلا مي خواهيد به <P>هاي درون <DIV> يك style خاصي اضافه كنيد. كه نبايستي به <P>هاي خارج از <DIV> اضافه شود. اين مدل از Selector ها به صورت زير تعريف مي شوند.
به تمام tag هاي <P> اعمال مي شود . P{font-Size : 12pt}
فقط به tag هاي <P> درون <DIV> اعمال مي شود. DIV P{ font-Size : 10pt}
به متون EM درون OL و درون P اعمال مي شود. P OL EM { font-weight : bold}
به متون EM درون H1 يا درون H2 اعمال ميشود. H1 EM , H2 EM {font-color : red}
در مورد attribute , font هاي زير وجود دارد.
Font-Style , font-weight , line-height , font-variant , font font-family, font-Size ,
در مورد رنگ حالتها زير قابل استفاده است.
H1 { font-color : rgb (80 , 200 , 200)}
H1 { font-color : rgb (# 5DC8FA)}
H1 { font-color : rgb (31% , 78% , 98%)}
H1 { font-color : # 2030FF}
آدرس چند سايت در ارتباط با طراحي وب
www.htmlhelp.com
www.mvd.com
www.webreference.com
www.tappi.org
www.fontsite.com
www.virtual-coach.com
جدول زير ارث بري برخي از CSS attribute را نشان مي دهد. آنهايي كه ارث مي برندچنانچه در محدوده يك parent tag (مانند BODY) قرار گيرند از آن ارث برده و خود را هماهنگ مي كنند.
موارد كه ارث مي برند شامل
Color , font , font-family, font-Size , font-weight , line-height , font-variant ,
Letter-spacing , line-height , text-align , text-internet , text transform
Word-spacing , list-style , list-style-position , list-style-type , white-space.
مواردي كه ارث نمي برند شامل :
Margin , margin-left (-right ,-top , -bottom), padding , padding-left (-right ,-top , -bottom), text-decoration , vertical-align , background , background-attachment , background-color , background-image , background-position , background-repeat , border , border-color , border-left (-right ,-top , -bottom) , border-left-width (-right- ,-top- , -bottom-) , border-style , border-width , clear , display , float , height , width.
توليد CSS ها بوسيله ابزارها
برنامه هاي مختلفي هستند كه ابزار توليدCSS را دارند. از مهمترين آنها موارد زير هستند.
1- Microsoft Front Page
2- Macromedia Dream Weaver
3- Adobe Go Live
4- Web Express
5- Home Site
6- Hot Metal
7- Hot Dog
8- Adobe Page Mill
9- Symantec visual page
10- Top Style Pro
HTML ، مشکل ، راهکار ! [سه شنبه، 9 اسفند ماه ، 1390]
