HTML中引入CSS的三种方式
三种方式引用顺序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css笔记</title> <!--第二种 在<head>标签中加style标签--> <style> .c1{ background-color: red; } </style> <!--第三种 在<head>标签中加link标签，引入xx.css文件--> <link rel="stylesheet" href="cssDemo.css"> </head> <body> <!--第一种 在标签中添加style属性--> <div class="c1" style="width: 100%;height: 48px;background-color: #bbe2d5"></div> <!--三种方式优先级：由内至外，由近到远--> <!--所以这里先取div里面的style属性，再取link的，最后才是head中的style标签，--> </body> </html>
CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器 #代表id*/ #i1{ width: 100px; height: 100px; background-color: red; } /*class选择器* .代表class*/ .c1{ width: 100px; height: 100px; background-color: blue; } /*标签选择器*/ /*当使用这个标签的时候会默认使用里面的css样式*/ div{ width: 100%; height: 100px; background-color: blue;; } /*标签层级选择器*/ /*div--span的格式 会引用*/ div span { background-color: red; } /*id组合选择器*/ /*id为i2 后面是span的格式时 引用*/ #i2 span{ background-color: blue; } /*class组合选择器*/ /*可以用这样的方式定义新的属性，优先级是原来的选择器高*/ .c3 c4{ width: 100%; background-color: red; } .c3{ width: 100px; height: 100px; } .c4{ width: 30%; background-color: purple; } /*属性选择器*/ /*当这个标签的这个属性等于这个名字时引用*/ div[name=‘szz‘]{ width: 100px; height: 100px; background-color: aquamarine; } </style> <link rel="stylesheet" href="cssDemo.css"> </head> <body> <!--html中不允许出现相同的id--> <!--id选择器 唯一标签 --> <div id="i1"></div> <!-- class选择器 css都是通过class属性 --> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <!--标签选择器--> <div></div> <div></div> <div></div> <!--标签选择器--> <div> <span>标签选择器</span> </div> <!--标签层级选择器--> <div id="i2"> <span>标签层级选择器</span> </div> <!--引用两个样式--> <div class="c3 c4">class组合选择器，引用两个样式</div> <!--属性选择器--> <div name="szz"></div> </body> </html>
原文：https://www.cnblogs.com/yanyan-/p/11074739.html