|
CSS是Cascading Style Sheets（級(jí)聯(lián)樣式表）的縮寫(xiě)，CSS是一種樣式表語(yǔ)言,，用于為HTML文檔定義布局,。例如，CSS涉及字體,、顏色,、邊距、高度,、寬度,、背景圖像、高級(jí)定位等方面,。它可以省去你大量時(shí)間,，令你可以采用一種全新的方式來(lái)設(shè)計(jì)網(wǎng)站。CSS是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員所必須掌握的,。 為HTML文檔應(yīng)用CSS,，有三種方法可供選擇。下面對(duì)這三種方法進(jìn)行了概括,。我們建議你對(duì)第三種方法（即外部樣式表）予以關(guān)注,。 ● 方法一：行內(nèi)樣式表（style屬性） 為HTML應(yīng)用CSS的第一種方法，是使用HTML屬性style,，將屬性和值放在style屬性中即可,。我們?cè)谏侠幕A(chǔ)之上，通過(guò)行內(nèi)樣式表將頁(yè)面背景設(shè)為紅色： <html> <head> <title>例子</title> </head> <body style="background-color: #FF0000;"> <p>這個(gè)頁(yè)面是紅色的</p> </body> </html> ● 方法二：內(nèi)部樣式表（style元素） 為HTML應(yīng)用CSS的另一種方法,，是采用HTML元素style,，添加在<head></head>元素之間。比如下面這樣： <html> <head> <title>例子</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>這個(gè)頁(yè)面是紅色的</p> </body> </html> ● 方法三：外部樣式表（引用一個(gè)樣式表文件） 我們推薦采用這種引用外部樣式表的方法,。外部樣式表就是一個(gè)擴(kuò)展名為css的文本文件,。跟其他文件一樣，你可以把樣式表文件放在Web服務(wù)器上或者本地硬盤(pán)上,。比方說(shuō)你的樣式表文件名為style.css,。style.css文件的代碼如下例所示： body {background-color: #FF0000;} 在一個(gè)HTML文檔里引用一個(gè)外部樣式表文件（style.css）的方法是：在HTML文檔里創(chuàng)建一個(gè)指向外部樣式表文件的鏈接（link）即可： <link rel="stylesheet" type="text/css" href="style.css" /> 要在href屬性里給出樣式表文件的地址,。這行代碼必須被插入HTML代碼的頭部（header），即放在標(biāo)簽<head>和標(biāo)簽</head>之間： <html> <head> <title>例子</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>這個(gè)頁(yè)面是紅色的</p> </body> </html> 這個(gè)鏈接告訴瀏覽器：在顯示該HTML文件時(shí),，應(yīng)使用給出的CSS文件進(jìn)行布局,。 這種方法的優(yōu)越之處在于：多個(gè)HTML文檔可以同時(shí)引用一個(gè)樣式表。換句話說(shuō),，可以用一個(gè)CSS文件來(lái)控制多個(gè)HTML文檔的布局,。這一方法可以令你省去許多工作。例如,，假設(shè)你要修改某網(wǎng)站的所有網(wǎng)頁(yè)（比方說(shuō)有100個(gè)網(wǎng)頁(yè)）的背景顏色,，采用外部樣式表可以避免你手工一一修改這100個(gè)HTML文檔的工作。采用外部樣式表,，這樣的修改只需幾秒鐘即可搞定——修改外部樣式表文件里的代碼即可,。 CSS可以使用更多的屬性來(lái)定義網(wǎng)頁(yè)的顯示樣式，先來(lái)讓我們看看下面這段沒(méi)有CSS樣式修飾的HTML代碼的顯示效果： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>登錄</title> </head> <body> <div id="box"> <div id="title">登錄</div> <table id="loginTable"> <tr> <td width="90px;"><label for="username">用戶名：</label></td> <td><input type="text" name="username" id="username" style="width: 120px;" /></td> </tr> <tr> <td><label for="password">密碼：</label></td> <td><input type="password" name="password" id="password" style="width: 120px;" /></td> </tr> </table> <br /> <div id="submit"><span style="width: 100px;"> <input type="submit" name="submit" value="登錄" style="width: 80px;"></span> <span> <a href="register.do?method=init">注冊(cè)</a></span></div> </div> </body> </html> 顯示的界面樣式如下所示：
圖3-1 使用CSS之前的頁(yè)面 然后我們?cè)谠擁?yè)面的<head></head>中添加如下的樣式表代碼： <style> body{ margin: 0px; padding: 0px 0px 0px 0px; font-family:Arial,"MS Sans Serif",Tahoma,sans-serif; font-size: 12pt; text-align:center; } #box{ width: 350px; margin:15% auto; background:#f6f8f7 url(images/bottom-left.gif) no-repeat left bottom; padding:0px 0px 20px 0px; border-top: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; } #title{ text-align : left; padding:5px 10px 5px 5px; font-family: Courier, "Courier New", monospace; font-size: 15pt; color: #000033; font-weight :bolder; border-left:1px solid #d1d1d1; } #loginTable{ border:0; margin:0 auto; text-align:left; } #submit{ font-weight:bolder; } input:focus{ background:#ffc; } </style> 經(jīng)過(guò)美化后的效果如圖3-2所示：
圖3-2 使用CSS以后的頁(yè)面 對(duì)比上面兩個(gè)頁(yè)面的代碼,，我們發(fā)現(xiàn),，兩者的唯一區(qū)別就是一個(gè)沒(méi)有使用CSS而另一個(gè)使用了，其余的代碼完全一樣,。由此可見(jiàn)CSS在Web頁(yè)面中發(fā)揮的重要作用,。 |
|
|
