文章目录
1.CSS语法规则
1）选择器： 浏览器根据“选择器”决定CSS样式影响的HTML元素（标签）。
2）属性： 是要改的样式名，并且每个属性都有一个值。
3）多个声明： 如果要定义不止一个声明，则需要用分号将每个声明分开。
4）图示：
5）注释：/* 注释内容*/
2.HTML和CSS的结合方式
2.1结合方式一
1）在标签的style属性上设置"key:value value;"，修改标签样式。
2）需求：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.结合方式一</title>
</head>
<body>
<div style="border:1px solid red;">标签一</div>
<div style="border:1px solid red;">标签二</div>
<span style="border:1px solid red;">标签三</span>
<span style="border:1px solid red;">标签四</span>
</body>
</html>
3）问题： 样式多了，标签多了，代码庞大。可读性差
2.2结合方式二
1）style标签专门用来定义CSS样本代码。
2）需求： 分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.结合方式一</title>
<style type="text/css">
div{
border:1px solid red;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div >标签一</div>
<div >标签二</div>
<span >标签三</span>
<span >标签四</span>
</body>
</html>
3）问题： 只能在同一个页面复用代码，不能在多个页面中复用css代码。
2.3结合方式三
1）link标签专门用来引入CSS样式代码。
2）需求： 分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。
div{
border:1px solid red;
}
span{
border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.结合方式一</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div >标签一</div>
<div >标签二</div>
<span >标签三</span>
<span >标签四</span>
</body>
</html>
3.选择器样式
3.1标签选择器
1）需求： 在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.标签名选择器</title>
<style type="text/css">
div{
border:1px solid yellow;
color:blue;
font-size:30px;
}
span{
border:5px dashed blue;
color:yellow;
font-size:20px;
}
</style>
</head>
<body>
<div >标签一</div>
<div >标签二</div>
<span >标签三</span>
<span >标签四</span>
</body>
</html>
3.2id选择器
1）需求： 分别定义两个div标签，第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线。
第二个div标签定义id为id002，然后根据id属性定义css样式修改的字体颜色为红色，字体大小为20个像素，边框为5像素蓝色点线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.id选择器</title>
<style type="text/css">
#id001{
border:1px solid yellow;
color:blue;
font-size:30px;
}
#id002{
border:5px dotted blue;
color:yellow;
font-size:20px;
}
</style>
</head>
<body>
<div id="id001">标签一</div>
<div id="id002">标签二</div>
</body>
</html>
3.3class类选择器
1）需求1： 修改class属性值为class01的sapn或div标签，字体颜色为蓝色，，字体大小30个像素。边框为1像素黄色实线。
2）需求2： 修改class属性值为class02的div标签，字体颜色为灰色，，字体大小26个像素。边框为1像素红色实线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.class选择器</title>
<style type="text/css">
.class01{
border:1px solid yellow;
color:blue;
font-size:30px;
}
.class02{
border:1px solid red;
color:grey;
font-size:26px;
}
</style>
</head>
<body>
<div class="class01">标签一</div>
<div class="class02">标签二</div>
<span class="class01">标签三</span>
</body>
</html>
3.4组合选择器
1）**需求：**修改class="class01"的div标签和id="id01"所有的span标签，字体颜色为蓝色，字体大小为20个像素，边框为1像素黄色实线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.组合选择器</title>
<style type="text/css">
.class01,#id01{
border:1px solid yellow;
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<div class="class01">标签一</div>
<span id="id01">标签二</span>
</body>
</html>
4.CSS常用样式
1）颜色：
color: red;
2）宽度：
width: 300px;
3）高度：
heigth: 400px;
4）背景颜色：
background-color: #0F2D4C
5）字体样式：
color: #FF0000; 字体颜色红色
font-size: 20px; 字体大小
6）红色1像素实线边框：
border: 1px solid red;
7）DIV居中：
margin-left: auto;
margin-right:auto;
8）文本居中：
text-align: center;
9）超链接去掉下划线：
text-decoration: none;
10）表格细线：
table{
border:1px solid black; /*设置边框*/
border-collapse:cooapse;/*将边框合并*/
}
td{
border:1px solid black;/*设置边框*/
}
11）列表去除修饰：
ul{
list-style:none;
}