CSS中1些@标准的用法小结

2021-01-20 07:15 jianzhan

at-rule是1个申明,为CSS出示实行或如何主要表现的命令。每一个申明以@开始,后紧跟1个能用的重要字,这个重要字当做1个标志符,用于表明CSS该做甚么。这是1个通用性的英语的语法,虽然每一个at-rule有其它英语的语法变体。
基本标准

基本标准遵照下面的英语的语法:

       

拷贝编码
编码以下:
@[KEYWORD] (RULE);

@charset
这个标准界定了访问器应用的标识符集,假如款式表包括非ASCII characters (e.g:UTF⑻)。留意,被放在HTTP头顶部的标识符集可能遮盖@charset标准

       

拷贝编码
编码以下:
@charset "UTF⑻";

@import
这个标准标示恳求款式表,在这1行,假如內容是正确的,就会引进1个外界的CSS文档。

       

拷贝编码
编码以下:
@import 'global.css';

尽管时兴的CSS预解决器都适用@import,可是应当指出的是,它们的工作中基本原理不一样于原生态的CSS:预解决器会抓取CSS文档并将它们解决成1个CSS文档,对原生态CSS,每个@import全是1个单独的HTPP恳求。
@namespace
针对将CSS运用在XML HTML(XHTML),这个标准是是非非常有效的,由于XHTML元素能在CSS中被做为1个挑选器应用。

       

拷贝编码
编码以下:
/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

嵌套循环标准

嵌套循环标准包括了附加的非空子集申明,在其中1些申明只能用于特殊状况。

       

拷贝编码
编码以下:
@[KEYWORD] {
/* Nested Statements */
}

@document
这个标准为款式表特定了标准:只能运用于特殊网页页面。举个粟子,大家出示1个URL,随后为这个特殊的网页页面自定款式,在别的网页页面中,这些款式会被忽视。

      

拷贝编码
编码以下:
@document
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}

@font-face
这个标准容许在web网页页面上载入自定字体样式,对自定字体样式有不一样水平的适用,可是这个标准接纳句子建立和出示这些字体样式。

       

拷贝编码
编码以下:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}

@keyframes
在众多CSS特性中,这个标准是重要帧  动漫的基本,并容许大家标识动漫刚开始和完毕的标示。

       

拷贝编码
编码以下:
@keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}

@media
这个标准包括标准申明,能用于为特殊显示屏特定款式,这些申明能够包括显示屏尺寸,在适屏款式中会很有效.

       

拷贝编码
编码以下:
/* iPhone in Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}

或只在文本文档复印时应用款式

       

拷贝编码
编码以下:
@media print {
}

@page
这个标准为即将复印的独立网页页面界定款式。非常的是,它能为网页页面伪元素设定外边距::first、:left和:right

       

拷贝编码
编码以下:
@page :first {
margin: 1in;
}

@supports
这个标准可检测访问器知否适用某个特点/作用,假如考虑标准,可能为这些元素运用特殊款式。有点像Modernizr,但的确是CSS特性。

       

拷贝编码
编码以下:
/* Check one supported condition */
@supports (display: flex) {
.module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}

总结

at-rule可使CSS做1些瘋狂趣味的事儿。虽然文章内容中的示例很基本,可是能够看到,针对特殊的标准,它们是怎样应用款式的,从而建立配对特殊情景的客户体验和互动。