文章目录
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;
}