第2周 CSS3基础语法与盒模型
第1节 CSS3基础入门
层叠式样式表，用来给HTML标签添加样式的语言
前端三层：
HTML 和 CSS 结合 -> 通过选择器
<style>
h2{ /*选择器*/
color:red;
}
p{
color:blue;
}
</style>
给指定的几个结构添加属性：在结构里加class
CSS本质：CSS是样式的清单，要书写合适的选择器，然后把指定元素的样式一条条罗列出来
背诵CSS属性是非常重要的
CSS的书写位置（4种）：
1.内嵌式（最常使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>
www
</h1>
</body>
</html>
2.外链式：将CSS单独存为.css文件，然后使用<link>标签引入它
外链式优点：多个html网页，可以共用一个css样式表文件
3.导入式（不常用）
4.行内式
样式可以通过style属性写在标签身上
<h2 style="color:red;"我是一个二级标题</h2>
<!-- 行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用-->
k:v;
CSS3的注释是/**/
第1节总结
重点
CSS中文全称？最新版本？功能？
前端分为哪几层？功能分别是什么？
样式表的书写位置有哪些？我们常用哪些？
难点
CSS语法要练熟
背诵记忆CSS属性
第2节 CSS3选择器
标签选择器：直接使用元素的标签名当做选择器，将选择页面上所有该种标签
- 通常用于标签的初始化
ul {
/*去掉无序列表的小圆点*/
list-style: none;
}
a {
/*去掉超级链接的下划线*/
text-decoration:none;
}
认识id属性
id是标签的唯一标识
<p id="para1">我是一个段落</p>
/*id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头*/
id选择器 ididididid
CSS选择器可以使用 # 前缀，选择指定id的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a{
color: red;
}
</style>
</head>
<body>
<p id="a">
我是段落1
</p>
<p id="b">
我是段落2
</p>
</body>
</html>
class类名
class属性表示“类名”，类名的命名规范和id的命名规范相同
同一个标签可以同时属于多个类，类名用空格隔开
<p class="warning spec">我是段落</p>
.warning {
color: red;
}
.spec {
font-style: italic;
}
/*
font-style: italic; 斜体
*/
使用点.前缀选择指定class的标签
原子类
在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类
.fs12 {
font-size: 12px;
}
.fs14 {
font-size: 14px;
}
/*HTML标签可以**按需选择**它的类名，可以快速添加一些常见样式
需要先定义原子类*/
<p class="fs14 color-green">我是一个文字</p>
复合选择器
| 选择器名称 | 示例 | 示例的意义 |
|---|---|---|
| 后代选择器 | .box .spec | 选择类名 |
| 交集选择器 | li.spec | 选择既是li标签，也属于spec类的标签 |
| 并集选择器 | ul, ol | 选择所有ul和ol标签 |
后代选择器：CSS选择器中，使用空格表示“后代”
.box p { /*选择类名为box的标签后代的p标签*/ color:red;}<div class="box"> <p>我是盒子中的段落</p> <p>我是盒子中的段落</p></div><p>我是段落</p><p>我是段落</p>/*后代并不一定只是儿子*/.box p { color: red;}<div class="box"> <ul> <li><p>我是盒子中的段落</p></li> <li><p>我是盒子中的段落</p></li> </ul></div><p>我是段落</p><p>我是段落</p>
后代选择器可以有很多空格，隔开好几代
.box ul li .spec em { color: red;}
交集选择器：
h3.spec /*又是h3标签又是spec类名的元素*/
伪类：伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态
| 伪类 | 意义 |
|---|---|
| a:link | 没有被访问的超级链接 |
| a:visited | 已经被访问过的超级链接 |
| a:hover | 正被鼠标悬停的超级链接 |
| a:active | 正被激活的超级链接（按下按键但是还没有松开按键）（用得少） |
LOVE HATE：link, visited, hover, active
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a:link { color: red; } a:visited { color: blue; } </style></head><body> <a href="http://www.baidu.com">百度</a> <a href="http://www.4399.com">4399</a></body></html>
元素关系选择器（在style中写）
| 名称 | 举例 | 意义 |
|---|---|---|
| 子选择器 | div>p | div的子标签p |
| 相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p~span | p元素之后的所有同层级span元素 |
子选择器：当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
/*后代选择器不一定限制是子元素*/.box p { /*选择box的所有后代p*/ }.box>p { /*选择box的子标签p*/ }
相邻兄弟选择器
- 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中，即a+b就是选择“紧跟在a后面的一个b”
通用兄弟选择器
- a~b选择a元素之后所有同层级b元素
序号选择器（表达位置和序号的子元素）
| 举例 | 意义 |
|---|---|
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(3) | 第3个子元素 |
| nth-of-type(3) | 第3个某类型子元素 |
| :nth-last-child(3) | 倒数第3个子元素 |
| :nth-last-of-type(3) | 倒数第3个某类型子元素 |
/* :first-child */.box1 p:first-child { /*记得写对应元素（这里是p）*/ color: red;}/* :nth-child() */:nth-child()可以写成 an+b 的形式，表示从b开始每a个选一个/* :nth-of-type()将选择同种标签指定序号的子元素 */.box4 p:nth-of-type(3) { color: red;}
属性选择器
CSS3新增伪类
| 伪类 | 意义 |
|---|---|
| :empty | 选择空标签 |
| :focus | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已经勾选的单选按钮或者复选框 |
| :root | 选择根元素，即<html>标签 |
伪元素：虚拟动态创建的元素，用双冒号表示
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容
::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）
.box1::selection { background-color: red;}
:first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
:first-line会选中某元素中（必须是块级元素）第一行全部文字
层叠性：多个选择器可以同时作用于同一个标签，效果叠加
层叠性的冲突处理：id权重 > class权重 > 标签权重
复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重
#box1 div.box2 #box3 p { /*权重2 1 2*/ color: green;}
!important：如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important
.spec { color: blue !important;}
第二节总结 - CSS选择器
重点内容
CSS选择器有哪些？
类名有哪些用法？
伪类？伪元素？
难点内容
选择器权重计算
第三节 文本与字体属性
常用文本样式属性
color 可以用英语单词、十六进制、rgb()、rgba()等表示法
color: #ff0000; color: rgb(255,0,0); /*每种颜色分量都是0~255*/
rgba()表示法：最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心
font-size属性：用来设置字号，单位通常为px
font-size: 30px;
网页正文字号是16px，浏览器最小支持10px字号
font-weight：设置字体的粗细程度，通常用 normal 和 bold 两个值
font-style：设置字体的倾斜，italic 设置为倾斜字体
text-decoration：设置文本的修饰线外观（下划线、删除线）
| 示例 | 意义 |
|---|---|
| text-decoration: none; | 没有修饰线 |
| text-decoration: underline; | 下划线 |
| text-decoration: line-through; | 删除线 |
字体属性详解
font-family属性用来设置字体
字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体
字体名称中有空格，必须用引号包裹
font-family: serif, "Times New Roman", "微软雅黑";
段落和行相关属性
text-indent：定义首行文本内容之前的缩进量
/*缩进两个字符*/text-indent: 2em;/* em表示字符宽度 */
line-height属性的单位
-
以px为单位的数值
-
没有单位的数值，表示字号的倍数（最推荐的写法）
-
百分数，表示字号的倍数
单行文本垂直居中
- 设置行高 = 盒子高度，即可实现单行文本垂直居中
设置 text-align: center 可实现文本水平居中
font合写属性
- font属性可以用来作为font-style，font-weight，font-size，line-height，font-family属性的合写
font: 20px/1.5 Arial, "微软雅黑";/* 字号/行高*/font: italic bold 20px/1.5 Arial, "微软雅黑"
继承性：文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效
color、font-开头的、list-开头的、text-开头的、line-开头的
通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了
继承性的就近原则：继承的情况下，选择器权重计算失效，采用就近原则
继承懂的选择器权重没有 选中 的大
第三节 总结
重点
文字颜色、字体、倾斜、加粗和下划线
什么是行高？如何制作单行文本垂直居中？
如何使用font属性快速设置加粗、字号、行高、字体？
难点
什么是继承性？哪些属性有继承性？什么是就近原则？
第四节 盒模型（非常重要）
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”
width、height不是盒子总宽高
- 盒子总宽度 = width + 左右padding + 左右border
- 盒子总高度 = height + 上下padding + 上下border
/* 边框，快捷键bd */border: 10px solid #000;
（盒子天生是竖直排列的）
span元素是水平排列的
padding：页面的内边距
padding是四个方向的
- padding-top 上padding
- padding-right 右padding
- padding-bottom 下padding
- padding-left 左padding
padding的四数值写法：分别表示上 右 下 左
padding: 10px 20px 30px 40px;
padding的三数值写法：分别表示 上 左右 下
padding的二数值写法：分别表示 **上下 左右 **
margin：盒子的外边距，即盒子和其他盒子之间的举例
- margin-top 上margin，“向上踹”
- margin-right 右margin，“向右踹”
- margin-bottom 下margin，“向下踹”
- margin-left 左margin，“向左踹”
margin塌陷：竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准
一些元素有默认的margin，在开始制作网页时，要将它们清除
body, ul, p { margin: 0; padding: 0;}
盒子的水平居中：将盒子左右两边的margin都设置为auto，盒子将水平居中
.box { margin: 0 auto; /*上下是0，左右自动*/}
文本居中：text-align: center; 和盒子水平居中是两个概念
盒子的垂直居中：需要使用绝对定位实现
文字垂直居中：令 行高等于盒子高
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * { margin:0; padding:0; } .box { width: 400px; height: 300px; padding: 10px; border:6px solid blue; margin: 40px auto; } .box .c1 { /*老大的总宽度只能是400px，实际占有的高度是200px，并且向下踹20px*/ width: 388px; height: 188px; border: 6px solid green; margin-bottom: 20px; } .box .c2 { /*老二剩下400px宽度、80px高度可用面积*/ width: 388px; height: 48px; padding: 10px 0; border: 6px solid orange; }</style><body> <div class="box"> <div class="c1">1</div> <div class="c2">2</div> </div></body></html>
box-sizing属性（大量应用于移动网页制作中）
将盒子添加了box-sizing: border-box; 之后，
盒子的width、height数字就表示盒子实际占有的宽高（不含margin）了
即padding、border变为“内缩”的，不再“外扩”
display
行内元素和块级元素
| display属性类型 | 是否能并排显示 | 是否能设置宽高 | 当不设置width属性时 | 举例 |
|---|---|---|---|---|
| 块级元素 | 否 | 是 | width自动撑满 | div、section、header、h系列、li、ul等 |
| 行内元素 | 是 | 否 | width自动收缩 | a、span、em、b、u、i等 |
行内块
- img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示
行内元素和块级元素的相互转换
- display: block; 将元素转为块级元素
- display: inline; 将元素转为行内元素（不多见）
- display:inline-block; 将元素转为行内块
元素的隐藏
使用display: none;属性可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用visibility:hidden;属性也可以将元素隐藏，但是元素不放弃自己的位置
第四节 总结
重点
什么是width、height？它们是元素的实际大小吗？
元素实际大小和元素空间尺寸分别指什么？
box-sizing属性的作用是什么？
margin的塌陷
用4,3,2个数值描述padding、margin
实现盒子居中
难点
盒模型的计算，尤其是父子盒模型的计算
行内元素和块级元素的相互转换