在上一篇中我們提到學習HTML5要具備CSS的知識，在頁面設計的時候HTML5知識頁面的布局與結構，要實現一個很絢麗漂亮的介面就需要藉助CSS。下面我們先來回顧一下css2的基本用法，再來看看和css3的關係與區別。
1、css是什嗎？
cascading stylesheet(階層式樣式表)，為網頁提供表現形式。按照w3c規範，設計一個網頁，應該將網頁的資料與結構寫在html檔案裡，網頁的外觀寫在css檔案裡，而網頁的行為寫在.js檔案裡。這樣做的目的是將網頁的資料，外觀，行為分離，方便代碼的維護。
2、css選取器：
（1）標記選取器（簡單選取器）
（2）class選取器
.s1{屬性名稱：屬性}還有一種有名字的class選取器，如下：
div.s1{font-size;120px;}（3）id選取器
#d1{font-size:italic;font-weight:900;}（4）選取器分組
h1,h2,h3{ //用逗號隔開color:bllue;}（5）選取器的派生
#d2 p{color:red;font-size:300; }CSS中的注釋
/* */樣式的優先順序：
外部樣式，將樣式寫在.css檔案裡
內部樣式，將樣式寫在.html檔案裡
內聯樣式，將樣式寫在style=" "裡面
發生衝突時：外部樣式<內部樣式<內聯樣式。
CSS中的兩個關鍵屬性：
（1）display屬性
有三個值：none 不顯示
<html><!--display屬性--><head><style>#d1{width:200px;height:100px;background-color:red;color:white;font-size:40px;display:inline; <!--改為行內標記-->}#d2{width:200px;height:100px;background-color:blue;color:white;font-size:40px;display:inline; <!--改為行內標記-->}</style></head><body><div id="d1">hello1</div><!--標記d2會另起一行顯示--><div id="d2">hello2</div></body></html>
常用屬性如下：
(1)文本相關的屬性font-size:30px; //字型大小font-style:normal(正常)/italic(斜體)font-weight:800; //100－900 (粗細)font-family:"宋體"; //字型text-align:left/center/right; //文本水平對齊line-height:30px; //行高 一般和容器的高值相同放在中間cursor:pointer/wait; //游標的形狀 (2)背景相關的屬性background-color:red; //背景顏色background-color:#88eeff; //RGB格式顏色設定background-color:rgb(100,100,100); //可以用這種格式輸入十進位數的顏色值background-image:url(images/t1.jpg); //背景圖片background-repeat:no-repeat/repeat-x/repeat-y; //平鋪方式background-position:30px 20px; //(水平和垂直)背景位置background-attachment:scroll(預設)/fixed; //依附方式 也可以同時設定背景的多個特性：background:背景顏色 背景圖片 平鋪方式 依附方式 水平位置 垂直位置； (3)邊框border-left:1px solid red;border-right:2px dotted black;border-bottom:border-top:border:1px solid red; (4)定位width:100px;height:200px;margin //外邊距margin-left:20px;margin-right:30px;margin-top:40px;margin-buttom:50px;可以簡化為：margin:top right bottom left; margin:40 30 50 20;padding //內邊距padding-left:padding-right:padding-top:padding-buttom:可以簡化為：padding:top right bottom left;內邊距會將父標記撐開 (5)浮動取消標幟獨佔一行的特性float:left/right; //向左，向右浮動clear:both; //清除浮動的影響 (6)其他list-style-type:none;除掉列表選項的小圓點。text-decoreation:underline; //給文本加底線 (7)串連的偽樣式a:link{color:red} 沒有訪問時a:visited{color:blue} 滑鼠放上時a:action{color:green} 滑鼠點擊時a:hover{color:yellow} 滑鼠離開時
上面是我們以前學的css的基本總結，下面來看一下css3的特點，先開啟css3參考手冊（：）
先看看border-color設定邊框
相關屬性：border-top-color,border-right-color,border-bottom-color,border-left-color
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-color</title><style>div{border: 8px solid #000;-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;padding: 5px 5px 5px 15px;}</style></head><body><div>在Firefox瀏覽器裡能看到邊框色彩坡形效果</div></body></html>
可以從css3.0參考書冊中看到css3增加了很多樣式屬性，我們可以參考該手冊進行比css2更加絢麗的介面效果，如果配合js還可以實現頁面動畫製作。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
