CSS مظفر بگ محمدی
Content vs. Presentation اکثر برچسبها نوع محتوی را تعریف می کنند و کاری به نحوه نمایش ندارند. شیوه نامه یا style sheet نحوه نمایش را به یک سند منتسب می کند. CSS1 در سال 1996 توسط W3C توسعه داده شد. CSS2 در سال 1998 منتشر شد. CSS3 در سال 2012 منتشر شده است اما همه ی مرورگرها از تمام ماژولهای آن پشتیبانی نمی کنند. معمولا از شیوه نامه سندهای HTML به عنوان شیوه نامه آبشاری یاد می شود چون دارای سه سطح متفاوت است. شیوه نامه توکار به محتوی یک عنصر اعمال می گردد. شیوه نامه سند به بدنه سند اعمال می گردد. شیوه نامه خارجی می تواند به چندین صفحه اعمال شود.
Understanding Style Rules مشخصه نمایش هر عنصر با یک قانون نمایش بیان می شود: شیوه نامه به مجموعه ای از قوانین نمایش گفته می شود. <Head> <Style type=“text/css”> P {color:blue; font-size: 24pt;} </Style> </Head> In CSS, style rules express the style characteristics for an HTML element. A set of style rules is called a style sheet. Style rules are easy to write and interpret. The following sode shows a simple style rule for the <P> element. Note that the style rules are contained in the <STYLE> element in the document’s <HEAD> section. This rule sets all <P> elements in the document to blue 24-point text;
Understanding Style Rules هر قانون نمایش دارای دو قسمت است: یک انتخاب کننده و یک اعلان h1 {color: red;}. انتخاب کننده عنصری را که قانون به آن اعمال می شود را مشخص می کند. اعلان خاصیت و مقدار آنرا برای انتخاب کننده مشخص می کند. Declaration Selector The header cell of a table
Understanding Style Rules خاصیت یک مشخصه از عنصر را مشخص می کند. سپس علامت : قرار می گیرد. بعد مقدار آن خاصیت بیان می گردد. و در نهایت، یک علامت ; قرار می گیرد. P {color: red;} Property Value
Inline Style Sheets می توان با استفاده از مشخصه styleنحوه نمایش یک عنصر را کنترل کرد. می توانیم داخل این برچسب دنباله ای از property:value را قرار دهیم. font-family:Courier,monospace font-style:italic font-weight:bold font-size:12pt font-size:large font-size:larger color:red color:#000080 background-color:white text-decoration:underline text-decoration:none text-align:left text-align:center text-align:right text-align:justify vertical-align:top vertical-align:middle vertical-align:bottom text-indent:5em text-indent:0.2in <html> <!–- COMP519 page17.html 15.08.06 --> <head> <title>Inline Style Sheets</title> </head> <body> <p style="font-family:Arial,sans-serif; text-align:right">This is a right-justified paragraph in a sans serif font (preferably Arial), with some <span style="color:green">green text</span>. </p> <p>And <a style="color:red; text-decoration:none; font-size:larger;" href="1.htm">here</a> is a formatted link. </body> </html> view page
Inline Style Sheets (cont.) <html> <!–- COMP519 page18.html 15.08.06 --> <head> <title>Inline Style Sheets</title> </head> <body> <p>Here is an image <img src=“1.jpeg" alt="Tony Blair" style="margin-left:0.3in; margin-right:0.3in; vertical-align:middle; border-style:double; border-color:yellow“ /> embedded in text. </p> <ol style="list-style-type:upper-alpha"> <li> one thing</li> <li> or another</li> <ul style="list-style-type:square; whitespace:pre"> <li> with this</li> <li> or that</li> </ul> </ol> </body> </html> مطالب بیشتر: margin-left:0.1in margin-right:5% margin:3em padding-top:0.1in padding-bottom:5% padding:3em border-width:thin border-width:thick border-width:5 border-color:red border-style:dashed border-style:dotted border-style:double border-style:none whitespace:pre list-style-type:square list-style-type:decimal list-style-type:lower-alpha list-style-type:upper-roman view page
Inline Style Sheets (cont.) <html> <!–- COMP519 page19.html 15.08.06 --> <head> <title> Inline Style Sheets </title> </head> <body> <table style="font-family:Arial,sans-serif"> <caption style="color:red; font-style:italic; text-decoration:underline"> Student data. </caption> <tr style="background-color:red"> <th> name </th> <th> age </th> </tr> <tr> <td> Chris Smith </td> <td> 19 </td> <td> Pat Jones </td> <td> 20 </td> <tr> <td> Doogie Howser </td> <td> 9 </td> </tr> </table> </body> </html> view page
Document Style Sheets شیوه نامه توکار به عناصر متمایز صفحه اعمال می گردد. این کار ممکن است به ناهمگونی منجر شود. یعنی عناصر یکسان بصورت متفاوت فرمت شوند. باعث قاطی شدن محتوی و نحوه نمایش می گردد. یعنی فلسفه HTML زیر سوال می رود. اما، شیوه نامه سند اجازه می دهد که محتوی و نمایش به خوبی از هم جدا شوند. با استفاده از برچسب style قوانین نمایش در قسمت <head> قرار می گیرند. این قوانین می توانند به تمام عناصر یا زیرکلاسی از عناصر صفحه اعمال شود.
Document Style Sheets <html> <!–- COMP519 page20.html 15.08.06 --> <head> <title>Document Style Sheets</title> <style type="text/css"> h1 {color:blue; text-align:center} p.indented {text-indent:0.2in} </style> </head> <body> <h1> Centered Title </h1> <p class="indented">This paragraph will have the first line indented, but subsequent lines will be flush. </p> <p>This paragraph will not be indented. </p> <h1> The End </h1> </body> </html> شیوه نامه سند این اطمینان را فراهم می کند که عناصر یکسان بصورت مشابه فرمت می گردند. حتی می توان زیر کلاسی از عنصر را تعریف کرد و برای آن فرمت جداگانه نوشت. در مثال روبرو، p.indented یک زیر کلاس از پاراگراف است. تمام خواص آنرا به ارث می برد. مشخصات جدیدی به آن اضافه می کند. برای استفاده از این کلاس، مشخصه class="ID” را در برچسب مربوطه قرار می دهیم. view page
Document Style Sheets (cont.) <html> <!–- COMP519 page21.html 15.08.06 --> <head> <title> Inline Style Sheets </title> <style type="text/css"> table {font-family:Arial,sans-serif} caption {color:red; font-style:italic; text-decoration:underline} th {background-color:red} </style> </head> <body> <table> <caption> Student data. </caption> <tr><th> name </th> <th> age</th></tr> <tr><td> Chris Smith </td> <td> 19 </td></tr> <tr><td> Pat Jones </td> <td> 20 </td></tr> <tr><td> Doogie Howser </td> <td> 9 </td></tr> </table> </body> </html> شیوه نامه سند در فرمت کردن جداول بسیار کارآ است. محتوی و نمایش را بطور موثری از هم جدا می کند. view page
Pseudo-Elements <html> <!–- COMP519 page23.html 15.08.06 --> <head> <title>Title for Page</title> <style type="text/css"> a {color : red; text-decoration : none; font-size : larger} a:visited {color : black} a:active {color : orange} a:hover {color : blue} p:first-letter {font-size : large; color : white; background-color : darkblue} </style> </head> <body> <p> Welcome to my Web page. I am so happy you are here. </p> <p> Be sure to visit <a href="http://www.cnn.com">CNN</a> for late-breaking news. </body> </html> از شبه- عنصر می توان برای صدا کردن قسمتهایی از یک عنصر استفاده کرد. مثلا لینک درای قسمتهای زیر است: :visited :active :hover یا پاراگراف داری زیر قسمتهای زیر است: :first-line :first-letter view page
External Style Sheets ماژولار بودن رمز توسعه و استفاده مجدد از نرم افزار است: می توان کلاسها و توابع مفید را طراحی، پیاده سازی و تست کرد. سپس آنرا برای استفاده مجدد بسته بندی کرد. این کار زمان وهزینه طراحی را کاهش می دهد. می توان یک بسته را تغییر داد و اثر آنرا در کل نرم افزار دید. شیوه نامه خارجی، تعریف قوانین نمایش را در یک فایل جداگانه قرار می دهد. صفحات مختلف می توانند از یک شیوه نامه واحد استفاده کنند. اگر شیوه نامه خارجی را تغییر دهیم، اثر آن در تمام صفحات ظاهر می شود. سایز نهایی صفحات و کل سایت کمتر می گردد.
Modularity & Style Sheets <html> <!–- COMP519 page26.html 15.08.06 --> <head> <title>Title for Page</title> <link rel="stylesheet" type="text/css" href="myStyle.css" title="myStyle“ /> </head> <body> <h1>Centered Title</h1> <p class="indented">This paragraph will have the first line indented, but subsequent lines will be flush.</p> <p>This paragraph will not be indented. </p> <h1>The End</h1> </body> </html> /* myStyle.css COMP519 02.09.05 */ h1 {color : blue; text-align : center} p.indented {text-indent:0.2in} view page
<div> and <span> Tags مشکل: خاصیت فونت به کل عنصر اعمال می گردد. راه حل: استفاده از یک برچسب جدید به اسم <span> برای تعریف یک عنصر داخل یک عنصر بزرگتر. معنی پیش فرض <span> این است که محتوی را تغییر نده. <p> Now is the <span> best time </span> ever! </p> <style type = "text/css"> .bigred {font-size: 24pt; font-family: Ariel; color: red} </style> <p> Now is the <span class = "bigred"> best time </span> ever! </p> اما می توان یک قانون نمایش را به <span> اعمال کرد. view page برچسب <div> یک عنصر مفید دیگر است که می توان برای ایجاد یک قسمت با استیل جداگانه از آن استفاده کرد.
Web rules of thumb راهنماییهای مفید: از فونت و رنگ بجا استفاده کنید. مثلا متن زرشکی را در زمینه صورتی قرار ندهید. از فونتهای نامانوس استفاده نکنید. از تصویر فقط در مواقع لزوم استفاده کنید. وجود تصاویر روشن در پس زمینه، خوانایی متن را کاهش می دهند. استفاده از تصاویر قابل کلیک بجای دکمه سرعت بارگذاری سایت را کم می کند. به سایز پنجره و فونت برای جانمایی وابسته نشوید. کاربر را اذیت نکنید. پنجره باز شونده اتوماتیک نداشته باشید. تبلیغات زیاد در سایت قرار ندهید. از موسیقی نامانوس استفاده نکنید. یا سندهای بزرگ را به چند صفحه بشکنید یا از منو استفاده کنید. فقط از خاصیتهای استاندارد استفاده کنید و سایتتان را با مرورگرهای مختلف تست کنید. از شیوه نامه برای اطمینان از همگونی سایت و ساده شدن تغییرات بعدی استفاده کنید.