CSS语法之@规则(at-rule)

2024-05-01 21:03:47

at-rule由一个@关键字和后续的一个区块组成，如果没有区块，则以分号结束。

@charset

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

@charset "utf-8"

@import

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

@import "mystyle.css";
@import url("mystyle.css");

@media

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

@media print {
body {
font-size: 10pt;
}
}

@page

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

@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}

@counter-style

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

@counter-style triangle {
system: cyclic;
suffix: "";
}

@key-frames

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

@keyframes diagonal-side {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}

@fontface

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

@font-face {
font-family: Gentium;
src: url(http://xxxx);
}
p {
font-family: Gentium, serif;
}

@support

support检查环境的特性，它与media比较类似。

@namespace

用于跟xml命名空间配合的一个规则，表示内部的css选择器全都带上特定命名空间。

@viewport

用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替。

其他

以下是一些不太推荐使用的@规则：

@color-profile

@document

@font-feature-values

CSS语法之@规则(at-rule)相关推荐

css @语法，@规则 @import @charset @font-face @fontdef @media @page
CSS At-Rules Reference 样式表规则 At-Rules 样式表规则 CSS Version 版本 Compatibility 兼容性 Description 简介 @impo ...
CSS - 语法规则
CSS - 语法规则一.At-rule 一种以@开头的声明语句,以分号;结尾.语法规则为: @IDENTIFIER (RULE); . At-rule主要用作表示CSS的行为,参考: https:/ ...
「三」浏览器中CSS 语法解析过程
CSS 语法解析过程 1.在浏览器系列文章中,今天终点讲下CSS解析这块内容.我们已知浏览器的渲染流程中HTML Parser会生成 DOM树,而 CSS Parser会将解析结果附加到 DOM 树上 ...
html和css之间有什么区别,html语法和css语法之间有什么区别
区别:HTML由围绕内容的标签组成,例" 内容 ":而CSS由一条或多条声明和选择器组成,每条声明由一个属性和一个值组成,例"div{font-size:12px;}&q ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
CSS语法与CSS选择器
目录 CSS 语法实例例子解释 CSS 选择器 CSS 元素选择器实例 CSS id 选择器实例 CSS 类选择器实例实例实例 CSS 通用选择器实例 CSS 分组选择器实例所有简 ...
html+css语法基础
一,html5语法基础 1,<!–注释-- >,/* */注释语句(因为直接输出不会显示,所以在每个标签前都加了空格) 2,< head>< /head>头部标签, ...
CSS语法大全，学习笔记
序号名称说明/代码备注 1. CSS 中英文名层叠样式表 Cascading Style Sheet 2. CSS 文件拓展名 .css 3. CSS 注释 /*注释内容*/ 4. 4 种样式 ...

最新文章

热门文章