前端
今日内容：
1.css的介绍
2.css的三种引入方式
3.基础选择器
4.组合选择器
5.属性选择器
6.分组与嵌套
7.伪类选择器
8.伪元素选择器
9.选择器优先级
一.css的介绍
1.CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它会按照这个样式表来对文档进行格式化（渲染）
2.css的语法
每个css样式由俩个组成部分：选择器和声明，声明又包括属性和属性值，每个声明之后用分号结束。
图片解释：
ps：css的注释:/*这就是注释*/
二.css的三种引入方式
1.行内样式
行内式是在标记UI建的style属性中设定css样式，但是不推荐大规模使用 <p style= 'color': red''>hello word.</p>
2.内部样式
嵌入式是将css样式集中写在网业的<head></head>标签里的<style></style>标签对中，格式如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种方式</title> <style> p { color: red; } </style> </head> <body> <p >你们一定努力啊!</p> </body> </html>
3.外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可，一般推荐使用此方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种方式</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <p>你们一定努力啊!</p> </body> </html>
三.基础选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*标签选择器:只要标签名是p的都改*/ 8 /*p {*/ 9 /* color: red;*/ 10 /*}*/ 11 /*类选择器:点+类名，只修改类名是c1的*/ 12 /*.c1 {*/ 13 /* color: yellow;*/ 14 /*}*/ 15 /* id选择器:#+id值，只修改id为1的*/ 16 /* #d1 {*/ 17 /* color: green;*/ 18 /* }*/ 19 /* 通用/全局选择器，修改所有 */ 20 /* * {*/ 21 /* color: blue;*/ 22 /* }*/ 23 </style> 24 </head> 25 <body> 26 <div id="d1">老板好 我是23号技师 很高兴为您服务~ 换一个! 27 <p class="c1">天下唯我独尊~</p> 28 </div> 29 <div>老板好 我是23号技师 很高兴为您服务~ 换一个!</div> 30 31 <p id="d2">天下唯我独尊~</p> 32 <span>尊 尊 尊 尊你妹尊</span> 33 <span class="c1">尊 尊 尊 尊你妹尊</span> 34 </body> 35 </html>
四.组合选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*后代选择器*，只要是div 里面的span都渲染/ 8 /*div span {*/ 9 /*color: red;*/ 10 /*}*/ 11 /* 儿子选择器，p里面的span不会渲染，因为那是p的儿子*/ 12 /*div>span {*/ 13 /*color: aqua;*/ 14 /*}*/ 15 /* 毗邻选择器:紧挨着的下面的一个*/ 16 /*div+span {*/ 17 /*color: orange;*/ 18 /*}*/ 19 /* 弟弟选择器:同级别的下面所有的标签*/ 20 div~span { 21 color: brown; 22 } 23 </style> 24 </head> 25 <body> 26 <span>div上面第一个span</span> 27 <span>div上面第二个span</span> 28 <div>div 29 <span>div里面的第一个span</span> 30 <p>div里面的第一个p 31 <span>div里面的第一个p里面的span</span> 32 </p> 33 <span>div里面最后一个span</span> 34 </div> 35 <span>div下面的第一个span</span> 36 <span>div下面的第二个span</span> 37 <span>div下面的第三个span</span> 38 </body> 39 </html>
五.属性选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 1.具有某个属性名 9 2.具有某个属性名及属性值 10 3.具有某个属性名及属性值某个标签 11 */ 12 /*找只要有hobby这个属性名的所有标签，只要是hobby这个属性名字就可以*/ 13 /*[hobby] {*/ 14 /* background-color: red;*/ 15 /* color: orange;*/ 16 /*}*/ 17 18 /*[hobby="jdb"] 要属性名是hobby 属性值是'jdb'{*/ 19 /* background-color: pink;*/ 20 /*}*/ 21 22 /*找input 具有属性名是hobby并且值是jdb的input标签*/ 23 input[hobby="jdb"] { 24 background-color: greenyellow; 25 } 26 </style> 27 </head> 28 <body> 29 <input type="text" name="username" hobby="jdb"> 30 <input type="text"> 31 <span hobby="jdb">span</span> 32 </body> 33 </html>
六.分组与嵌套
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*这样写就会造成代码冗余了*/ 8 /*p {*/ 9 /* color: greenyellow;*/ 10 /*}*/ 11 /*div {*/ 12 /* color: greenyellow;*/ 13 /*}*/ 14 /*span {*/ 15 /* color: greenyellow;*/ 16 /*}*/ 17 /* 分组*/ 18 /* div,span, p {*/ 19 /* color: pink;*/ 20 /* }*/ 21 /* */ 22 /* 嵌套 多个不同的选择器 可以组合使用*/ 23 #d1,.c1,span { 24 color: orange; 25 } 26 </style> 27 </head> 28 <body> 29 <p id="d1">p</p> 30 <div class="c1">div</div> 31 <span>span</span> 32 </body> 33 </html>
七.伪类选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*连接态*/ 8 a:link { 9 color: pink; 10 } 11 /*鼠标悬浮态*/ 12 a:hover { 13 color: red; 14 } 15 /*鼠标点击态*/ 16 a:active { 17 color: purple; 18 } 19 /*访问过后的状态*/ 20 a:visited { 21 color: dimgrey; 22 } 23 /* input框被点击的状态 称之为获取焦点*/ 24 input:focus { 25 background-color: orange; 26 } 27 /*悬浮上去显示的颜色*/ 28 input:hover { 29 background-color: red; 30 } 31 32 </style> 33 </head> 34 <body> 35 <a href="https://www.chouti.com">click me!</a> 36 <input type="text"> 37 </body> 38 </html>
八.伪元素选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*可以把第一个字变大，也可以渲染颜色*/ 8 /*p:first-letter {*/ 9 /*font-size: 48px;*/ 10 /*color: gold;*/ 11 /*}*/ 12 /*可以在每一行字前面添加一个指定的东西，渲染出来是不可以选取的*/ 13 /*p:before {*/ 14 /*content: '$';*/ 15 /*color: gold;*/ 16 /*}*/ 17 /*after在解决浮动的问题上 很有用，在每一行后面添加一个问号，也是不可选取的*/ 18 /*p:after {*/ 19 /*content: "?";*/ 20 /*color: red;*/ 21 /*}*/ 22 </style> 23 </head> 24 <body> 25 <p>澳门最大线上赌场开业了,爱剪辑!</p> 26 <p>澳门最大线上赌场开业了,爱剪辑!</p> 27 <p>澳门最大线上赌场开业了,爱剪辑!</p> 28 <p>澳门最大线上赌场开业了,爱剪辑!</p> 29 </body> 30 </html>
九.选择器优先级
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="mycss.css"> 7 <style> 8 /* 9 1.选择器相同的情况下:就近原则 10 2.选择器不同的情况下: 11 12 13 行内 > id选择器 > 类选择器 > 标签选择器 14 */ 15 #d1 { 16 color: red; 17 } 18 /*.c1 {*/ 19 /* color: orange;*/ 20 /*}*/ 21 /*p {*/ 22 /* color: greenyellow;*/ 23 /*}*/ 24 25 </style> 26 </head> 27 <body> 28 <p id="d1" class="c1" style="color: green">快要下课了,我想吃饭了!</p> 29 </body> 30 </html>
