温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中@规则有哪些

发布时间:2022-03-23 10:47:35 来源:亿速云 阅读:187 作者:小新 栏目:web开发

小编给大家分享一下css中@规则有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一个at-rule就是一个CSS语句,以@开头,后接标识符,最后以;结束。

@charset

@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。

/* @charset "<charset>"; */ @charset "UTF-8";
@import

@import用于导入外部CSS样式表文件。

/* @import url; */ /* @import url list-of-media-queries; */ @import 'custom.css'; @import url("fineprint.css") print;
@namespace

@namespace是用来定义使用在CSS样式表中的XML命名空间的@规则。

/* @namespace <namespace-prefix>? [ <string> | <url> ]; */ @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg);
@media

@media用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式。

/* @media */ @media screen and (min-width: 900px) {  h2 {  color:red;  font-size:14px;  } } web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法 (详细的前端项目实战教学视频,PDF)
@page

@page用于在打印文档时修改某些CSS属性。@page规则只能修改margin、orphans、widow 和 page breaks of the document,对其他属性的修改是无效的。

/*  * @page <page-selector-list> {  * <page-body>  * }  */ @page {  size: 10in 20in;  margin: 10% 20%; }
@keyframes

@keyframs通过定义动画序列中的关键帧来控制CSS动画不同步骤的状态。

/* @keyframes */ @keyframes slidein {  from {  margin-left: 100%;  width: 300%;  }  to {  margin-left: 0%;  width: 100%;  } }
@supports

@supports用来检测规则组的规则是否生效。规则与@media类似

/*  * @supports <supports_condition> {  * <specific rules>  * }  */ @supports (display: flex) {  div {  display: flex;  } }
@viewport

@viewport用于设置视口(viewport)的特性。

/*  * @viewport {  * <group-rule-body>  * }  */ @viewport {  min-width: 640px;  max-width: 800px; } @viewport {  zoom: 0.75;  min-zoom: 0.5;  max-zoom: 0.9; } @viewport {  orientation: landscape; }
@counter-style

@counter-style用于自定义counter的样式

/*  * @counter-style <counter-style-name> {  * <group-rule-body>  * }  */ @counter-style circled-alpha {  system: fixed;  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;  suffix: " "; } .items {  list-style: circled-alpha; }
@font-face

@font-face用于给网页指定文本字体。

/*  * @font-face {  * <group-rule-body>  * }   */ @font-face {  font-family: "Bitstream Vera Serif Bold";  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif }
@doucment

@document如果满足条件组的条件,则规则生效(推延至 CSS Level 4 规范)

/*  * @document name(guide) {  * <group-rule-body>  * }  */ @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:"开头的网页 */  /* make the above-mentioned pages really ugly */  body {  color: purple;  background: yellow;  } }

以上是“css中@规则有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI