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(竖屏)

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的命名控件配合使用,暂时还没搞明白怎么用,详情

/* 默认命名空间 */
@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的形式来代替

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

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

@viewport {
  orientation: landscape;
}

css at @ 规则的更多相关文章

  1. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  2. 【转】常用css命名规则

    常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...

  3. CSS 命名规则

    CSS书写顺序: 位置属性(position, top, right, z-index,display, float等) 大小(width, height, padding, margin) 文字系列 ...

  4. 一些CSS命名规则

    一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...

  5. CSS命名规则常用的css命名规则

    CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  6. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  7. [转] 常用的CSS命名规则

    (一)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度 ...

  8. CSS命名规范(规则)常用的CSS命名规则

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  9. CSS命名规则和如何命名

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  10. css层叠规则(层叠样式表)

    CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...

随机推荐

  1. idea 模板注释设置

    一.首先我们来设置IDEA中类的模板: 1.File-->settings-->Editor-->File and Code Templates-->Files 我们选择Cla ...

  2. 5.1Python数据处理篇之Sympy系列(一)---Sympy的大体认识

    目录 目录 前言 目录 前言 sympy是python一个强大的数学符号运算第三方库,具体的功能请看下面操作 官网教程: https://docs.sympy.org/latest/tutorial/ ...

  3. DRF 序列化器-Serializer (2)

    作用 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 完成数据校验功能 3. 反序列化,把客户端发送过来的数据,经过request以后变成字典,序列化器 ...

  4. particles.js在vue上的运用

    转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架 ...

  5. Java多线程——中断机制

    前言:在Java多线程中,中断一直围绕着我们,当我们阅读各种关于Java多线程的资料.书籍时,“中断”一词总是会出现,笔者对其的理解也是朦朦胧胧,因此非常有必要搞清楚Java多线程的中断机制. 1.J ...

  6. linux sort排序及取前几条数据

    查看sort --help -n 根据字符串的数值进行比较 -k 根据某一个关键字的位置或者类型排序 -r 倒序排序 -t 字段分隔,后面跟分隔符 查看head --help -n 打印前几行记录,后 ...

  7. BugPhobia开发篇章:Beta阶段第X次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第十次Scrum Meeting 敏捷开发起始时间 2015/12/29 00:00 A.M. 敏捷开发终止时间 2016/01/01 23 ...

  8. PS调出米黄色复古柔和外景人物照

    配色思路 从片中可以看出主要景物近处的有人物和栏杆,远处的海水,天空和礁石.为体现出远近层次,近处景物选择了偏黄的色调,远处景物选择了偏青色调. 调色 以下面这张照片为例,先放上对比图: LR部分 首 ...

  9. OracleSql语句学习(五)

    --数据库对象数据库对象包含:表,视图,索引,序列视图VIEN视图在SQL语句中体现的角色与表一样,但是视图并非真实存在的表,它只是对应一条查询语句的结果集 使用视图通常是为了重用子查询,简化SQL语 ...

  10. opensetting禁用后小程序二次授权的问题-以及根据定位城市获取天气

    一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSet ...