- 如果某個(gè)屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來，例如：外部樣式表有針對h3的選擇器，里面包含三個(gè)屬性
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而內(nèi)部樣式表也有針對h3的選擇器，包含兩個(gè)屬性
h3 {
text-align: right;
font-size: 20pt;
}
此時(shí)h3的樣式就會變成
color: red;
text-align: right;
font-size: 20pt;
背景
- 添加背景圖片 ：background-image
p.flower {background-image: url(/i/eg_bg_03.gif);}
- 背景平鋪：通過background-image將一張圖片平鋪在整個(gè)頁面上碎浇，repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪璃俗。
- 背景定位：通過background-position確定背景在頁面中的位置奴璃，可以通過關(guān)鍵字、百分?jǐn)?shù)旧找、長度值確定其位置溺健。
文本
- 縮進(jìn)文本：text-indent，可以通過設(shè)置值钮蛛、百分比來實(shí)現(xiàn)鞭缭，可以輸入負(fù)值。
p {text-indent: -5em;}
p {text-indent: 20%;}
- 對齊方式：text-align魏颓，left岭辣、right 和 center 會導(dǎo)致元素中的文本分別左對齊、右對齊和居中甸饱。
- 字符間隔：word-spacing
- 文本修飾：text-decoration沦童，他有5個(gè)值，underline 會對元素加下劃線叹话，就像 HTML 中的 U 元素一樣偷遗。overline 的作用恰好相反，會在文本的頂端畫一個(gè)上劃線驼壶。值 line-through 則在文本中間畫一個(gè)貫穿線氏豌，等價(jià)于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍热凹，類似于 Netscape 支持的頗招非議的 blink 標(biāo)記泵喘。
- 設(shè)置鏈接樣式：在為鏈接設(shè)置樣式時(shí)，必須按照以下順序般妙。
a:link - 普通的纪铺、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點(diǎn)擊的時(shí)刻
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */
CSS定位
- CSS通過position屬性來來定位，position屬性共有4個(gè)值碟渺，作用分別為：
static：元素框正常生成鲜锚。塊級元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個(gè)或多個(gè)行框芜繁，置于其父元素中攒霹。
relative：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀浆洗，它原本所占的空間仍保留。
absolute：元素框從文檔流完全刪除集峦，并相對于其包含塊定位伏社。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉塔淤，就好像元素原來不存在一樣摘昌。元素定位后生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框高蜂。
fixed：元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute聪黎，不過其包含塊是視窗本身。
CSS選擇器
- 元素選擇器：為HTML的某一個(gè)元素添加樣式备恤，如：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
- 選擇器分組：將多個(gè)具有相同樣式的元素壓縮到一起稿饰，如：為h1，h2露泊，h3設(shè)置一個(gè)相同的樣式
h1, h2, h3, h4, h5, h6 {color:blue;}
- 類選擇器：通過HTML的class值來定位樣式喉镰，可以被多個(gè)元素調(diào)用；
- ID選擇器：通過HTML的id值來定位樣式惭笑，因?yàn)閕d值是唯一的侣姆，所以該樣式只能被引用一次；
- 后代選擇器：根據(jù)HTML中的某些結(jié)構(gòu)為其定義樣式沉噩，如為ul下的em定義一個(gè)樣式捺宗，那么多有ul下的em都會擁有這個(gè)樣式，不管兩元素之前間隔多少層川蒙；
- 子元素選擇器：如果不希望像后天選擇器一樣蚜厉，所有的后臺都添加樣式，那么就應(yīng)該用子元素選擇器派歌；
h1 > strong {color:red;}
表示只有好h1下的strong才會被設(shè)置為紅色弯囊；
CSS對齊方式
- 水平對齊：對于塊級元素來說，可以通過margin來設(shè)置對齊胶果；
//規(guī)定的是均等地分配可用的外邊距 結(jié)果就是居中的元素
.center
{
margin-left:auto;
margin-right:auto;
}
- 左右對齊：使用position屬性
.right
{
position:absolute;
}
- 分別設(shè)置左和右對齊：float
.center
{
float:right;
float:left
}
- CSS尺寸
height：設(shè)置元素的高度匾嘱。
line-height：設(shè)置行高。
max-height：設(shè)置元素的最大高度早抠。
max-width：設(shè)置元素的最大寬度霎烙。
min-height：設(shè)置元素的最小高度。
min-width：設(shè)置元素的最小寬度。
width：設(shè)置元素的寬度悬垃。
CSS應(yīng)用
- 導(dǎo)航欄設(shè)置
<!DOCTYPE html>
<html>
<head>
<h1>導(dǎo)航</h1>
<style type="text/CSS">
/* 去掉圓點(diǎn)游昼，刪除外邊距 */
ul {
list-style-type:none;
margin:0;
padding:0;
}
/* 導(dǎo)航欄設(shè)置為橫向 */
li {
display:inline;
float:left;
}
/* 整個(gè)鏈接塊點(diǎn)擊都可以 */
a {
display:block;
width:60px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">資源</a></li>
<li><a href="#">成員</a></li>
<li><a href="#">活動</a></li>
<li><a href="#">消息</a></li>
<li><a href="#">詳情</a></li>
</ul>
</body>
</html>
image.png
