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又是块级标签，所以会背景颜色会占满整行，界面显示如下：
HTML、CSS基础知识（三）
原文地址：https://www.cnblogs.com/emilyliu/p/9206691.html