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又是块级标签，所以会背景颜色会占满整行，界面显示如下：
