前端笔记|CSS基础（选择器、伪类、定位、CSS3） css3|css

修改时间：2021年1月23日
作者：pp_x
邮箱：pp_x12138@163.com

文章目录

CSS
- 什么是CSS
- CSS和HTML的结合方式
- - 内联/行内样式
  - 内部样式表
  - 外部样式表
  - 三种方式优先级
- CSS选择器
- - 基本选择器
  - 高级选择器
- CSS伪类
- CSS基本属性
- - 文本属性
  - 图像属性
  - 列表属性
  - 边框属性
  - 轮廓属性
  - - 轮廓和边框的区别
  - 盒子模型
- CSS定位
- - 默认定位
  - 浮动定位
  - - 解决浮动塌陷问题
  - 相对定位
  - 绝对定位
  - 固定定位
  - z-index
- CSS3
- - 圆角
  - 阴影
  - 文本溢出的表现形式
  - 不透明度
  - 渐变
  - 过渡
  - 2D转换
  - 动画
  - 背景
  - - 背景位置
    - 背景裁切
    - 背景大小

CSS 什么是CSS

CSS是指层叠样式表

CSS和HTML的结合方式内联/行内样式

是在我们的HTML标签上通过style属性来引用CSS代码
优点：简单方便
缺点：只能对一个标签进行修饰

内部样式表

通过标签来声明我们的CSS. 通常标签我们推荐写在和之间，也就是“脖子”的位置
优点：可以通过多个标签进行统一样式设置
缺点：它只能在本页面进行修饰

外部样式表

要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
引入css方式：
- @import 'css/css01.css'
二者区别
- 加载顺序不同，@import方式先加载html，后加载css；link方式先加载css
- @import方式不支持JavaScript的动态修改

三种方式优先级

内联 > 内部 > 外部

CSS选择器基本选择器

元素选择器：对页面相同的标签进行统一的设置
类选择器：使用时使用"."来描述，它描述的是元素上的class属性值
id选择器：使用时用“#”来描述，描述的是元素上的id属性（具有唯一性）
选择器组：用“，”隔开
注意：优先级：id选择器>类选择器>标签选择器

高级选择器

层次选择器：
1. 后代选择器 E F：选择器E里面的所有选择器F
2. 子代选择器 E>F：选择器里面的所有子选择器（只能作用于直接子类）
3. 相邻兄弟选择器E+F：仅仅位于选择器E后面的选择器F（同一父元素下，一定是相邻且在选择器E的后面）
4. 通用兄弟选择器E~F：跟在选择器E后面所有的选择器F（同一父元素下，所有跟在E后面的F）
结构伪类选择器
- 非指定类型的子元素
1. E F：first-child 第一个子元素F
2. E F: last-child 最后一个子元素F
3. E F:nth(n) 第n个子元素F
- 指定类型的子元素
1. 选择器 E F：first-of-type 第一个类型为type的子元素
2. 选择器 E F:last-of-type 最后一个类型为type的子元素
3. 选择器 E F:nth-of-type(n) 指定第n个类型为type的子元素
属性选择器
1. 选择器 E[name] 作用E元素内部有name属性的
2. 选择器 E[name=？] 作用域E元素内部有name属性且值为？的
3. 选择器 E[name^=a] 作用域E元素内部且值为a开头的
4. 选择器 E[name$=a] 作用域E元素内部且值为a结尾的
5. 选择器 E[name*=a] 作用域E元素内部且含有a的

CSS伪类

a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */

CSS基本属性文本属性

指定字体：font-family : value;
字体大小：font-size : value;
- px：像素
- em：倍数
字体加粗：font-weight : normal/bold;
文本颜色：color : value;
文本排列：text-align : left/right/center;
文字修饰：text-decoration : none/underline;
行高：line-height : value;
首行文本缩进：text-indent : value （2em）

图像属性

background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-repeat 设置背景图像的墙纸效果，是否及如何重复
- repeat：在垂直方向和水平方向重复，为重复值
- repeat-x：仅在水平方向重复
- repeat-y：仅在垂直方向重复
- no-repeat：仅显示一次
background-position 设置背景图像的起始位置
- 1：控制水平方向 x轴：正值，向右移动；负值，向左移动
- 2：控制垂直方向 y轴：正值，向下移动；负值，向上移动
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
- 默认值是 scroll：默认情况下，背景会随文档滚动
- 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

列表属性

list-style-type：
- none：无标记。（去除标记）
- disc：默认。标记是实心圆。
- circle：标记是空心圆。
- square：标记是实心方块。
- decimal：标记是数字。
- decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
- lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
- upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
- lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
- upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

边框属性

> div{border-width: 20px; border-color: green; border-style: outset; } hello

border - style：
- none：无边框
- dotted：定义一个点线边框
- dashed：定义一个虚线边框
- solid：定义一个实现边框
- double：定义两个边框，宽度与border-width相同
- groove：定义一个3D凹槽
- ridge：定义一个3D脊边框
- inset：定义一个3D嵌入边框
- outset：定义一个3D突出边框

轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别

边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

盒子模型

margin(外边距) - 盒子与盒子之间的距离
border(边框) - 盒子的保护壳
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
content(内容) - 盒子的内容，显示的文本或图像

CSS定位默认定位

块级元素：h1…p…div等，自上而下，垂直排列；可以改变宽高(display:block)
行内元素：a，span等，自左向右，水平排列，不可以改变宽高(display:inline)
行内块元素：input，img等，从左至右，水平排列，自动换行，可以改变宽高(display:inline-block)

浮动定位

浮动（float）的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。当浮动框高度超出包含框的时候就会出现包含框不会自动升高来闭合浮动元素（“高度塌陷”现象）
脱离正常文档流
float取值：
- none：不浮动
- left：向左浮动
- fight：向右浮动

解决浮动塌陷问题

方法一：使用带clear属性的空元素

在父容器最底部加上一个空div

优点：简单，代码少，浏览器兼容性好。缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。不推荐使用。

方法二：使用CSS的overflow属性

在父容器内设置css overflow：hidden;

给浮动元素的容器添加overflow:hidden; 或overflow:aoto；可以使浮动元素回到容器层内，清除浮动。

方法三：给浮动元素的容器添加浮动

给浮动元素的容器（父元素）也添加上浮动属性即可清除浮动但是这样会使下一个元素收到这个浮动元素的影响，影响整体布局，不推荐使用。

方法四：使用CSS的:after伪元素

在父容器内设置css .parent:after{ content: ''; height: 0px; display: block; clear: both; }

:after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）。 :after伪元素实现元素末尾添加一个看不见的块元素清理浮动。

相对定位

relative 相对定位
1. 在文档流中
2. 相对自身原来的位置
3. 发生偏移时保留原来位置
4. 自身偏移时不会影响到其他元素

绝对定位

absolute 绝对定位
1. 绝对定位相对父容器的位置（其父容器必须含有定位，如果没有向上查找）
2. 脱离文档流
3. 如果没有设置位置则显示在原来的位置（但不在文档流中，即浮在原来的位置上）

固定定位

fixed 固定定位
1. 脱离文档流
2. 相对浏览器的位置（不会随着滚动条滚动）
3. 精确的控制位置： left right top bottom

z-index

z轴属性，要配合相对或绝对定位来使用。
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）
值越大越靠上

CSS3 圆角

border-radius：左上右上右下左下;
border-radius：四个角;
border-radius：左上右下，右上左下
border-radius：50%; 圆形

阴影

box-shadow：insert x y a b color;
- 第一个参数代表的是模糊度的方向，默认向外，如果设置了inset向内
- 第二个参数代表的是x轴方向的偏移（正数向右，负数向左）
- 第三个参数代表的是y轴方向的偏移（正数向下，负数向上）
- 第四个参数代表的是模糊度（值越大越模糊）
- 第五个参数代表的是扩展范围（值越大范围越广）
- 第六个参数代表的是模糊的颜色

文本溢出的表现形式

text-overflow：
ellipsis：显示不完的部分采用…
clip：显示不完的部分采用裁剪
设置该属性时注意要设置：
- white-space: nowrap; （内容不换行）
- overflow: hidden; （超出部分隐藏）

不透明度

opacity:0-1;
- 0代表的完全透明
- 1代表完全不透明

opacity作用于当前容器以及当前容器里面所有的元素
渐变

线性渐变：background：linear-gradient(to right,red,green)
- 第一个代表渐变的方向
- 第二个、第三个代表渐变的颜色
径向渐变：background:radial-gradiedt(20px at 20px 20px , red,green)
- 第一个代表是径向直径，at代表的中心位置，可以使用方向的常用值
- 第二个参数、第三个代表的是渐变的颜色

过渡

transition-duration：持续时间
transition-property：过渡属性（默认all 可选width height）

文章图片
【前端笔记|CSS基础（选择器、伪类、定位、CSS3）】transition-delay：设置延迟的时间启动动画
transition-timing-function：设置过渡的形式
easy：（逐渐变慢）
easy-in：（加速）
easy-out：减速
linear：匀速
easy-in-out：先加速在减速

文章图片

2D转换

transform：
- 平移
  - translate(x,y) x和y表示位移的位置
  - translateX(x) x轴方向的平移
  - translateY(y) y轴方向的平移
- 缩放
  - scale(n) n指放大或缩小的倍数
  - scaleX(n) n指x轴放大或缩小的倍数
  - scaleY(n) n指y的放大或缩小的倍数
    注意如果n为负数，先按反方向放大或缩小，再按原来的动画执行
- 旋转
  - rotate(deg) 旋转角度
  - transform-origin：right 旋转的基点
- 倾斜
  - skew(deg) 倾斜的角度
  - skeyX(deg) x轴方向的倾斜正数往左负数往右
  - skeyY(deg) y轴方向的倾斜正数往上负数往下

动画

关键帧设置动画

@keyframes 动画名称{ from{} to{} } from相当于0% to相当于100% 或者在内部直接写百分比

引用动画
- animation-name：动画的名称
- animation-duration：动画的过渡时间
- animation-iteration-count：动画的循环次数（infinite无限次）
- animation-delay：动画的延迟时间（只作用于一次）
- animation-direction：动画播放前重置(动画播放后的一个转态)
  - alternate：动画从上一次结束开始(来回交替)
  - alternate-reverse：动画第一次从结束开始
- animation-timiing-function：动画的运行方式
  - easy：（逐渐变慢）
  - easy-in：（加速）
  - easy-out：减速
  - linear：匀速
  - easy-in-out：先加速在减速
- animation-play-state 设置动画的播放状态
  - pause：暂停
  - running：启动
- animation-fill-mode：设置最后停留的位置
  - backwards：回到起始位置
  - forwards：停在动画结束位置