标签：vcl lock ali har ora jpg html标签 背景图像 下划线
1.CSS选择器标签选择器(根据指定的标签名，在当前界面中找到所有该名称的标签，然后设置属性.)
格式:
标签名{
属性：值；
}
div{
font-size:24px;
color:#f00;
}注意点：
1> 标签选择器选定的是当前界面中所有该名称的标签，而不能单独选定某一标签；(div标签可直接应用上面div标签选择器内规定的属性)
2> 标签选择器无论标签藏得多深都能找到；
3> 只要是HTML中的标签都可以作为标签选择器。
id选择器:根据指定的id名称找到对应的标签，然后设置属性。(注意事项:一个标签同时被标签选择器和id选择器同时选中,id选择器的优先级要高于标签选择器!!!)
格式：
#id{
属性：值；
}
#div1{
font-size:36px;
color:#0f0;
}
在标签中设置id=div1;即可应用id选择器内的属性;注意点：
1> 每一个HTML标签都有id属性，也就是说每个标签都可以设置id；
2> 在同一个界面中id是不可重复的；id选择器只会被使用一次,一般用于动态更新内容使用
3> 在编写id选择器的时候id前一定要加#；
4> id的名称是有一定的规范的。
4.1> id的名称只能有字母、数字、下划线组成；
4.2> id名不能以数字开头；
4.3> id名不能是关键字；
4.4> 在企业开发中一般如果仅仅是为了设置样式，我们不会使用id，因为id是为了给js使用的。
类选择器:根据指定的类名称找到对应的标签，然后设置属性。
格式:
.类名{
属性：值；
}
.divCls{
font-size:36px;
color:#f00;
}
调用时只需要在标签内设置class="divCls",便可以调用;
注意点：
1> 每一个HTML标签都有class属性，也就是说每个标签都可以设置class；
2> 在编写id选择器的时候class前一定要加.；
3> 类名的命名规范和id命名规范是一样的；
4> 类名就是专门给某个特定的标签设置样式的；
5> 在HTML中每个标签都可以同时绑定多个类名,同一个页面下,多个标签可以指定同名的class属性。
格式：
<标签名称 class="类名1 类名2 ...">
并集选择器:给所有选择器选中的标签设置属性。
并集选择器是用来找出所有的满足和符合标签1或标签2的标签。如：标签1，标签2，标签3{ 属性：值；}，最终系统找出所有的 满足标签1或标签2或标签3的标签。满足标签1的标签数量+满足标签2的标签数量+满足标签3的标签数量=系统选出的标签数量。
格式：
选择器1，选择器2{
属性：值；
}
#div1,.divCls{
background-color:#f00;
}交集选择器 : 格式中标签与标签之间没用任何东西，交集选择器选择出符合和满足各个标签属性的标签：如：标签1标签2标签3{属性：值；} 最终找到同时满足标签1，标签2，标签3的标签。
#div1 span{
font-size: 24px;
color: #0f0;
}
通配选择器
全部选中,给指定选择器后面所有的选择器中的标签设置属性。
格式：
选择器1~选择器2{
属性：值；
}
*.div{
font-size: 24px;
color: #0f0;
} 给所有class=div的标签设置属性; 2.锚伪类选择器
a:link 没有访问过的状态
a:visited 鼠标访问过的状态,点击了,并且松开的状态
a:hover 鼠标经过的状态
a:active 鼠标激活状态,鼠标点击,但是没有松开的状态
注意:
锚伪类要循环显示一种效果:四个状态必须有先后循环
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。3.伪类练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类练习</title>
<style type="text/css">
tbody tr:hover{
background-color: #00f;
}
</style>
</head>
<body>
<table border="1px" align="center" width="400px" height="300px">
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>张三</td>
<td>计算机1班</td>
<td>87</td>
</tr>
<tr align="center">
<td>李四</td>
<td>计算机2班</td>
<td>89</td>
</tr>
<tr align="center">
<td>王五</td>
<td>计算机1班</td>
<td>98</td>
</tr>
</tbody>
</table>
</body></html>
body标签中thead(头)、tbody(身体) 以及 tfoot(脚);
4.CSS文本
color：文本颜色属性；
line-height:行高；
letter-spacing：字符间距；
text-align: 文本的对其方式；
word-spacing:字间距:默认两个组成的叫单词，文本中用空格隔开，即可看出和字符间距不同的效果；
text-decoration：文本修饰
常用的属性值
underline:下划线
none:没有下划线
overline:上划线
line-through:中划线
如例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css文本</title>
<style type="text/css">
body{
color: #FFFF00;
line-height: 200px;
letter-spacing: 50px;
text-align: center;
word-spacing: 100px;
text-decoration: line-through;
}
</style>
</head>
<body>
我爱 编程<br />
我爱生活
</body>
</html>
5.CSS字体
font-family:字体系列(类型) 系统默认是宋体；
font-size:字体尺寸；
font-style:字体的样式；
常用的属性值:
normal:标准的字体样式；
italic:斜体；
font-wight:设置字体的粗细；
CSS字体的简写属性
font:italic bold 36px "黑体" ;（注意顺序）
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css字体</title>
<style type="text/css">
/body{
font-family: "黑体";
font-size: 50px;
font-style: italic;
font-weight: bold;
}/
body{
font: italic bold 50px "黑体";
}
</style>
</head>
<body>
中华万岁！天佑中华！
</body>
</html>
6.css背景
背景颜色:background-color；
背景图片:background-image:
属性:url指定图片的路径
background-image: url(img/mm.jpg)；
background-repeat:设置背景图片是否重复以及如何重复
常用的属性值:
默认值:repeat:x轴和y轴重复；
repeat-x:背景图片水平方向重复；
repeat-y:y轴重复；
no-repeat:不重复 ；
background-position 设置背景图像的起始位置。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景</title>
<style type="text/css">
/ body{}
background-color: #FF69B4;
background-image: url(img/9a105fb668f52d078c705e9897b7fae4.jpg);
background-repeat: ;
background-position: top ;
}/
body{
background: #FF69B4 url(img/9a105fb668f52d078c705e9897b7fae4.jpg) top center;
}
</style>
</head>
<body>
</body>
</html>
7.css列表
list-style-type:设置列表项前面的类型；
给列表项前面的类型自定义
list-style-image
常用的属性值:URL 图像的路径
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css列表</title>
<style>
body ul{
list-style-type: none;
list-style-image: url(img/9a105fb668f52d078c705e9897b7fae4.jpg);
}
</style>
</head>
<body>
XX学生管理系统:
<ul>
<li>学生管理</li>
<li>选课管理</li>
<li>教师管理</li>
</ul>
</body>
</html>
8.css表格
body table{
将表格的边框合并为单一的框
属性值:collapse
border-collapse :collapse;
}
例如：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>CSS表格</title>
<style type="text/css">
body table{
/*将表格的边框合并为单一的框
属性值:collapse
9.css边框
边框的颜色
border-color:边框颜色的简写属性
1)边框颜色默认的顺序:上 右 下 左
2)边框颜色某一边如果没设置,那么取对边的颜色
border-color:#f00;
border-left-color:#f00 ;
border-right-color:#00f ;
border-top-color: #0f0;
border-bottom-color: #FF0;边框的宽度
border-width
边框宽度的简写属性
border-width: 10px;
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;一块标签,要想显示边框的效果,必须指定属性:边框的样式:
border-style:边框样式的简写属性
border-style: solid;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;
一个div显示边框,使用boder的简写属性
border:1px solid #000 ;
width: 50px;
height: 50px; 10.盒子模型
盒子模型:div块标签+css进行网页布局
一个盒子属性:
容量:就是给div块标签指定的宽度和高度padding-left ：让盒子内边距向右移动；
margin-bottom：设置一个下外边距；
例如：
TYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>