1、CSS样式
方式一：在head标签中增加style标签，在style标签中写CSS样式
方式二：在body中，直接在使用的标签中增加style属性，进行CSS编写
方式三：通过link标签引入写好的CSS样式表
<link rel="stylesheet" href="xx.css">
接下来讲的都是方式一
2、ID选择器
ID选择器以#号来定位，所以在style标签中写样式时，要以#开头,一个HTML页面不可以存在相同的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
#i1{
height: 100px;
width:100px;
background: red;
}
</style>
</head>
<body>
<!--id选择器，以#来定位 一个html页面不可以存在相同id-->
<div id="i1"></div>
</body>
</html>
上面这段代码通过ID选择器定位到了i1这个CSS样式，对整个div进行了CSS样式附着，浏览器显示一个100*100的红色背景的方框：
3、class选择器
class选择器以.定位，一个HTML页面中可以存在相同的class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.c1{
height: 100px;
width:100px;
background: blue;
}
</style>
</head>
<body>
<!--class选择器，以.来定位,一个html页面不可以存在相同class-->
<div class="c1"></div>
</body>
</html>
上面这段代码通过class选择器定位到了c1这个CSS样式，对整个div进行了CSS样式附着，浏览器显示一个100*100的蓝色背景的方框：
4、标签选择器
通过标签名定位查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div{
height: 100px;
width:100px;
background: pink;
}
</style>
</head>
<body>
<!--标签选择器 当前html页面div都会受到影响-->
<div></div>
<div>ashd</div>
</body>
</html>
面这段代码通过div标签选择器找到这个CSS样式，对整个div进行了CSS样式附着，整个HTML页面的所有div都要受影响。浏览器显示一个两个100*100的粉色背景的方框：
5、标签层级选择器
如果我们要给div标签中的一个span标签的内容进行样式附着，那么我们就需要用到标签层级选择器
标签层级选择器写的时候，各层级标签用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div span{
height: 100px;
width:100px;
background: pink;
}
</style>
</head>
<body>
<!--标签层级选择器-->
<div>
<span>大师兄</span>
<span>测试</span>
</div>
<div>
<span>测试1</span>
</div>
<span>测试3</span>
</body>
</html>
div下所有span标签的内容都使用这个css样式，但是非div层级下的span标签不会使用这个样式，浏览器显示，如图所示，只有测试3这个内容不会使用这个样式：
6、class层级选择器
通过class标签选择器定位第一级，再通过层级选择器定位第二层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.c2 span{
background: pink;
}
</style>
</head>
<body>
<!--class层级选择器-->
<div class="c2">
<span>测试</span>
</div>
</body>
</html>
因为span标签是行内标签，所以设置宽和高也没有什么用，所以上面这段代码里的样式就没加宽和高，界面显示如下：
7、id层级选择器
通过ID标签选择器定位第一层，在通过层级选择器定位第二层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
#i2 span{
background: pink;
}
</style>
</head>
<body>
<!--id层级选择器-->
<div id="i2">
<span>测试</span>
</div>
</body>
</html>
界面显示与6的class层级选择器相同
8、ID组合选择器
ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id i3 i4 i5 共用一套css样式 组合 通过逗号间隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
#i3,#i4,#i5{
height: 100px;
width: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="i3"></div><br>
<div id="i4"></div><br>
<div id="i5"></div>
</body>
</html>
界面显示三个并列的100*100的粉色背景框。
9、class组合选择器
class组合选择器，应用于以class选择器进行css样式设置的，可以通过class c3 c4 c5 共用一套css样式 组合 通过逗号间隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.c3,.c4,.c5{
height: 100px;
width: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="c3"></div><br>
<div class="c4"></div><br>
<div class="c5"></div>
</body>
</html>
界面显示与ID组合选择器的一样
10、属性选择器
属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div[name=‘dsx‘]{
background-color: #00c2c9;
}
</style>
</head>
<body>
<div name="dsx">测试中</div>
</body>
</html>
以上代码时为div中的name属性附着样式，因为未设置宽和高，div又是块级标签，所以会背景颜色会占满整行，界面显示如下：
原文地址：https://www.cnblogs.com/emilyliu/p/9206691.html