css @规则

Posted 2021-11-26 amiezhang

css相信我们都不陌生，但是我们真的对它非常了解吗？

css主要分为两种规则组成：

1. 一种被称为 at-rule，也就是 at 规则

2. 另一种是 qualified rule，也就是普通规则

今天让我们来讲讲我们不常用的 at 规则吧：

1. @charset

@charset 用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面，不能在<style>元素内的样式属性内使用。

我也没搞清楚具体有什么用，只要html和css保持编码一致，并且html上加上 <meta charset="xxxx"> 即可，@charset写不写也没什么作用

@charset "utf-8";

 

2. @import

@import 当时我以为是less sass的语法糖，其实它是css本身的特性，可以在css文件里引入其他css文件

@import ‘./style.css‘;
@import url(./style.css);
@import ‘./style.css‘ screen and (min-width:500px);

 

3. @media

@media查询应该是我们见得最多的@rule之一了，针对不同的媒体类型定义不同的样式

@media 媒体类型1,媒体类型2 and|not|only (媒体特性) {
    CSS-Code;
}

 

媒体类型没有被废弃的只有以下几种：

1. all 所有设备

2. print 打印机和打印预览

3. screen 电脑/手机屏幕

4. speech 应用于屏幕阅读器等发声设备

媒体特性常用无非就是（更多）：

1. min-width、max-width

2. min-height、max-height

3. orientation（方向）:  landscape(横屏)/portrait(竖屏)

例如：

@media screen and (min-width: 500px) and (max-width: 800px) {         
     ... 
}

 

4. @page

@page 用于设置分页媒体的样式，和@media print相似，但是@page只能设置部分css样式

MDN原文说到： You can only change the margins, orphans, widows, and page breaks of the document.

 

5.  @counter-style

自定义list-style的图形，目前只有firefox支持，详情

@counter-style aaa {
  system: cyclic;
  symbols: ?;
  suffix: " ";
}  

ul {
  list-style: aaa;
}

 

 

6. @keyframes

也是我们常用的@rule之一，用于定义animation的动画帧

div {
    position: relative;
    height: 100px;
    background: red;
    animation:  mymove 5s ease infinite;
}
@keyframes mymove
{
    from {top:0px;}
    to {top:200px;}
}

 

7. @font-face

用于引入一些额外的字体，放在css顶部或者css规则组

@font-face {
  font-family: aaa;
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: aaa, serif; }

 

8. @supports

用于检测css兼容的特性

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

 

9. @namespace 

需要混用其他XML组件的时候，例如HTML5里内联的SVG、MathML或者混合多个词汇表的XML，css匹配规则最好按命名空间应用，详情

/* 默认命名空间 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/* 命名空间前缀 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

 

10. @viewport

设置视窗的属性，目前safari、firefox都不支持，更多使用meta的形式来代替（<meta name="viewport" content="width=device-width, initial-scale=1.0">）

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}