一、CSS介绍
CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化
二、CSS使用方式
1. 行内样式/内联样式
借助于style标签属性，为当前的元素添加样式声明
<标签名 style="样式声明">
CSS样式声明 : 由CSS属性和值组成
示例：style="属性:值;属性:值;"
常用CSS属性 : - 设置文本颜色 color:red; - 设置背景颜色 background-color:green; - 设置字体大小 font-size:32px;
2. 内嵌样式
借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式
示例： <style> 选择器{ 属性:值; 属性:值; } </style>
选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式
/*标签选择器 : 根据标签名匹配所有的该元素*/ p{ color:red; }
3. 外链样式表
创建外部样式表文件 后缀使用.css
在HTML文件中使用标签引入外部样式表 <link rel="stylesheet" href="URL" type="text/css">
样式表文件中借助选择器匹配元素应用样式
三、样式表特征
1. 层叠性
多组CSS样式共同作用于一个元素
2. 继承性
后代元素可以继承祖先元素中的某些样式 例 : 大部分的文本属性都可以被继承
3. 样式表的优先级
优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial- scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <!--引入外部样式表--> 9 <link rel="stylesheet" href="index.css"> 10 <style> 11 /*内嵌样式,借助style标签书写样式声明, 12 实现样式与结构的分离*/ 13 /*使用选择器匹配文档元素,为其应用样式*/ 14 /*标签选择器:根据标签名匹配元素应用样式*/ 15 h1{ 16 background:green; 17 } 18 span{ 19 color:orange; 20 } 21 span{ 22 color:pink; 23 } 24 </style> 25 </head> 26 <body> 27 <!--行内样式,借助style标签属性设置样式规则--> 28 <!--CSS样式声明 属性名:属性值;--> 29 <h1 style="font-size:16px;color:red;">人生苦短</h1> 30 <h1 style="font-size:16px;color:red;">我学python</h1> 31 <h2> 32 测试<span>python</span> 33 </h2> 34 <span>python</span> 35 <div style="color:green;"> 36 <p style="color:blue;"> 37 <span style="color:gray;">子元素可以继承父元素或祖先元素的文本样式</span> 38 </p> 39 </div> 40 </body>
四、CSS 选择器
1. 作用：匹配文档中的某些元素为其应用样式
2. 分类 :
(1) 标签选择器：根据标签名匹配文档中所有该元素
语法 :标签名{
属性:值;
}
1 /*根据标签名匹配所有相应元素应用样式*/ 2 <style> 3 h1{ 4 color:green; 5 } 6 </style> 7 -------------------------------- 8 <body> 9 <h1>人生苦短，我学python</h1> 10 </body>
(2)id选择器：根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用
语法 :#id属性值{
}
注意 : id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头; 尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示
1 /*根据元素的id属性值匹配(id选择器)*/ 2 <style> 3 #d1{ 4 /*匹配id为"d1"的元素*/ 5 font-size:40px; 6 } 7 #d2{ 8 font-size:52px; 9 } 10 </style> 11 --------------------------------- 12 <body> 13 <h1 id="d1">人生苦短</h1> 14 <h1 id="d2">我学python</h1> 15 </body>
(3)class选择器/类选择器：根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :.class属性值 {
}
特殊用法 : 1. 类选择器与其他选择器结合使用 注意标签与类选择器结合时,标签在前,类选择器在后 例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式 例 : .c1{ } .
c2{ }
<p class="c1 c2"></p>
1 <style> 2 /*类选择器:根据元素的class属性值匹配到相应元素*/ 3 .c1{ 4 background: orange; 5 } 6 .c2{ 7 width:200px; 8 } 9 /*组合选择器*/ 10 h2.c1{ 11 /*匹配类名为c1的h2元素*/ 12 height:200px; 13 } 14 </style> 15 ---------------------------- 16 <body> 17 <h1 class="c1 c2">人生苦短</h1> 18 <h2 class="c1">我学python</h2> 19 </body>
(4)群组选择器：为一组元素统一设置样式
语法 : selector1,selector2,selector3{
}
1 <style> 2 /*群组选择器:将选择器组合起来,统一为元素设置样式*/ 3 h2,h3,h4{ 4 font-size:20px; 5 } 6 </style> 7 ---------------------- 8 <body> 9 <h2>python</h2> 10 <h3>python</h3> 11 <h4>python</h4> 12 </body>
(5)后代选择器：匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
语法 :selector1 selector2{
}
匹配selector1中所有满足selector2的后代元素
1 /*后代选择器:匹配所有满足选择器的后代元素*/ 2 div span{ 3 color:red; 4 } 5 ----------------- 6 <body> 7 <div> 8 <span>div->span</span> 9 <p> 10 <span>div->p->span</span> 11 </p> 12 </div> 13 </body> 14 =========================== 15 div->span 16 div->p->span 17 div里面只要出现span,都算后代元素
(6)子代选择器：匹配满足选择器的所有直接子元素
语法 :selector1>selector2{
}
1 /*子代选择器:匹配所有满足选择器的直接后代*/ 2 div>span{ 3 background:red; 4 } 5 --------------------------- 6 <body> 7 <div> 8 <span>div->span</span> 9 <p> 10 <span>div->p->span</span> 11 </p> 12 </div> 13 </body> 14 =============================== 15 div->span
(7) 伪类选择器：为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类 :
:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)
使用 : a:link{ } a:visited{ } .c1:hover{ }
注意 :
1.超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
2.超链接常用设置 :
a{ /*统一设置超链接默认样式(不分状态)*/ } a:hover{ /*鼠标滑过时改样式*/ }
3. 选择器的优先级
使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高
| 选择器 | 权重 |
| 标签选择器 | 1 |
| (伪)类选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和，群组选择器权重以每个选择器单独的权重为准，不进行相加计算
/*群组选择器之间互相独立，不影响优先级*/ body,h1,p{ /*标签选择器权重为 1 */ color:red; } .c1 a{ /*当前组合选择器权重为 10+1 */ color:green; } #d1>.c2{ /*当前组合选择器权重为 100+10 */ color:blue; }
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 /*1.根据标签名匹配所有相应元素应用样式*/ 11 h1{ 12 color:green; 13 } 14 /*2.根据元素的id属性值匹配(id选择器)*/ 15 #d1{ 16 /*匹配id为"d1"的元素*/ 17 font-size:40px; 18 } 19 #d2{ 20 font-size:42px; 21 } 22 /*3.类选择器:根据元素的class属性值匹配到相应元素*/ 23 .c1{ 24 background: orange; 25 } 26 .c2{ 27 width:200px; 28 } 29 /*组合选择器*/ 30 h2.c1{ 31 /*匹配类名为c1的h2元素*/ 32 height:200px; 33 } 34 /*4.群组选择器:将选择器组合起来,统一为元素设置样式*/ 35 h2,h3,h4{ 36 font-size:20px; 37 } 38 #d1,.c1{} 39 /*5.后代选择器:匹配所有满足选择器的后代元素*/ 40 div span{ 41 color:red; 42 } 43 /*6.子代选择器:匹配所有满足选择器的直接后代*/ 44 div>span{ 45 background:cyan; 46 } 47 /*7.伪类选择器:为元素的不同状态分别设置样式, 48 需要和基础选择器结合使用*/ 49 /* 50 超链接伪类: 51 :link(超链接访问前的状态) 52 :visited(超链接访问后的状态) 53 动态伪类: 54 :hover(鼠标悬停时的状态) 55 :active(激活状态,鼠标点按时的状态) 56 :focus(表单控件的焦点状态,输入框的编辑状态) 57 */ 58 /* 59 a:link{ 60 color:black; 61 } 62 a:visited{ 63 color:gray; 64 } 65 a:hover{ 66 font-size:28px; 67 } 68 a:active{ 69 background:orange; 70 } 71 */ 72 /* 73 1.统一设置超链接四种状态下的样式 74 2.单独设置鼠标悬停时的样式 75 */ 76 a{ 77 color:black; 78 /*取消超链接默认下划线*/ 79 text-decoration:none; 80 } 81 a:hover{ 82 color:orange; 83 } 84 /*创建h5标签,设置初始尺寸和背景颜色; 85 鼠标悬停时修改背景颜色*/ 86 h5{ 87 width:200px; 88 height:200px; 89 background:pink; 90 } 91 h5:hover{ 92 background:green; 93 } 94 /*取消表单控件在焦点状态下的轮廓线*/ 95 input:focus{ 96 outline:none; 97 } 98 99 </style> 100 </head> 101 <body> 102 <input type="text"> 103 <h5></h5> 104 <a href="01_form.html">表单应用</a> 105 <div> 106 <span>div->span</span> 107 <p> 108 <span>div->p->span</span> 109 </p> 110 </div> 111 112 <!--基础选择器:标签,id,类--> 113 <!--class属性可以取多个值,使用空格隔开--> 114 <h1 id="d2" class="c1 c2">老王</h1> 115 <h1 id="d3" class="c1">老张</h1> 116 <h1 id="d1">老李</h1> 117 <h2 class="c1 c2">老赵</h2> 118 <h2>python1</h2> 119 <h3>python2</h3> 120 <h4>python3</h4> 121 122 </body> 123 </html>
五、标签分类及嵌套
1. 块元素
独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致 例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)
2. 行内元素
可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定 例 : span label b strong i s u sub sup a
3. 行内块元素
可以与其他元素共行显示,又能手动调整宽高 例 : img input button (表单控件)
4. 嵌套原则
块元素中可以嵌套任意类型的元素 p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
行内元素中最好只嵌套行内或行内块元素
转换元素的类型 display取值：block(块元素) inline(行内元素) inline-block(行内块元素) none(隐藏)
六、尺寸与颜色单位
1. 尺寸单位
px 像素单位
% 百分比，参照父元素对应属性的值进行计算
em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px
2. 颜色单位
英文单词：red，green，blue
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f
例：red rgb(255,0,0) #ff0000
短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十
六进制解析
例：#000 #fff #f00