屬性選擇符：
body內的代碼如下：
<a href="##" class="columnNews">我的背景想變成紅色</a> <a href="##" class="columnVideo">我的背景想變成紅色</a> <a href="##" class="columnAboutUs">我的背景想變成紅色</a><br/> <a href="1.doc">我的背景想變成綠色</a> <a href="2.doc">我的背景想變成綠色</a><br/> <a href="##" title="this is a box">我的背景想變成藍色</a> <a href="##" title="box1">我的背景想變成藍色</a> <a href="##" title="there is two boxs">我的背景想變成藍色</a>
<style type="text/css"></style>中代碼如下：
E[att] 選擇具有att屬性的E元素。
<style type="text/css">
a[class]{
background-color: red; /*含class屬性的背景顏色變紅*/
}
</style>
E[att="val"] 選擇具有att屬性且屬性值等於val的E元素。
a[class="columnAboutUs"]{
background-color: red; /* class屬性且屬性值等於columnAboutUs的a元素背景變紅。 */
}
E[att~="val"] 選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素。
a[class~="columnAboutUs"]{ background-color: red;/*選擇具有class屬性且屬性值為一用空格分隔的字詞列表，其中一個等於columnAboutUs的a元素（包含只有一個值且該值等於columnAboutUs的情況）。*/
}
E[att^="val"] 選擇具有att屬性且屬性值為以val開頭的字符串的E元素。
a[class^="col"]{ background-color: red; /*class屬性且屬性值為以col開頭的字符串的a元素*/ }
E[att$="val"] 選擇具有att屬性且屬性值為以val結尾的字符串的E元素。
a[class$="s"]{ background-color: red; /*class屬性且屬性值為以s結尾的字符串的a元素的背景色為紅色。*/ }
E[att*="val"] 選擇具有att屬性且屬性值為包含val的字符串的E元素。
a[class$="s"]{ background-color: red; /*class屬性且屬性值為包含s的字符串的所有a元素的背景色為紅色。*/ }
E[att|="val"] 選擇具有att屬性且屬性值為以val開頭並用連接符"-"分隔的字符串的E元素。
a[class|="columnNews"]{color:red}
字體樣式：
1、 font-family
p{
font-family:宋體;
}
2、font-size
p{ font-size:14px;/*字體大小：14px*/
}
3、 font-weight
p{ font-weight:bold;/*加粗*/
}
4、 font-style
p{
font-style:italic;/*斜體*/
}
line-height：16px; 是行高的意思。這里的意思是行高是16px;
5、 font
可以和上面的幾個字體樣式縮寫：p { font:italic bold 14px/16px 宋體}
6、color
p{ color: red/*字體顏色為紅色*/ }
7、 text-decoration
控制文本裝飾線條
屬性值有：none（取消默認值下划線）underline（下划線）overline（上划線）line-through（刪除線）
<style type="text/css"> p:first-of-type{ text-decoration: overline; /*同類型第一個p標簽為上划線*/ } p:nth-of-type(2){ text-decoration: line-through; /*同類型第二個p標簽為刪除線*/ } p:last-of-type{ text-decoration: underline; /*同類型最后一個p標簽為下划線*/ } </style>
<body>
<p>上划線</p> <p>刪除線</p> <p>下划線</p>
</body>
8、 text-shadow
<style type="text/css"> p{ text-shadow:-5px 5px 10px red; font-size: 25px; } span{ text-shadow:5px 5px 2px #000; } </style>
<body> <p> 我是有陰影的p標簽 <span>我也有陰影</span></p> <body>
效果如下：
9、 width （寬度）
比如：
p{width:100px;}
div{width:100px;}
10、 height（高度）
比如：
p{height:100px;}
div{height:100px;}
11、 margin （外邊距）
margin-top 設置上邊的外邊距
margin-bottom 設置上邊的外邊距
margin-left 設置上邊的外邊距
margin-right 設置上邊的外邊距
div{ width:100px; height:100px; margin-top:5px;}
縮寫型式：
margin ：上邊距(px) 右邊距(px) 下邊距(px) 左邊距(px)
margin ：上下邊距(px) 左右邊距(px)
margin ：上邊距(px) 左右邊距(px) 下邊距(px)
div{ width:100px; height:100px; margin:5px 6PX 7PX 8PX;}
div{width:100px; height:100px; margin:0 auto}
div{width:100px; height:100px; margin-left:auto; margin-right:auto}
以上兩個都是表示居中的意思
12、 padding（內邊距）
padding-top 設置上邊的內邊距
padding-bottom 設置上邊的內邊距
padding-left 設置上邊的內邊距
padding-right 設置上邊的內邊距
div{ width:100px; height:100px; padding-top:5px;}
縮寫型式：
padding：上邊距(px) 右邊距(px) 下邊距(px) 左邊距(px)
padding：上下邊距(px) 左右邊距(px)
padding：上邊距(px) 左右邊距(px) 下邊距(px)
div{ width:100px; height:100px; padding:5px 6PX 7PX 8PX ;}
pading：5px;（上右下左的內邊距都是5px。）
以下是一個有margin和padding的一個例子：
<style type="text/css">
.box{ width: 150px; height: 150px; background-color: #ccc; font-size: 25px; border:3px solid red; padding-top: 50px; padding-left: 50px; margin-left: 200px; margin-top: 200px; }
</style>
<body> <div class="box"> 我是內容</div> </body>
