CSS整理集

前言

CSS 作为前端程序员每日都要运用的知识点，但是要想写好它其实并不容易，因为它没有像HTML和JS那样有份标准的文档，而是由很多的标准组成，因此为了更好的梳理CSS知识，对其语法知识点进行整理。

正文

CSS的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是at 规则，另一种是 qualified rule，也就是普通规则。at规则正是掌握CSS的一些高级特性所必须的内容。qualified rule则是指普通的CSS规则，也就是我们所熟识的，由选择器和属性指定构成的规则。

at 规则
- @charset ： https://www.w3.org/TR/css-syntax-3/
  
  @charset用于提示CSS文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。
  
  @charset "utf-8";
- @import ：https://www.w3.org/TR/css-cascade-4/
  
  @import用于引入一个CSS文件，除了@charset规则不会被引入，@import可以引入另一个文件的全部内容。
  
  @import "mystyle.css";@import url("mystyle.css");
- @media ：https://www.w3.org/TR/css3-conditional/
  
  media就是大名鼎鼎的media query使用的规则了，它能够对设备的类型进行一些判断。在media的区块内，是普通规则列表。
```
      @media print {
          body { font-size: 10pt }
      }
```
- @page ： https://www.w3.org/TR/css-page-3/ —很少使用
  
  page用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。
```
      @page {
          size: 8.5in 11in;
          margin: 10%;

          @top-left {
              content: "Hamlet";
          }
          @top-right {
              content: "Page " counter(page);
          }
      }
```
- @counter-style ：https://www.w3.org/TR/css-counter-styles-3 —很少使用
  
  counter-style产生一种数据，用于定义列表项的表现。
```
      @counter-style triangle {
          system: cyclic;
          symbols: ‣;
          suffix: " ";
      }
```
- @keyframes ：https://www.w3.org/TR/css-animations-1/
  
  keyframes产生一种数据，用于定义动画关键帧。
```
      @keyframes diagonal-slide {

      from {
          left: 0;
          top: 0;
      }

      to {
          left: 100px;
          top: 100px;
      }

      }
```
- @fontface ：https://www.w3.org/TR/css-fonts-3/
  
  fontface用于定义一种字体，icon font技术就是利用这个特性来实现的。
```
      @font-face {
          font-family: Gentium;
          src: url(http://example.com/fonts/Gentium.woff);
      }

      p { font-family: Gentium, serif; }
```
- @supports ：https://www.w3.org/TR/css3-conditional/ —很少使用
  
  support检查环境的特性，它与media比较类似。
- @namespace ：https://www.w3.org/TR/css-namespaces-3/ —很少使用
  
  用于跟XML命名空间配合的一个规则，表示内部的CSS选择器全都带上特定命名空间。
- @ viewport
  
  用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替。
普通规则

qualified rule主要是由选择器和声明区块构成。声明区块又由属性和值构成。我在下面的列表中，介绍了这部分语法的组成要点。
- 选择器
我们从语法结构可以看出，任何选择器，都是由几个符号结构连接的：空格、大于号、加号、波浪线、双竖线，这里需要注意一下，空格，即为后代选择器的优先级较低。

然后对每一个选择器来说，如果它不是伪元素的话，由几个可选的部分组成，标签类型选择器，id、class、属性和伪类，它们中只要出现一个，就构成了选择器。

如果它是伪元素，则在这个结构之后追加伪元素。只有伪类可以出现在伪元素之后。
- 声明：属性和值
  
  声明部分是一个由“属性:值”组成的序列。
  
  属性是由中划线、下划线、字母等组成的标识符，CSS还支持使用反斜杠转义。我们需要注意的是：属性不允许使用连续的两个中划线开头，这样的属性会被认为是CSS变量。
```
  ```css
        /*以双中划线开头的属性被当作变量，与之配合的则是 var 函数*/
        :root {
            --main-color: #06c;
            --accent-color: #006;
        }
        /* The rest of the CSS file */
        #foo h1 {
            color: var(--main-color);
        }
  ```
```
  值的部分，根据每个CSS属性可以取到不同的值，这里的值可能是字符串、标识符。
  - CSS属性值可能是以下类型
    - CSS范围的关键字：initial，unset，inherit，任何属性都可以的关键字。
    - 字符串：比如content属性。
    - URL：使用url() 函数的URL值。
    - 整数/实数：比如flex属性。
    - 维度：单位的整数/实数，比如width属性。
    - 百分比：大部分维度都支持。
    - 颜色：比如background-color属性。
    - 图片：比如background-image属性。
    - 2D位置：比如background-position属性。
    - 函数：来自函数的值，比如transform属性。
  - css函数
    
    css里面有些很有意思的函数，一些属性会要求产生函数类型的值，比如easing-function会要求cubic-bezier()函数的值,如下只是列举一些知道的函数。
    - calc()
    - max()
    - min()
    - clamp()
    - toggle()
    - attr()
    calc()函数是基本的表达式计算，它支持加减乘除四则运算。在针对维度进行计算时，calc()函数允许不同单位混合运算，这非常的有用。
    
    max()、min()和clamp()则是一些比较大小的函数，max()表示取两数中较大的一个，min()表示取两数之中较小的一个，clamp()则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。
    
    toggle()函数在规则选中多于一个元素时生效，它会在几个值之间来回切换，比如我们要让一个列表项的样式圆点和方点间隔出现，可以使用下面代码：
    
    ul { list-style-type: toggle(circle, square); }
    
    attr()函数允许CSS接受属性值的控制。
CSS预处理器

除了上述的基本css语法，我们在工作总多数会用到需要css预处理器，如less/sass/stylus这些都具备一些自身的规则。目的只是为了让我们更加方便和快捷的使用css进行开发，提高css代码的复用程度。

CSS知识点整理

前言

正文

CATALOG

FEATURED TAGS

FRIENDS