CSS Content vs. Presentation اکثر برچسبها نوع محتوی را تعریف می کنند و کاری به نحوه نمایش ندارند. شیوه نامه یا style sheetنحوه نمایش را به یک سند منتسب می کند. CSS1در سال 1996توسط W3Cتوسعه داده شد. CSS2در سال 1998منتشر شد اما بطور کامل توسط همه مرورگرها پشتیبانی نشد. معموال از شیوه نامه سندهای HTMLبه عنوان شیوه نامه آبشاری یاد می شود چون دارای سه سطح متفاوت است. .1 .2 .3 شیوه نامه توکار به محتوی یک عنصر اعمال می گردد. شیوه نامه سند به بدنه سند اعمال می گردد. شیوه نامه خارجی می تواند به چندین صفحه اعمال شود. Understanding Style Rules مشخصه نمایش هر عنصر با یک قانون نمایش بیان می شود: ><Head >”<Style type=“text/css P };{color:blue; font-size: 24pt ></Style ></Head شیوه نامه به مجموعه ای از قوانین نمایش گفته می شود. Understanding Style Rules هر قانون نمایش دارای دو قسمت است :یک انتخاب کننده و یک اعالن Declaration Selector };.h1 {color: red انتخاب کننده عنصری را که قانون به آن اعمال می شود را مشخص می کند. اعالن خاصیت و مقدار آنرا برای انتخاب کننده مشخص می کند. Understanding Style Rules خاصیت یک مشخصه از عنصر را مشخص می کند. سپس عالمت :قرار می گیرد. بعد مقدار آن خاصیت بیان می گردد. و در نهایت ،یک عالمت ; قرار می گیرد. Value Property };P {color: red Inline Style Sheets <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. </p> </body> view page </html> می توان با استفاده از مشخصه نحوه نمایش یک عنصر را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 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> view page </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 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> </tr> <tr> <td> Pat Jones </td> <td> 20 </td> </tr> <tr> <td> Doogie Howser </td> <td> 9 </td> </tr> </table> </body> view page </html> 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> حتی می توان زیر کالسی از عنصر را تعریف کرد و برای آن .فرمت جداگانه نوشت p.indented ،در مثال روبرو یک زیر کالس از پاراگراف .است <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> شیوه نامه سند این اطمینان را فراهم می کند که عناصر یکسان بصورت مشابه فرمت .می گردند view page . تمام خواص آنرا به ارث می برد مشخصات جدیدی به آن اضافه .می کند ،برای استفاده از این کالس ” را درclass="ID مشخصه برچسب مربوطه قرار می .دهیم 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> view page </html> شیوه نامه سند در فرمت کردن جداول بسیار کارآ .است محتوی و نمایش را بطور .موثری از هم جدا می کند 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. </p> </body> view page </html> عنصر می توان برای-از شبه صدا کردن قسمتهایی از یک .عنصر استفاده کرد : مثال لینک درای قسمتهای زیر است visited: active: hover: یا پاراگراف داری زیر قسمتهای زیر :است first-line: first-letter: دقت کنید که مرورگرها از پشتیبانیCSS2 همه تواناییهای .نمی کنند 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> COMP519 02.09.05 */ h1 {color : blue; text-align : center} p.indented {text-indent:0.2in} <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 view page <div> and <span> Tags مشکل :خاصیت فونت به کل عنصر اعمال می گردد. راه حل :استفاده از یک برچسب جدید به اسم < >spanبرای تعریف یک عنصر داخل یک عنصر بزرگتر. معنی پیش فرض < >spanاین است که محتوی را تغییر نده. ><p> Now is the <span> best time </span> ever! </p اما می توان یک قانون نمایش را به <>span اعمال کرد. >"<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 view page برچسب < >divیک عنصر مفید دیگر است که می توان برای ایجاد یک قسمت با استیل جداگانه از آن استفاده کرد. Web rules of thumb راهنماییهای مفید: از فونت و رنگ بجا استفاده کنید. مثال متن زرشکی را در زمینه صورتی قرار ندهید. از فونتهای نامانوس استفاده نکنید. از تصویر فقط در مواقع لزوم استفاده کنید. وجود تصاویر روشن در پس زمینه ،خوانایی متن را کاهش می دهند. استفاده از تصاویر قابل کلیک بجای دکمه سرعت بارگذاری سایت را کم می کند. به سایز پنجره و فونت برای جانمایی وابسته نشوید. کاربر را اذیت نکنید. پنجره باز شونده اتوماتیک نداشته باشید. تبلیغات زیاد در سایت قرار ندهید. از موسیقی نامانوس استفاده نکنید. یا سندهای بزرگ را به چند صفحه شکنید یا از منو استفاده کنید. فقط از خاصیتهای استاندارد استفاده کنید و سایتتان را با مرورگرهای مختلف تست کنید. از شیوه نامه برای اطمینان از همگونی سایت و ساده شدن تغییرات بعدی استفاده کنید.
سایر • علوم مهندسی • تکنولوژی • کامپیوتر و IT و اینترنت
دانلود پاورپوینت آشنایی با CSS
70,000 تومان