CSS-基础篇

网页分为三个部分：

• 结构(HTML)
• 表现(CSS) — 用来设置网页中元素的样式
• 行为(JavaScript)

使用 CSS 来修改元素的样式

第一种方式(内联样式，行内样式)

• 在标签内部通过 style 属性来设置元素的样式
• 缺点：样式只能对一个标签生效
• 注意：开发时绝对不要使用内联样式
• 示例：<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

第二种方式（内部样式表）

• 将样式编写到 head 中的 style 标签里,通过 CSS 的选择器来选中元素并为其设置各种样式
• 优点：
  • 可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
  • 方便对样式进行复用
• 缺点：只能对一个网页起作用，不能跨页面进行复用

第三种方式 （外部样式表） 最佳实践

• 可以将 CSS 样式编写到一个外部的 CSS 文件中,然后通过 link 标签来引入外部的 CSS 文件
• 优点：
  • 外部样式表需要通过 link 标签进行引入，使样式可以在不同页面之间进行复用
  • 可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
  • 示例：<link rel="stylesheet" href="./style.css">

元素

• 父元素

  • 直接包含子元素的元素叫做父元素

• 子元素

  • 直接被父元素包含的元素是子元素

• 祖先元素

  • 直接或间接包含后代元素的元素叫做祖先元素
  • 一个元素的父元素也是它的祖先元素

• 后代元素

  • 直接或间接被祖先元素包含的元素叫做后代元素
  • 子元素也是后代元素

• 兄弟元素

  • 拥有相同父元素的元素是兄弟元素

样式的继承

• 为一个元素设置的样式同时也会应用到它的后代元素上
• 继承是发生在祖先与后代之间的
• 继承的设计是为了方便开发，利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
• 注意：并不是所有的样式都会被继承，比如背景相关的，布局相关等的这些样式都不会被继承。

样式的冲突

• 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
• 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

css 单位

长度单位：

• 在 css 中使用的都是相对单位
• px — Pixels 像素
  • 屏幕（显示器）实际上是由一个一个的小点点构成的
  • 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
  • 所以同样的 200px 在不同的设备下显示效果不一样
  • web 开发中的主流，在分辨率的宽高中占 npx/分辨率宽
• % — 百分比
  • 也可以将属性值设置为相对于其父元素属性的百分比
  • 设置百分比可以使子元素跟随父元素的改变而改变
  • 对于 font-size、line-height 等属性是基于期父元素的 font-size
  • 对于 text-indent、margin、padding、width 等属性则是基于父元素的宽度
• em — 元素的字体高度
  • em 是相对于元素的字体大小来计算的
  • 基于当前元素/父元素的font-size : 当前元素 12px 的话，font-size：12*nem
  • 1em = 1font-size = 16px
  • em 会根据字体大小的改变而改变
  • 具有级联关系
• rem — 根元素(html)的 font-size — css3 新增
  • rem 是相对于根元素的字体大小来计算
  • 无级联
  • IE8 及以下、Safari 4、IOS 3.2 等不支持 rem
• ex — x-height，字母 x 的高度
• ch — 字符 0 的宽度 — css3 新增
• vw — 视窗宽度 viewpoint width — css3 新增
  • 1vw = 视窗宽度的 1%
• vh — 视窗高度 viewpoint height — css3 新增
  • 1vh = 视窗高度的 1%
• vmin — 以较小者为准 1vh — css3 新增
• vmax — 以较大者为准 1vh — css3 新增

角度单位 — 主要在动画旋转中使用

• deg(度) — 一个圆 360°
• grad(梯度) — 一个圆共 400 梯度
• rad(弧度) — 一个圆共 2Π 弧度
• turn(转、圈) — 一个圆共一圈
• 公式：90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
• 使用： transform: rotate(1turn)

颜色单位

• 在 CSS 中可以直接使用颜色名来设置各种颜色，示例：background-color: red;
• RGB 值：
  • RGB 通过三种颜色的不同浓度来调配出不同的颜色
  • R red，G green ，B blue
  • 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
  • 语法：RGB(红色,绿色,蓝色)
  • 示例：background-color: rgb(255,255,255);
• RGBA:
  • 就是在 rgb 的基础上增加了一个 alpha 表示不透明度
  • 需要四个值，前三个和 rgb 一样，第四个表示不透明度
  • 1 表示完全不透明，0 表示完全透明，.5 半透明
  • 示例：background-color: rgba(106,153,85,.5);
• 十六进制的 RGB 值：
  • 语法：#红色绿色蓝色
  • 颜色浓度通过 00-ff
  • 如果颜色两位两位重复可以进行简写，#aabbcc –> #abc
  • 示例：background-color: #ff0;
• HSL 值 HSLA 值
  • H 色相(0 - 360)
  • S 饱和度，颜色的浓度 0% - 100%
  • L 亮度，颜色的亮度 0% - 100%
  • 示例：background-color: hsla(98, 48%, 40%, 0.658);

CSS 预处理器 Sass、Less、Stylus 的区别

CSS 预处理器概念

• 是一种语言用来为 CSS 增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在 CSS 中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让 CSS 更加简洁，适应性更强，代码更直观等诸多好处 基本语法区别

区别

• Sass 是以.sass 为扩展名，Less 是以.less 为扩展名，Stylus 是以.styl 为扩展名 变量的区别
• Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和 css 属性是一样的。
• Less 变量是以@开头的，其余 sass 都是一样的。
• Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在 stylus 中不能用@开头
• 三种预处理器都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus 还有一些高级特性。例如循环、判断等
• CSS预处理器-sass语法
• CSS预处理器-less语法

css3 篇

box-shadow — 设置元素阴影

• x-offset — 水平偏移量
• y-offset — 处置偏移量
• blur-radius — 可选，模糊半径，默认值为 0
• spread-radius — 可选，扩散半径，默认值为 0
• color — 可选，阴影颜色，默认继承元素的 color 属性
• inset — 可选，是否内部阴影，默认为外部阴影

text-shadow — 设置文本阴影

• x-offset — 水平偏移量
• y-offset — 处置偏移量
• blur-radius — 可选，模糊半径，默认值为 0
• color — 可选，阴影颜色，默认继承元素的 color 属性

(简)border-image — 设置边框图片

• border-image-source:url() — 图片路径
• border-image-slice — 上右下左偏移量
• border-image-width — 图片宽度
• border-image-outset — 图边框图像超过边框盒的量，默认值为 0
• border-image-repeat：stretch(拉伸) | repeat(重复) | round(缩放自适应) — 图片重复方式

border-radius — 圆角半径

box-reflect — 反射

• box-reflect：none | <direction> <offset>? <mask-box-image>?
• direction: 反射的方向，可选值为 above，below，left，right。
• offset: 表示本体和反射之间的间隔，可设置为长度值也可设置为百分比。此参数可省略，默认为 0
• mask-box-image: 用于设置反射的遮罩，可设置为渐变或者一个图片。此参数可省略。
• Html-媒体查询布局
• CSS-滤镜篇
• 过渡(transition)、动画(animation)、形状转换(transform)

补充知识

// Clamp(最小值，最大值和中间值的灵活单位)，值介于最小值和最大值之间它将使用中间值
font-size: clamp(100%,1rem + 2vw,24px)
            ||
font-size: min(max(1rem,4vw), 22px)