这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
本堂课重点内容：
理清组合的关系、注意一些CSS的细节问题
理解记忆CSS常用标签
详细知识点介绍
CSS简介：
-
Cascading Style Sheets
-
用来定义页面元素的样式，设置字体颜色、盒子位置和大小、添加动画效果等
-
基本结构：
选择器 { 属性: 属性值; //属性＋属性值成为声明 } -
如何在页面中使用CSS？
外链：html里放个链接，将CSS放到CSS文件中
嵌入：在html文件中写style
内联：将style写在标签里头，一般不建议这样子 -
一些选择器名和格式 通配选择器： * {}
id选择器： #id名
类选择器： .类名
属性选择器： [标签属性] ；根据标签属性，查找含有此标签的属性去给这个属性添加CSS
伪类：不属于标签和属性定位元素
-
几种伪类：状态伪类和结构性伪类
a:active 点击链接
a:visited 点击过的链接
a:link 默认当前状态的样式
a:focus 聚焦在链接上，包括点击
组合
颜色选择
- rgb、rgba、hsl（可以直接调节灰度和透明度，适合用在点击或者悬停前后的颜色状态）、name
关于字体——font
- font-family：字体1, 字体2, ……; 优先级从高到低
一些字体举例： - font-size:字号;
字号：px、百分比、em - font-style:italic(斜体) / normal(不倾斜);
- font-weight:100 ~ 900; 控制字的粗细
- font:style weight size family; 复合写法
特异度
- 优先级排序：id > (伪)类 > 标签
- 可以对大类标签先添加CSS，再部分修改部分标签的CSS
继承
- 某些属性会自动继承其父元素的计算值，除非显示特定的一个值
- 显示继承：让一些本来不可以继承的元素变得可继承
* {
属性名:inherit;
}
初始值
- CSS中，每个属性都有初始值
bgc 初始值为transparent
margin-left 的初始值为0 - 可以使用initial关键字显示重置为初始值
网页布局相关技术：常规流、浮动、绝对定位
- 常规流：行级、块级、表格布局、flexBox、grid
关于边框——border：
- 三个属性
border-width
border-style:solid(实线) / dotted(虚线) border-color - 四个方向:border-top、-bottom、-left、-right
其他的一些小点
- white-space:normal（默认，输入多个空格会缩减为一个空格） / nonwrap（强制不换行） / pre（保留，比如输入多少个空格就是空多少） / pre-wrap（保留的前提下换行） / per-line（需要去合并空格，但保留换行）;
- width和height取值： px、百分比、auto，height取值百分比时，只有容器有固定height才会生效
- box-sizing:border-box 可以适当避免盒子超过100%显示的问题
- overflow-hidden; 隐藏溢出内容
