學習了HTML之後就是CSS的學習啦！
有做的不好的地方請多指教 ^ ^ !
1.CSS簡述
- Cascading Style Sheets 層疊樣式表
- 通常存儲在css檔案中
2.層疊次序（優先級）
- 内聯樣式（1000）
- id選擇器（0100）
- class選擇器（0010）
- 标記選擇器（0001）
- 繼承的優先級最低
- ！important 優先級最高
3.文法
- 構成：選擇器，一條或多條聲明
- 屬性與值用冒号隔開，用花括号包圍，用分号結束
- 若屬性為多個單詞，需要用引号隔開
4.選擇器
(1)派生選擇器
通過上下文的關系來确定某個标簽的關系
li a{
color:red;
}
(2)id選擇器
- 使用前要加“#”
<p id = "a">段落</p>
# a{
color:red;
}
- id屬性隻能在每個HTML文檔中出現一次
- id選擇器作為派生選擇器可以多次被使用，id也可以單獨發揮作用
(3)元素選擇器
也成為标記選擇器
p{
margin-left:10px;
}
(4)類選擇器
- 普通情況
<p class="one">段落</p>
*.one{
color:red;
}
或
.one{
color:red;
}
-
多類選擇器
class中可能包含詞清單
html:
<p class ="is me">是我</p>
css:
.is .me{
color:red
}
-
類選擇器與Id選擇器
與類不同，id僅會使用一次
id選擇器不能使用詞清單
id能包含更多含義
(5)屬性選擇器
- 根據元素的屬性以及屬性值來選擇元素（在XML文檔中十分有用）
*[title]{
color:black;
}
*[href][title]{
color:red;
}
(6)後代選擇器
h1 a{
color:red;
}
- 左邊的選擇器包含兩個或多個，用空格隔開
- 解釋：“作為h1元素後代的任何a元素”或“包含a的所有h1會把樣式應用到該a标簽”
(7)子代選擇器
選擇作為某個元素子元素的元素
h1 > strong{ //h1和strong之間的空格任意，可以沒有空格
color:red;
}
(8)相鄰兄弟選擇器
選擇器緊接在前h1後的p，而且它們擁有同一個父級
h1 + p{
margin:10px;
}
(9)僞類選擇器
用于添加特殊的效果
比如，連結：
a:link{ color:#cccddff;} //未通路時連結的樣式
a:visited{ color:#ff00090;} //已通路時連結的樣式
a:hover{ color:#ff00ff;} //滑鼠停止在連結上的樣式
a:active{ color:#cc1100;} //被激活的連結添加樣式
//a:hover 必置于a:link 和 a:visited 之後；a:active必須置于a:hover之後
其它：
:focus 擁有鍵盤輸入焦點的元素添加樣式
:first-child 像元素的第一個子元素添加樣式
:lang 像帶有指定lang屬性的元素添加樣式
(10)僞元素選擇器
:first-letter 文本的第一個字母
:first-line 文本首行添加樣式
:before 元素之前添加内容
:after 元素之後添加内容
(11)選擇器分組
- 被分組的選擇器可以擁有相同的屬性
- 既可以對選擇器分組，也可以對聲明進行分組
5.定位
(1)框的重要性
塊級元素顯示的是一塊内容“塊框”
行内元素顯示的是“行内框”
使用display能改變生成框的類型
(2)相對定位
- 通過設定垂直或水準位置，讓它相對于起點（原始位置）浮動
- 無論是否移動，元素仍然占據原來的空間，移動元素後會遮擋其它框
(3)絕對定位
元素框在文檔流中完全删除，原來的元素在文檔流中占用的空間被關閉，且定位後會産生塊級框。
(4)它們的差別
- 絕對定位元素的位置相對于最近的已定位元素，如果沒有就相對于最初的塊級框
- 絕對定位于文檔流無關，可以覆寫頁面上的其他元素，通過z-index來控制元素上下的次序。而相對定位還處于原文檔流當中。
(5)浮動
- 浮動框不在文檔的普通流中
- 浮動框會受包含框的大小影響，浮動元素高度不同會受到影響（卡住）
- 浮動框可以使文本圍繞圖像，阻止行框圍繞浮動框需要對該框使用clear屬性，clear值可以是left，right，both或none（表示框的哪邊不應該挨着浮動）
- 為了讓浮動的元素被包圍，需要用clear在包圍元素中，是以添加一個新的空div并清理它
- 對容器進行浮動，這樣下一個元素就會收到影響，解決對布局中所有進行浮動，最後使用适當有意義元素對浮動清理
文字有些多，還有許多不足的地方，希望後期能做出一個相對應執行個體練習！ ^ ^
![導航欄（javascript和jQuery）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)