胡子哥的重学前端(笔记)css语法

9次阅读

共计 795 个字符,预计需要花费 2 分钟才能阅读完成。

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
未完待续

正文完
 0