一、使用CSS
1、为什么要使用css:统一网站风格
csss使用语法：
选择器{
属性1:属性值;
属性2:属性值;
}
dome1.html 文件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="demo1.css">
</head>
<body>
<!--span元素是用于存放一小块内容-->
<span class="css1">标题一</span><br />
<span class="css2">标题二</span><br />
<span class="css3">标题三</span><br />
<span class="css4">标题四</span><br />
<span class="css5">标题五</span><br />
<br />
</body>
</html>
css文件：
.css1{
font-size:14px;
color:red;
}
.css2{
font-size:20px;
color:green;
font-style:italic;
}
.css3{
font-size:30px;
color:silver;
font-weight:bold;
}
.css4{
font-size:25px;
color:yellow;
text-decoration:underline;
}
.css5{
font-size:20px;
background-color:blue;
}
效果：
2、css使用滤镜效果：
代码如下：
<html>
<head>
<title>css滤镜效果以及css内部链接的使用</title>
<!--css内部链接用style标签对,只能对本页面有效-->
<style type="text/css">
/*这里用到伪类展示移动过程中的效果*/
a:link img{ /*a:link:设置 a 对象在未被访问前的样式。*/
filter:gray;
}
a:hover img{ /*a:hover:设置对象在其鼠标悬停时的样式。*/
filter:"";
}
</style>
</head>
<body>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
</body>
</html>
二、常用4中选择器
1、类选择器(class选择器)
基本使用
.类选择器{
属性名：属性值;
.........
} 如：
.style1{
/*css文件是通过这样定义注释的*/
400px;
height:350px;/*特别要注意分号不能少，一定要写一个分号，少了分号后面就有问题了*/
border:1px solid red;
background-color:silver;
margin-left:100px;
margin-top:50px;
padding-top:20px;
padding-left:30px;
}
2、id选择器
基本使用
#id选择器{
属性名：属性值;
.........
}
如：
#mid{
font-size:12px;
color:red;
}
3、html元素选择器
使用方法
html元素{
属性名：属性值;
.........
}
如
p{
background-color:red;
font-size:14px;
}
table{
border:1 solid;
}
小技巧：对html元素样式分类：在2个p标签中的内容显示方式不一样。下面看看是怎么实现的（注意看标有红颜色字体）？
<html>
<head>
<title>使用html选择器对2个p元素内容不同处理方法</title>
<!--css内部链接用style标签对,只能对本页面有效-->
<style type="text/css">
p.num{
font-size:14px;
color:red;
text-decoration:underline;
}
p.num1{
font-size:16px;
color:green;
}
</style>
</head>
<body>
<p class="num">他说，对这个事，重庆市委态度是鲜明的，措施是坚决的，就是要依法办事</p>
<p class="num1">他强调，对涉及不雅视频的干部，要深入调查，切实以事实为依据，以法律为准绳，去依法依纪处理，最后的处理结果，有关部门会适时向外界公布</p>
</body>
</html>
效果图：
4、通配符选择器
该选择器可以用到所有的html元素,但是其优先权最低
优先级表现：Id选择器> class选择器> html选择器> 通配符选则器
css 文件可以使用在各种文件(如html，php，…)
*{
属性名：属性值;
.........................
}
小技巧：让body内容在网页一直居中显示：
body{
border:1px solid red;
500px;/*高与宽自己需求设定*/
height:500px;
margin:0px auto;
}