CSS学习--@rule

@rule

@charset

指定样式表中使用的字符编码。

/* @charset语法：一个空格，编码集用双引号括起来 */
@charset "utf-8";

@import

用于从其他样式表导入样式规则。

@import <url> | <media-query-list>;
/* media-queries： 决定通过URL引入的 CSS 规则 在什么条件下应用 */
@import url('landscape.css') screen and (orientation:landscape);
/* url： 可以是绝对路径或者相对路径；也可以只指明包名 */
@import url("chrome://communicator/skin/");

@namespace

使用在CSS样式表中的XML命名空间

/* 默认命名空间 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/* 命名空间前缀 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
/* eg */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

@media

基于一个或多个 媒体查询 的结果来应用样式表的一部分

@media <media-query-list>;
@media (400px <= width <= 700px) {
	body { line-height: 1.4; }
}

@page

用于在打印文档时修改某些CSS属性

• size: 指定页面盒模型所在的容器的大小和方向。

  size: auto | landscape | portrait | <length> | <page-size>;
  <page-size>: A3 | A4 | A5 | B4 | B5 | JIS-B4 | JIS-B5 | letter | legal | ledger;
  

• marks: 向文档添加剪切标记和/或注册标记。

  /* crop: 将显示裁切标记。指示应在何处裁切页面 */
  /* cross: 十字标记将显示。用于对齐纸张 */
  marks: crop | cross | none;
  

• bleed: 为页面框盒指定一个限制区域，超过这个区域的页面内容将被裁剪。

  bleed: auto | <length>;
  

@page { size | marks | bleed | css};

@page {
	size: 4in 6in landscape;
	marks: crop cross;
	bleed: 1cm;
	margin: 2cm;
};

• 伪类

  *：blank
  选择用户输入为空的输入框

  *：first
  打印文档的时候，第一页的样式。

  *：left
  对打印文档的左侧页设置CSS样式.

  *：right
  打印文档的所有右页。

@font-face

指定一个用于显示文本的自定义字体

@font-face {
	font-family: name<string>;
	src: file path <url> | <local> ;
	font-variant: font-variant value;
	font-stretch: font-stretch value;
	font-weight: font-weight value;
	font-style: font-style;
	unicode-range: unicode-range;
}
/* 先查找本地字体是否存在local()指定字体，不存在就加载url()指定的字体 */
@font-face {
	font-family: MyHelvetica;
	src: local("Helvetica Neue Bold"),
	local("HelveticaNeue-Bold"),
	url(MgOpenModernaBold.ttf);
	font-weight: bold;
}

@keyframes

通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤

@keyframes animation-name{
	from{}
	<percentage>{}
	to{}
}

@supports

指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明

@supports rule;
@supports rule and | or rule;
@supports not rule;
@supports selector();

@supports not selector(:is(a, b)) {
	/* 不支持 :is() 时的备选方案 */
	ul > li,ol > li {}
}

@document

据文档的 URL 限制其中包含的样式规则的作用范围。

• url()，匹配整个 URL。
• url-prefix()，匹配文档的 URL 是否以参数指定的值开头。
• domain()，匹配文档的域名是否为参数中指定的域名或者为它的子域名。
• regexp()，匹配文档的 URL 是否和参数中指定的正则表达式匹配。该表达式必须匹配整个 URL。

@document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org),
regexp("https:.*") {
/* 该条CSS规则会应用在下面的网页:
+ URL为"http://www.w3.org/"的页面.
+ 任何URL以"http://www.w3.org/Style/"开头的网页
+ 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页
+ 任何URL以"https:"开头的网页 */

/* 暗黑模式 */
	body {
		color: #fff;
		background: #000;
	}
}