在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。 常规规则 常规规则遵循下面的语法: 代码如下: @[KEYWORD] (RULE); @charset 代码如下: @charset "UTF-8"; @import 代码如下: @import 'global.css'; 虽然流行的CSS预处理器都支持@import,但是应该指出的是,它们的工作原理不同于原生的CSS:预处理器会抓取CSS文件并将它们处理成一个CSS文件,对原生CSS,每一个@import都是一个独立的HTPP请求。 对于将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 代码如下: @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 代码如下: @font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); } @keyframes 代码如下: @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 代码如下: @page :first { margin: 1in; } @supports 代码如下: /* 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 @ 用法内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论