重学前端（八）--CSS语法

CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则，另一种是 qualified rule，也就是普通规则。

一、at规则

at-rule 由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束。这些 at-rule 在开发中使用机会远远小于普通的规则。

1、charset

@charset 用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。

``` @charset "utf-8"; ```

2、import

@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。

``` @import "index.css"; @import url("index.css"); ```

3、media

media 就是大名鼎鼎的 media query 使用的规则了，它能够对设备的类型进行一些判断。在 media 的区块内，是普通规则列表。

``` @media print { body{ font-size:10pt; } } ``` ### 4、page

page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

@page{
        size:a4;//定义为a4纸
        margin:0 0 0 150px;//页面的编剧
    }
    @page rotated { size: landscape;} /*//定义纸张旋转*/

    .ccc{
        page: rotated; /*//引用旋转*/
        page-break-before:avoid;/*//前面不加空页*/
        page-break-after:avoid;/*//后面不加空页*/
    }

5、counter-style（会产生兼容性问题，在火狐上可以测试效果）

counter-style 产生一种数据，用于定义列表项的表现。

@counter-style h-j {
        system:cyclic;
        symbols:"\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
        /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
        suffix:" ";
    }
    ul.item li{
        list-style:hung;
    }

6、keyframes（-o-、-webkit-、-moz-、）

keyframes 产生一种数据，用于定义动画关键帧。

.keyframes{
        --006: #0068b7;
        width: 200px;
        height: 200px;
        background:var(--006) ;
        animation: move 3s infinite;
    }
    @keyframes move {
        0%{
            width: 200px;
        }
        100%{
            width: 500px;
        }
    }

7、font-face

fontface 用于定义一种字体，icon font 技术就是利用这个特性来实现的。

``` @font-face { font-family: Gentium; src: url(http://example.com/fonts/Gentium.woff); }

p { font-family: Gentium, serif; }


### 8、support（类似media）

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) { /自己的样式/ } /not、and、or/ /注释：如果浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式/


### 9、namespace
<p>用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。</p>

@namespace url(www.w3.org/1999/xhtml); @namespace svg url(www.w3.org/2000/svg);

/* 匹配所有的XHTML 元素, 因为 XHTML 是默认无前缀命名空间 */ a {}

/* 匹配所有的 SVG 元素 */ svg|a {}

/* 匹配 XHTML 和 SVG 元素 */ *|a {}

### 10、viewport

@viewport { min-width: 640px; max-width: 800px; }

@viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; }

@viewport { orientation: landscape; }


## 二、普通规则

<p>qualified rule 则是指普通的 CSS 规则，也就是我们所熟识的，由选择器和属性指定构成的规则。</p>

<ul>
<li>普通规则
<ul>
<li>选择器</li>
<li>声明列表
<ul>
<li>属性</li>
<li>值
<ul>
<li>值的类型</li>
<li>函数</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

### 1、选择器


### 2、声明：属性和值

<p>声明部分是一个由“属性: 值”组成的序列。</p>

<p><strong>属性</strong>是由中划线、下划线、字母等组成的标识符，CSS 还支持使用反斜杠转义。我们需要注意的是：属性不允许使用连续的两个中划线开头，这样的属性会被认为是 CSS 变量。</p>

<p>在<a href="https://www.w3.org/TR/css-variables/">CSS Variables 标准</a>中，以双中划线开头的属性被当作变量，与之配合的则是 var 函数：</p>

:root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { color: var(--main-color); }


<p><strong>值</strong>的部分，主要<a href="https://www.w3.org/TR/css-values-4/">在标准 CSS Values and Unit</a>，根据每个 CSS 属性可以取到不同的值，这里的值可能是字符串、标识符。</p>

<p>CSS 属性值可能是以下类型。</p>
<ul>
<li>CSS 范围的关键字：initial，unset，inherit，任何属性都可以的关键字。</li>
<li>字符串：比如 content 属性。</li>
<li>URL：使用 url() 函数的 URL 值。</li>
<li>整数 / 实数：比如 flex 属性。</li>
<li>维度：单位的整数 / 实数，比如 width 属性。</li>
<li>百分比：大部分维度都支持。</li>
<li>颜色：比如 background-color 属性。</li>
<li>图片：比如 background-image 属性。</li>
<li>2D 位置：比如 background-position 属性。</li>
<li>函数：来自函数的值，比如 transform 属性。</li>
</ul>

<p>一些属性会要求产生函数类型的值，比如 easing-function 会要求 cubic-bezier() 函数的值：</p>

<p>CSS 支持一批特定的计算型函数：</p>

<ul>
<li>calc()</li>
<li>max()</li>
<li>min()</li>
<li>clamp()</li>
<li>toggle()</li>
<li>attr()</li>
</ul>

<p><strong>calc()</strong>函数是基本的表达式计算，它支持加减乘除四则运算。在针对维度进行计算时，calc() 函数允许不同单位混合运算，这非常的有用。</p>
<p>例如：</p>

section { float: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 21em - 21px); }


<p><strong>max()、min() 和 clamp()</strong>则是一些比较大小的函数，max() 表示取两数中较大的一个，min() 表示取两数之中较小的一个，clamp() 则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。</p>

<p>toggle() 函数在规则选中多于一个元素时生效，它会在几个值之间来回切换，比如我们要让一个列表项的样式圆点和方点间隔出现，可以使用下面代码：</p>

ul { list-style-type: toggle(circle, square); }



![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/6/11/16b4557760c0661e~tplv-t2oaga2asx-image.image)