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