/*这是注释*/
<!-- 关键代码 --> <!-- 给div标签设置宽高背景颜色 --> <div style=" 200px; height: 200px; background-color: orange;"></div>
2.内联式
css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成
<!-- 关键代码 --> <head> <style> /* css语法下的注释语法 */ /* 设置页面中所有h2标签宽高背景颜色 */ h2 { width: 50px; height: 50px; background-color: orange; } /* 设置页面中所有h3标签宽高背景颜色 */ h3 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h2></h2> <h2></h2> <h3></h3> <h3></h3> </body>
1.#css文件夹下的my.css /* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */ p { 50px; height: 50px; background-color: orange; } 2.# <!-- 关键代码 --> <head> <!-- rel="stylesheet"：引入的是层级样式表，也就是css文件 type="text/css"：引入文件采用的是css语法书写文本类型代码 href="css/my.css"：采用相当路径引入目标css文件 --> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式都被my.css文件控制 --> <p></p> <p></p> </body>
1.通配选择器
/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
/* 通配选择器控制页面中所有的标签(不建议使用) */
* {
/* 样式块 */
}
2.标签选择器
/* 特定标识符 标签名 */
/* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
div { /* 控制页面中所有div标签的样式 */
/* 样式块 */
}
3.class选择器（提倡使用）
/* 特定标识符 点(.) */
/* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
.box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
/* 样式块 */
}
4.id选择器
/* 特定标识符 井号(#) */
/* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
#box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
/* 样式块 */
}
/* 连接标识符 逗号(,) */ /* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */ div, p, .box, #ele { /* 样式块 */ } <!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 --> <div> <div></div> </div> <p></p> <p></p> <i class="box"></i> <span class="box"></span> <b id="ele"></b>
2.后代选择器和子代选择器
#1.后代选择器（本等级下面所有） /* 连接标识符 空格( ) */ /* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ } <!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 --> <body> <div class='box'> <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 --> </div> <div> <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 --> </div> </body> <!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 --> #2.子代选择器（本等级下面相邻一个） /* 连接标识符 大于号(>) */ /* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ } <!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 --> <body> <div class='box'> <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 --> </div> <div> <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 --> </div> <div class='box'> <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 --> </div> </body> <!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->
3.兄弟和相邻选择器
#1.兄弟（同等级下面所有） /* 连接标识符 波浪号(~) */ /* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ } <!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 --> #2.相邻（同等级下一个） /* 连接标识符 加号(+) */ /* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ } <!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，不能被匹配 --> <!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->
注意：后代和子代 以及兄弟和相邻的区别和相似
4.交叉选择器
/* 连接标识符 紧挨着(没有任何连接符) */ /* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */ div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/ /* 样式块 */ } <!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开 <!-- class属性拥有多个值时，多个值之间用空格隔开 --> <div class="box tag" id="ele"></div>
5.属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.具有某个属性名 2.具有某个属性名及属性值 3.具有某个属性名及属性值某个标签 */ /*找只要有hobby这个属性名的所有标签*/ /*[hobby] {*/ /* background-color: red;*/ /* color: orange;*/ /*}*/ /*[hobby="jdb"] {*/ /* background-color: pink;*/ /*}*/ /*找input 具有属性名是hobby并且值是jdb的input标签*/ input[hobby="jdb"] { background-color: greenyellow; } </style> </head> <body> <input type="text" name="username" hobby="jdb"> <input type="text"> <span hobby="jdb">span</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*连接态*/ a:link { color: pink; } /*鼠标悬浮态*/ a:hover { color: red; } /*鼠标点击态*/ a:active { color: purple; } /*访问过后的状态*/ a:visited { color: dimgrey; } /* input框被点击的状态 称之为获取焦点*/ input:focus { background-color: orange; } input:hover { background-color: red; } </style> </head> <body> <a href="https://www.chouti.com">click me!</a> <input type="text"> </body> </html>
#1. first-letter 常用的给首字母设置特殊样式： #2.before ：在每个<p>元素之前插入内容 #3.after：在每个<p>元素之后插入内容 #4.before和after多用于清除浮动。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter { font-size: 48px; color: gold; } p:before { content: '$'; color: gold; } /*after在解决浮动的问题上 很有用*/ p:after { content: "?"; color: red; } </style> </head> <body> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> </body> </html>
1.选择器相同的情况下:
就近原则
2.选择器不同的情况下:
行内 > id选择器 > 类选择器 > 标签选择器