跳到主要内容

CSS 预处理器

CSS 预处理器（ CSS Preprocessor ）为 CSS 增加编程特性，通过编译器将使用新语法的文件输出为一个普通的 CSS 文件，解决 CSS 难以复用、代码冗余、可维护性低的问题，对 CSS 来说不是锦上添花而是雪中送炭。常用的预处理器有 Less 、 Sass 和 Stylus 。

  • 用变量存储多次引用的信息（如颜色值、字体、边距等），只需修改一个地方，就能让所有引用之处都随之改变

  • 新语法中的混合（ mixin ）能够重用一段样式代码，可用混合将自动截取或列表中的小箭头样式组织在一起，需要这段代码的选择器只需简单引入即可

  • 内置丰富的函数，可处理颜色、字符串、数字和选择器等，也可自定义函数，适应特定需求

  • 可像 JavaScript 那样使用数学运算（如加减乘除等），条件判断和循环，几句代码，就可描述一大段 CSS 样式

  • 选择器可嵌套选择器，沿着嵌套的选择器链向上组合形成最终的选择器，嵌套的形式模拟出了 HTML 的层级结构，同时形成了命名空间，选择器之间的关系更明显，增强了文件的可读性

  • 导入规则可让各部分代码保持独立，模块化管理，各个导入的文件最终被编译生成一个 CSS 文件

  • 通过编译生成 CSS 文件，降低了对 CSS 文件的控制力，如果书写不当，那么编译出的 CSS 文件将会巨大而复杂

  • 调试难度增加，在浏览器中调试的是编译后的 CSS 文件，并不是编译前的源码

  • 带来了一定的学习成本，新人需要学习预处理器的语法规则

CSS 单位​

绝对单位​

在 CSS 中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素影响。绝对单位一般多用于传统平面印刷，而极少用于前端开发。

相对单位​

在 CSS 中，相对单位定义的大小是不固定的，一般是相对其它长度而言。

px​

px ，全称 pixel （像素，指的是一张图片中最小的点，或者是计算机屏幕中最小的点。

如果不考虑屏幕分辨率，也可以把 px 当作绝对单位来看待，这也是为什么很多地方说 px 是绝对单位的原因。

%

  • width 、 height 、 font-size 的百分比是相对于父元素"相同属性"的值来计算的
  • line-height 的百分比是相对于父元素的 font-size 值来计算的
  • vertical-align 的百分比是相对当前元素的 line-height 值来计算的

em​

在 CSS 中， em 是相对于"当前元素"的字体大小而言的。其中， 1em 等于"当前元素"字体大小。这里的字体大小指的是以 px 为单位的 font-size 值。

在 CSS 中，使用 em 作为单位有以下三个小技巧。

  • 首行缩进使用 text-indent:2em 实现
  • 使用 em 作为统一单位
  • 使用 em 作为字体大小单位

rem​

rem ，全称 font size of the root element ，指的是相对于根元素（即 html 元素）的字体大小。

rem 布局是也是移动端最常用的字体大小之一。

rem 跟 em 很相似，不过也有明显区别： em 是相对"当前元素"的字体大小，而 rem 是相对"根元素"的字体大小。

国外大部分主流网站都是使用 em 作为单位，而且 W3C 也建议我们使用 em 作为单位。

CSS 特性​

CSS 具有两大特性：继承性和层叠性。

继承性​

CSS 的继承性，指的是子元素继承了父元素的某些样式属性。

不过我们要注意，并不是所有属性都具有继承性，如 padding 、 margin 、 border 等就不具备继承性。

在 CSS 中，具有继承性的属性有三大类。

  • 文本相关属性： font-family 、 font-size 、 font-style 、 font-weight 、 font 、 line-height 、 text-align 、 text-indent 、 word-spacing
  • 列表相关属性： list-style-image 、 list-style-position 、 list-style-type 、 list-style ；
  • 颜色相关属性： color

层叠性​

CSS 的层叠性，指的就是样式的覆盖。对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些样式具有相同的权重， CSS 会以最后定义的属性的值为准；也就是"后来者居上"原则。

CSS 优先级​

CSS ，全称 Cascading Style Sheet （层叠样式表）。

层叠，其实指的就是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。当"同一个元素"的"同一个样式属性"被运用上多个属性值时，我们就需要遵循一定的优先级规则来选择属性值了。

样式覆盖发生冲突常见的共有以下五种情况。

  • 引用方式冲突。行内样式 >（内部样式 = 外部样式）
  • 继承方式冲突。如果由于继承方式引起的冲突，则"最近的祖先元素"获胜
  • 指定样式冲突。当直接指定的样式发生冲突时，样式权值高者获胜。行内样式 > id 选择器 > class 选择器 >元素选择器
  • 继承样式与指定样式冲突
  • !important

如何覆盖 !important​

想要覆盖 !important 声明的样式很简单，共有两种解决方法。

  • 使用相同的选择器，再添加一条 !important 的 CSS 语句。不过这个 CSS 语句得放在后面。因为在优先级相同的情况下，后面定义的会覆盖前面定义的（后来者居上）
  • 使用更高优先级的选择器，再添加一条 !important 的 CSS 语句

使用"大杀器" !important 可以将样式提升到最高等级，不管这个样式在哪个样式表还是在哪个选择器中。如果在同一样式中出现了多个 !important ，则遵循后来者居上原则。

CSS 引入方式​

在初学者阶段，我们接触了三种 CSS 引入方式，我们来简单回顾一下。

  • 外部样式表
  • 内部样式表
  • 行内样式表

除了这三种方式，在 CSS 中其实还有一种 @import 方式（即"导入样式表"）。 @import 方式跟外部样式表很相似。不过在实际开发中，我们极少使用 @import 方式，而更倾向于使用 link 方式（外部样式）。原因在于 @import 方式先加载 HTML 后加载 CSS ，而 link 先加载 CSS 后加载 HTML 。如果 HTML 在 CSS 之前加载，页面用户体验非常差。因此，我们不需要去了解 @import 方式。

分类​

样式规则（ style rule ）是一种格式化指令，可以应用于 Web 页面上的元素，比如文本段落或链接。样式规则由一个或多个样式属性以及它们关联的值组成。内部样式表（ internal stylesheet ）直接存放在 Web 页面内，而外部样式表（ external stylesheet ）则存在于单独的文档中，并通过一个特殊的标签简单地链接到 Web 页面。

作用​

CSS 包括几种样式属性，它们用于控制字体、颜色、对齐方式和边距等，不一而足。 CSS 中的样式属性可以一般可以分成两大类。

  • 布局属性，由影响 Web 页面上的元素定位的属性组成，比如边距、填充和对齐方式
  • 格式化属性，由影响 Web 站点内的元素的视觉显示的属性组成，比如字体类型、大小和颜色

导入样式表​

  • link 导入， <link href="style.css" rel="stylesheet" type="text/css">

  • href : 样式表路径

  • type ：导入文件的文本类型

  • rel ： 定义关联样式表 也可以设置 title 属性，部分浏览器允许通过 title 选择要应用的样式表

  • @import 导入，可在 <style> 标签内引入文件地址，通过 url 引入路径

特性​

  • 层叠性
  • 继承性

margin --> 边界​

特性

  • 外边距始终透明

  • 某些相邻的 margin 会重叠

  • margin 的重叠只发生在上下相邻的块元素上

  • 浮动元素的 margin 不与任何 margin 重叠

  • 设置了 overflow 属性 ,取值不为 visible 的块级元素 ,将不与它的子元素发生 margin 重叠

  • 绝对元素的 margin 不与任何 margin 重叠

  • 根元素的 margin 不与其它任何 margin 折叠

padding --> 补白​

  • 由于补白不产生重叠 ,所以用来调整元素之间的距离会更容易
  • 为元素设置背景图时 ,补白部分也会显示背景
  • 对于内联元素 ,补白可以影响元素的大小 ,而 边界 (margin) 不行

一般网站包括 标题（ logo ）、广告（ banner ）、导航（ menu ）、功能（ serve ）、内容（ content ）、版权（ copyright ）。

设计要求

  • 考虑基本结构时，可以不考虑语义，统一使用 div
  • 为基本结构的每一个 div 元素命名（设置 id 属性，以便后期好控制）
  • 可以考虑为整个页面结构设计一个外套，以便控制

基本结构​

页眉、导航、主体、侧栏、脚注。

SEO 优化​

调整页面排版，使其更有助于搜索引擎的抓取。