胡子哥的重学前端（笔记）css语法

at 规则

@charset

在外部样式表文件内使用。指定该样式表使用的字符编码。
该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
在外部css文件中写法如下：

@charset "utf-8";
body{sRules}
div{sRules}
...

@import

指定导入的外部样式表及目标媒体。

@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

@media

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

@counter-style

使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等上。

  @counter-style counter名字{
     system  : 算法;
     range   : 使用范围;
     symbols : 符号; or additive-symbols: 符号
     prefix  : 前缀;
     suffix  : 后缀;
     pad     : 补零(eg. 01,02,03);
     negative: 负数策略;
     fallback: 出错后的默认值;
     speakas : 语音策略;
}

详细使用方法

@key-frames

定义动画的关键帧

使一个div元素逐渐移动200像素：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@font-face

使用您需要的字体,当今流行的fontawesome就是用这种方式加载图标的
新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

viewport

这个和meta name="viewport"类似，但支持没有使用meta的好，所以建议使用meta

CSS 支持一批特定的计算型函数：

calc() max() min() clamp() toggle() attr()

calc()

calc() 函数用于动态计算长度值。

 ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

 ● 任何长度值都可以使用calc()函数进行计算；

 ● calc()函数支持 "+", "-", "*", "/" 运算；

 ● calc()函数使用标准的数学运算优先级规则；
 

max()

用于比较数值的大小并取出最大的那个。

div{font-size:max(30px, 3em);}
div{width:max(10% + 20px, 300px);}

min()

用于比较数值的大小并取出最小的那个。

div{font-size:min(30px, 3em);}
div{width:min(10% + 20px, 300px);}

clamp()

mozilla 上说没有浏览器支持，暂不研究

toggle()

允许子孙元素使用取值序列中的值循环替换继承而来的值。
在更老的版本中使用的是：cycle()

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

在上述代码中，定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle, square, box。

attr()

attr() 函数返回选择元素的属性值。
content和attr()配合使用

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字

<div data-line="1"></div>
div[data-line]:after { content: attr(data-line);/* 属性名称上不要加引号！ */ }