1.选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css的三种引入方法</title> 6 <!--外联式--> 7 <link rel="stylesheet" href="my.css"> 8 <style> 9 /* 10 优先级: 11 1.执行顺序按从上到下 12 2.后边的夜色覆盖前边的 13 */ 14 /*内联式*/ 15 p{ 16 color: greenyellow; 17 } 18 </style> 19 </head> 20 <body> 21 <!--行间式--> 22 <p style="color: red">行间式</p> 23 <p>内联式与外联式 后蝙蝠的覆盖前边的</p> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本选择器</title> 6 <!-- 7 基本选择器: 8 1.标签选择器:标签名 9 2.类选择器: .+类名 10 3.id选择器: #+id值 11 4.通用/全局选择器:* 12 --> 13 14 <style> 15 /*!*标签选择器*!*/ 16 span { 17 color: red; 18 } 19 div { 20 color: red; 21 } 22 /*id选择器*/ 23 #d1 { 24 color: aqua; 25 } 26 /*#d3 {*/ 27 /*color: aqua;*/ 28 /*}*/ 29 /*类选择器*/ 30 .c1 { 31 color: indigo; 32 } 33 /*.c2 {*/ 34 /*color: indigo;*/ 35 /*}*/ 36 /*通用/全局选择器*/ 37 * { 38 color: blue; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="d1">通用/全局选择器 44 <p class="c1">类选择器</p> 45 </div> 46 <p id="d2">id选择器</p> 47 <span>标签选择器</span> 48 <span class="c1">类选择器</span> 49 50 <!--测试优先级--> 51 <!--id>class>标签>*--> 52 <div id="d3" class="c2" >测试优先级</div> 53 </body> 54 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组合选择器</title> 6 <!-- 7 组合选择器; 8 1.后代选择器:作用在每一个下一辈: div span 9 2.儿子选择器:只作用在下一辈:父标签>子标签 div>span 10 3.毗邻选择器:紧挨着下边的一个 div+span 11 4.兄弟选择器:同级别下边所有的标签 div~span 12 --> 13 <style> 14 /*后代选择器:作用在每一个下一辈*/ 15 div span { 16 color: yellow; 17 } 18 /*儿子选择器:只作用在下一辈*/ 19 div>div { 20 color: blue; 21 } 22 /*毗邻选择器:只作用在下一定*/ 23 p+h6 { 24 color: greenyellow; 25 } 26 /*兄弟选择器:同级别下所有标签*/ 27 div~span { 28 color: red; 29 } 30 </style> 31 </head> 32 <body> 33 <div> 34 <h1>测试</h1> 35 <span>后代选择器1 36 <span>孙子</span> 37 </span> 38 <h2>隔开</h2> 39 <span>后代选择器2</span> 40 41 </div> 42 <div>儿子选择器 43 <div>儿子选择器1 44 <span>孙子</span> 45 </div> 46 <s>隔开</s> 47 <span>儿子选择器2</span> 48 </div> 49 <!--兄弟选择器--> 50 <div>兄弟选择器-兄</div> 51 <span>兄弟选择器-弟1</span> 52 <span>兄弟选择器-弟2</span> 53 <p>毗邻选择器</p> 54 <h6>毗邻选择器</h6> 55 <h6>毗邻选择器下一个</h6> 56 <h5>毗邻选择器下2个</h5> 57 <span>兄弟选择器-弟3</span> 58 </body> 59 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性选择器</title> 6 <style> 7 /* 8 1.具有某个属性名 9 2.具有某个属性名及属性值 10 3.具有某个属性名及属性值某个标签 11 */ 12 13 /*找 input 具有属性名是 hobby 的所有标签*/ 14 /*1.属性名*/ 15 [hobby]{ 16 background-color: greenyellow; 17 color: red; 18 } 19 /*找 具有属性名是hobby 并且值是jdb的标签*/ 20 /*2.属性名和值*/ 21 [hobby="jdb"]{ 22 background-color: blue; 23 } 24 /*找input 具有属性名是hobby 并且值是jdb的input标签*/ 25 /*3.属性名,属性值 ,标签*/ 26 input[hobby="jdb"]{ 27 background-color: yellow; 28 } 29 </style> 30 </head> 31 <body> 32 <input type="text" name="username" hobby="jdb"> 33 <input type="text"> 34 <span hobby="jdb">span</span> 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分组与嵌套</title> 6 <style> 7 p { 8 color: greenyellow; 9 } 10 div { 11 color: greenyellow; 12 } 13 span { 14 color: greenyellow; 15 } 16 /*分组:进行优化*/ 17 div,span,p{ 18 color: red; 19 } 20 /*嵌套:多个不同选择器 可以组合使用*/ 21 #d1,.c1,span { 22 color: blue; 23 } 24 </style> 25 </head> 26 <body> 27 <p id="d1">p</p> 28 <div class="c1">div</div> 29 <span>span</span> 30 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类选择器</title> 6 <!-- 7 伪类选择器: 8 对选择器标签进行了进一步的修饰 9 1.连接态:a:link 10 2.鼠标悬浮态:a:hover 11 3.鼠标点击态:a:active 12 4.访问过后状态:a:visited 13 --> 14 <style> 15 16 /*1.连接态(点击的时候显示):link*/ 17 a:link { 18 color: red; 19 } 20 /*2.鼠标悬浮态:hover*/ 21 a:hover { 22 color: blue; 23 } 24 /*3.鼠标点击态:active*/ 25 a:active { 26 color: orange; 27 } 28 /*4.访问过后状态:visited*/ 29 a:visited { 30 color: darkgray; 31 } 32 33 /*input 边框被点击的状态 称之为获取焦点*/ 34 input:focus { 35 background-color: red; 36 } 37 38 input:hover { 39 background-color: yellow; 40 } 41 </style> 42 </head> 43 <body> 44 <a href="https://www.baidu.com">点击</a> 45 <input type="text" name="text" > 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪元素选择器</title> 6 <style> 7 <!-- 8 /*first_letter第一个字母:第一个字变大*/ 9 /*font-size:字体大小*/ 10 --> 11 /*p:first-letter{*/ 12 /*font-size: 48px;*/ 13 /*color: gold;*/ 14 /*}*/ 15 /*before :在标签内容前,加 content修饰过的字符*/ 16 p:before{ 17 content: "$"; 18 color: gold; 19 } 20 /*after 在解决浮动问题上有些难理解*/ 21 /*after 在标签内容后添加content修饰过的内容*/ 22 p:after{ 23 content: "?"; 24 color: red; 25 } 26 </style> 27 </head> 28 <body> 29 <p>澳门最大线上赌场开业了,爱剪辑</p> 30 <p>澳门最大线上赌场开业了,爱剪辑</p> 31 <p>澳门最大线上赌场开业了,爱剪辑</p> 32 <p>澳门最大线上赌场开业了,爱剪辑</p> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选择器优先级</title> 6 <link rel="stylesheet" href="my.css"> 7 <style> 8 /* 9 1.选择器相同的情况下:就近原则 10 2.选择器不同的情况下 11 12 优先级: 行内 > id > 类 > 标签 13 14 */ 15 #d1 { 16 color: red; 17 } 18 .c1 { 19 color: orange; 20 } 21 p { 22 color: greenyellow; 23 } 24 </style> 25 </head> 26 <body> 27 <p id="d1" class="c1" style="color: green">快有下课了,我要拉屎</p> 28 <input type="text"> 29 </body> 30 </html>
1 p { 2 color: blue; 3 }
1 前端 2 css 2d 3 4 1.什么是css 5 css就是用来调节标签样式的 6 层叠样式表 7 8 2.css注释 9 /*这是注释*/ 10 /*单行注释*/ 11 /* 12 多行注释 13 多行注释 14 */ 15 16 /*这是博客园首页的样式表*/ 17 /*顶部导航条样式开始*/ 18 /*顶部导航条样式结束*/ 19 20 3.css语法结构 21 选择器:(属性1:值,属性2:值,属性3:值) 22 23 24 4.css三种引入方式 25 1.行内样式 26 <p style="color: red">行间式</p> 27 2.内部样式 28 <style> 29 /* 30 优先级: 31 1.执行顺序按从上到下 32 2.后边的夜色覆盖前边的 33 */ 34 /*内联式*/ 35 p{ 36 color: greenyellow; 37 } 38 </style> 39 3.外部样式 40 <link rel="stylesheet" href="my.css"> 41 my.css 42 p { 43 color: blue; 44 } 45 1.文件导入式(也是最规范的样式) link -- 外联式 46 2.head 内利用style标签 内部直接书写css代码 -- 内联式 47 3.行内式(最不推介使用) 48 49 5.css流程 50 1.如何查找标签 51 2.如何设置样式 52 53 6.如何查找标签 54 1.基本选择器 55 基本选择器: 56 1.标签选择器:标签名 57 2.类选择器: .+类名 58 3.id选择器: #+id值 59 4.通用/全局选择器:* 60 --> 61 <!--测试优先级--> 62 <!--id>class>标签>*--> 63 2.组合选择器 64 <!-- 65 组合选择器; 66 1.后代选择器:作用在每一个下一辈: div span 67 2.儿子选择器:只作用在下一辈:父标签>子标签 div>span 68 3.毗邻选择器:紧挨着下边的一个 div+span 69 4.兄弟选择器:同级别下边所有的标签 div~span 70 --> 71 3.属性选择器 72 /*找 input 具有属性名是 hobby 的所有标签*/ 73 /*1.属性名*/ 74 [hobby]{ 75 background-color: greenyellow; 76 color: red; 77 } 78 /*找 具有属性名是hobby 并且值是jdb的标签*/ 79 /*2.属性名和值*/ 80 [hobby="jdb"]{ 81 background-color: blue; 82 } 83 /*找input 具有属性名是hobby 并且值是jdb的input标签*/ 84 /*3.属性名,属性值 ,标签*/ 85 input[hobby="jdb"]{ 86 background-color: yellow; 87 } 88 89 4.分组与嵌套 90 /*分组:进行优化*/ 91 div,span,p{ 92 color: red; 93 } 94 /*嵌套:多个不同选择器 可以组合使用*/ 95 #d1,.c1,span { 96 color: blue; 97 } 98 99 5. 伪类选择器 100 <!-- 101 伪类选择器: 102 对选择器标签进行了进一步的修饰 103 1.连接态:a:link 104 2.鼠标悬浮态:a:hover 105 3.鼠标点击态:a:active 106 4.访问过后状态:a:visited 107 --> 108 109 /*input 边框被点击的状态 称之为获取焦点*/ 110 input:focus { 111 background-color: red; 112 } 113 114 input:hover { 115 background-color: yellow; 116 } 117 6.伪元素选择器 118 <!-- 119 /*first_letter第一个字母:第一个字变大*/ 120 /*font-size:字体大小*/ 121 --> 122 /*p:first-letter{*/ 123 /*font-size: 48px;*/ 124 /*color: gold;*/ 125 /*}*/ 126 /*before :在标签内容前,加 content修饰过的字符*/ 127 p:before{ 128 content: "$"; 129 color: gold; 130 } 131 /*after 在解决浮动问题上有些难理解*/ 132 /*after 在标签内容后添加content修饰过的内容*/ 133 p:after{ 134 content: "?"; 135 color: red; 136 } 137 7.选择器优先级 138 <!DOCTYPE html> 139 <html lang="en"> 140 <head> 141 <meta charset="UTF-8"> 142 <title>选择器优先级</title> 143 <link rel="stylesheet" href="my.css"> 144 <style> 145 /* 146 1.选择器相同的情况下:就近原则 147 2.选择器不同的情况下 148 149 优先级: 行内 > id > 类 > 标签 150 151 */ 152 #d1 { 153 color: red; 154 } 155 .c1 { 156 color: orange; 157 } 158 p { 159 color: greenyellow; 160 } 161 </style> 162 </head> 163 <body> 164 <p id="d1" class="c1" style="color: green">快有下课了,我要拉屎</p> 165 <input type="text"> 166 </body> 167 </html> 168 169 ps:一个标签都应该有的属性 170 id 唯一标识 171 class 类属性 172 style (不是必须的)