目錄
一、滾動條和佈局
1、滾動條的基本語法
滾動條的設置主要在顏色上，如設置滾動條的亮邊框、暗邊框、拖動區顏色等屬性。
2、對象可見性
設置對象可見性，有兩種屬性設置方法：display和visibility。
（1）設置對象是否隱藏
display:block | none | inline | inline-block | list-item
（2）設置對象是否顯示
屬性visibility用來設置是否顯示對象。
visibility: inherit | visible |hidden
visibility與display的區別：
- visibility表示的對象，不管是否顯示，都在網頁中存在一個空間。
- dispaly表示的對象，顯示有空間，隱藏時網頁中的空間也隨之消失。
應用舉例：
#vis1
{
visibility: visible;
border: 1px solid red;
}
#vis2
{
visibility: hidden;
border: 1px solid red;
}
<body>
<!--div id="div1">獲取元素測試</div-->
<div id="vis1">
<img src="image/表情.jpg" >
</div>
<div id="vis2">
<img src="image/表情.jpg" >
</div>
</body>
二、選擇符
選擇符的作用是使得CSS與HTM的標記聯繫。選擇符分成分多鐘，有通配選擇符、類型選擇符、ID選擇符等。
1、通配選擇符
通配選擇器用一個星號（*）表示。單獨使用時，這個選擇器可以與文檔中的任何元素匹配。
應用舉例
*{
background: #666666;
border: 1px solid red;
}
<body>
<div>
<p>通配選擇符測試</p>
</div>
</body>
該案例中對層和段落都進行了背景顏色和紅色實線設置。
2、類型選擇符
類型選擇符是指以對象模型（DOM）作爲選擇符，即選擇某個HTML標記爲對象，設置樣式規則。
應用舉例：
p{
border: 1px solid red;
}
<body>
<p>類型選擇符測試</p>
</body>
3、包含選擇符
包含選擇符可以對某個容器層的子層控制，使其他同名的對象不受該規則影響。
語法規則：
E1 E2
{
/*對子層控制*/
}
應用舉例
table td{
width: 200px;
height: 50px;
}
td p{
border: 1px solid red;
}
<body>
<table border="1">
<tr>
<td>表元一</td><td><p>表元二</p></td>
</tr>
<tr>
<td>表元三</td><td><p>表元四</p></td>
</tr>
</table>
</body>
4、佈局選擇符
（1）ID選擇符
ID標識符在樣式中出現兩次或兩次以上。標識符一“#”開頭。
應用舉例：
#id1{
width: 200px;
height: 60px;
border: 1px solid blue;
}
<body>
<div id="id1">
id1層
</div>
</body>
（2）類選擇符
類選擇符也叫作CLASS選擇符，可以在文檔中使用多次。標識符一“.”開頭。
應用舉例:
.id1{
width: 200px;
height: 60px;
border: 1px solid blue;
}
<body>
<div class="id1">
id1層
</div>
<div class="id1">
id1層
</div>
</body>
5、分組選擇符
分組選擇符指的是對多個標記設置同樣的樣式，在不同的類型中，表示同樣的樣式。
如對td，div，a，body標記的樣式設置成字體大小爲14像素。
td,div,a,body
{
font-size:14px;
}
6、僞類
僞類：同一個標籤，根據其不同的種狀態，有不同的樣式。這就叫做“僞類”。僞類用冒號來表示。
僞類最大的功能是對鏈接在不同狀態下定義不同的樣式。在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以以不同的方式顯示。
僞類的語法格式：
選擇符：僞類
{
屬性：值
}
選擇符如鏈接的<a>，僞類類型有四種，link,hover，active，visited。
應用舉例：
a:link /*僞類鏈接狀態*/
{
color: red;
}
a:hover /*鼠標光標置於鏈接上的狀態*/
{
color: blue;
}
a:active /*獲得焦點的狀態*/
{
color: orange;
}
a:visited /*訪問過後的顏色*/
{
color: yellow;
}
<body>
<a href="#">僞類測試</a>
</body>
<a href="#">僞類測試</a>中的“#” 表示鏈接地址爲本頁。