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);/* 属性名称上不要加引号! */ }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。