华山资源网

CSS中@用法小结(示例详解)
网页制作 2024/11/18 佚名
3 1

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做一些疯狂有趣的事情。尽管文章中的示例很基础，但是可以看到，对于特定的条件，它们是如何使用样式的，从而创建匹配特定场景的用户体验和交互。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com