目录
一、滚动条和布局
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>中的“#” 表示链接地址为本页。
