css @规则

Posted amiezhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css @规则相关的知识,希望对你有一定的参考价值。

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 marginsorphanswidows, 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;
}

 

以上是关于css @规则的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)

CSS代码片段

CSS代码片段