CSS中@使用方法总结(实例详细说明■)

日期：2021-01-20 类型：科技新闻我要分享

关键词：微信公众号平台小程序，微信打分小程序，小程序发布，小程序大全，微信小程序编程

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

基本标准

基本标准遵照下边的英语的语法：

编码以下:

@[KEYWORD] (RULE);

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

编码以下:

@charset "UTF-8";

@import
这一标准标示恳求款式表，在这里一行，假如內容是恰当的，便会引进一个外界的CSS文档。

编码以下:

@import 'global.css';

尽管时兴的CSS预解决器都适用@import，可是应当强调的是，他们的工作中基本原理不一样于原生态的CSS：预解决器会爬取CSS文档并将他们解决成一个CSS文档，对原生态CSS，每个@import全是一个单独的HTPP恳求。
@namespace

针对将CSS运用在XML HTML（XHTML），这一标准是是非非经常出现用的，由于XHTML原素能在CSS中被做为一个挑选器应用。

编码以下:

/* 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);

嵌套循环标准

嵌套循环标准包括了附加的非空子集申明，在其中一些申明只有用以特殊状况。

编码以下:

@[KEYWORD] {
/* Nested Statements */
}

@document
这一标准为款式表特定了标准：只有运用于特殊网页页面。举个粟子，大家出示一个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做一些瘋狂趣味的事儿。虽然文章内容中的实例很基本，可是能看到，针对特殊的标准，他们是怎样应用款式的，进而建立配对特殊情景的客户感受和互动。

到此这篇有关CSS中@使用方法总结的文章内容就详细介绍到这了,大量有关css @ 使用方法內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：处理CSS款式矛盾的好多个方㊑法(总结) 返回下一篇：没有了