这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课程重点
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
CSS是什么？
Cascading Style Sheets 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS基本语法
CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一份CSS属性和属性值
选择器名 {
属性 ： 属性值；
属性 ： 属性值；
}
CSS的使用方法
1 行内式
<p style="color:red;font-size:50px;">
这是一段文本
</p>
2 嵌入式
<style>
h2 {
color: red;
font-family:"arial black";
}
</style>
3 引入外联样式文件
<link rel="stylesheet" type="text/css" href="css文件" />
CSS选择器
一、常用的四类选择器
1、元素选择器
语法：标签名{}
2、id选择器
语法：#id属性值{}
3、类选择器
语法：.class属性值{}
4、通配选择器
语法：*{}
二、复合选择器 1、交集选择器
作用：选中同时符合多个选择器条件的元素
语法：选择器1选择器2...{}
注意：如果选择器中有元素的选择器，元素选择器必须放在前面
2、并集选择器
作用：同时选中对应选择器的元素
语法：选择器1，选择器2，选择器3...{}
三、属性选择器 [属性] 选中含有指定属性的元素
[属性=属性值] 选中含有指定属性和指定属性值的元素
[属性^=属性值] 选中含有指定属性和指定属性值开头的元素
[属性$=属性值] 选中含有指定属性和指定属性值结尾的元素
[属性*=属性值] 选中指定属性名和含有指定属性值的元素
四、伪类选择器 伪类：不存在的类，表示元素的一种状态
1.常用的伪类 :first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
2、否定伪类 :not() 将符号条件的元素去除
3、元素的伪类 :link 表示未访问过的a标签 :visited 表示访问过的a标签
以上两个伪类是超链接所独有的 由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用 :hover 鼠标移入后元素的状态 :active 鼠标点击后，元素的状态
五、伪元素选择器 同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态
常见的几个伪元素：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
六、组合选择器
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B,如果它是A的子孙 | nav a |
| 亲自组合 | A>B | 如果它是A的子元素 | section>p |
| 兄弟组合 | A~B | 如果它在A后且和A同级 | h2~p |
| 相邻组合 | A + B | 如果它紧跟在A后面 | h2+p |
CSS文字样式
font-family 字体类型
可以使用font-face使用webfonts
font-size：字体大小(默认16px)
font-weight：字体粗细
font-style：字体样式
调试CSS
右键点击页面，选择「检查」
使用快捷键 Ctrl+Shift+I (Windows） Cmd+opt+I (Mac)
CSS样式优先级
优先级:
(最高)!important>行内样式> id选择器> 类选择器>标签>通配符> 继承 > 浏览器默认样式(最低)
CSS继承
CSS的某些属性具有继承性
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
CSS布局技术
文档流布局：这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行。
浮动布局：浮动方式布局就是使用float 属性，使元素脱离文档流，浮动起来。
定位布局：我们也可以通过position 属性来进行定位。
CSS行级元素和块级元素
HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p,ul,form,div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span,input等元素。
一、块级元素
每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；
块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。
DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
二、行内元素
也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。
三、block（块）元素的特点:
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
四、inline元素的特点
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下:
设置宽度width 无效。 设置高度
height无效，可以通过line-height来设置。 设置margin
只有左右margin有效，上下无效。
设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
CSS flex、grid
### flex 布局
容器属性
flex-flow // flex-direction + flex-wrap
flex-direction // 主轴方向
flex-wrap // 是否换行
justify-content // 主轴对齐方式
align-items // 交叉轴对齐方式
align-content // 多行对齐方式
元素属性
order // 排序
flex-grow // 放大比例
flex-shrink // 缩小比例
flex-basis // 基准值
flex // flex-grow + flex-shrink + flex-basis
align-self // 交叉轴对齐方式
### gird 布局
grid-template-columns // 列宽
grid-template-rows // 行高
grid-template-areas // 区域
grid-template // grid-template-columns + grid-template-rows + grid-template-areas
grid-column-gap // 列间距
grid-row-gap // 行间距
grid-gap // grid-column-gap + grid-row-gap
grid-auto-columns // 自动列宽
grid-auto-rows // 自动行高
grid-auto-flow // 自动排列方式
grid // grid-template + grid-gap + grid-auto-flow
grid-column-start // 列开始位置
grid-column-end // 列结束位置
grid-column // grid-column-start + grid-column-end
grid-row-start // 行开始位置
grid-row-end // 行结束位置
grid-row // grid-row-start + grid-row-end
grid-area // grid-row-start + grid-column-start + grid-row-end + grid-column-end
