CSS @规则

最新推荐文章于 2024-08-08 14:27:26 发布

weixin_34054866

最新推荐文章于 2024-08-08 14:27:26 发布

阅读量1k

点赞数

文章标签： xhtml

原文链接：https://juejin.im/post/5cbdbb03f265da036504fb1e

版权

一个 at-rule 是一个CSS 语句，以'@'符号开头,后跟一个标识符，并包括直到下一个';'的所有内容,或下一个CSS块，以先到者为准。 MDN-at-rules

一、at-rules规则归类

规则	类型	作用	备注
@charset	常规规则	定义样式表使用的字符集	http head中`<meta charset="utf-8">`将覆盖该内容
@import	常规规则	从其他样式表导入样式规则	导入的规则（不导入@charset）优先于其他规则
@namespace	常规规则
@media	嵌套规则	根据媒体类型进行响应式布局
@page	嵌套规则	打印文档的css属性
@font-face	嵌套规则	自定义字体
@keyframes	嵌套规则	声明CSS3 animation动画关键帧
@supports	嵌套规则	是否支持某CSS属性声明
@document	嵌套规则	指定适用于特定页面的样式/为用户定义的样式表

二、at-rules规则详解

1.常用规则

接受以下常用语法

@[KEYWORD] (RULE);
复制代码

1.@charset

@charset "UTF-8";
复制代码

2.@import

@import 'global.css';
复制代码

3.@namespace

不懂怎么用

/* 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);
复制代码

2.嵌套规则

所有的嵌套规则都可以嵌套进条件规则中

@[KEYWORD] {
  /* Nested Statements */
}
复制代码

4.@media

作用根据用户媒体类型从而进行响应式布局方法 @media@规则由一个或多个媒体查询组成，每个媒体查询包含一个可选的媒体类型和若干媒体特性。多个查询可通过使用逻辑运算符以多种方式组合起来，且对大小写敏感。

仅当媒体查询计算为真时，即，当指定的媒体类型与正在显示文档的设备的类型匹配并且所有媒体特征表达式计算为真时，才应用相应的样式。涉及未知媒体类型的查询总是错误的。

/*以下示例为当前屏幕为彩色屏幕，且最大宽度为800px时命中该样式，
即用此方法检测当前屏幕是否为手机屏幕*/
@media screen and (max-width: 800px) {
    bottom: -25px;
}
复制代码

附录媒体类型描述设备的一般类别。除非使用not或only逻辑运算符，否则媒体类型是可选的，并且将隐含使用all类型。其他媒体类别

媒体类别	all	print	screen	speech
说明	所有设备	分页资料或打印模式查看的文档	彩色的电脑屏幕	语音合成器

5.@page

作用在打印文档时修改某些CSS属性 ⚠️注意 不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。

@page :first {
  margin: 1in;
}
复制代码

6.@font-face

作用允许网页开发者为其网页指定在线字体，从而消除对用户电脑字体的依赖。示例、

<-- 定义了一个可下载的字体，并应用到了文档的整个body标签上。 --!>
<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @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 }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>
复制代码

警告你不能在一个 CSS 选择器中定义 @font-face

.className { 
  @font-face { 
    font-family: MyHelvetica; 
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold; 
  } 
}
复制代码

7.@keyframes

作用比transitions更能控制动画序列的中间步骤；通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤；简单示例复杂示例

<div class="ball"></div>
复制代码

/* simple "from > to" */
@keyframes move {
  from {
      left: 5%;
  }
  to {
      left: 85%;
  }
}

/* assign animation to ball element */
.ball {
  animation: 1s move;
}

/* base styles */

body {
  text-align: center;
  background: #fafafa;
  position: relative;
}

.ball {
  width: 10%;
  padding-bottom: 10%;
  border-radius: 50%;
  background: #2098d1;
  box-shadow: -3px 5px 0px rgba(0,0,0,0.2);
  position: absolute;
  top: 100px;
  left: 5%;
}
复制代码

8.@supports

⚠️提示 实验中的功能，需检查当前浏览器是否支持作用检测是否支持指定的CSS属性，若命中则渲染样式

@supports (animation-name: test) {
    … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
    @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
      …
    }
}

/* 检测是否不支持指定的CSS属性 */
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 这里的CSS代码用来模拟text-align-last:justify */
}
复制代码

9.@document

⚠️提示 实验中的功能，需检查当前浏览器是否支持

作用主要是为用户定义的样式表设计的，但也可以在作者定义的样式表

方法指定一个或多个匹配函数。如果任何功能适用于给定的URL，则该规则将对该URL生效。可用的函数有下面几个:

url(), 匹配整个URL
url-prefix(), 匹配文档的URL是否以参数指定的值开头
domain(), 匹配文档的域名是否为参数中指定的域名或者为它的子域名
regexp(), 匹配文档的URL是否和参数中指定的正则表达式匹配.该表达式必须匹配整个URL.

@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; }
}
复制代码