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. [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt

    [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt --//前几天做了sql语句在mutexes上的探究.今天对比不同_mutex_wait_scheme模式cpu ...

  2. c/c++ gdb 调试带参数的程序

    直接gdb pgname 参数1 这种方式,参数1是不会带到gdb里的 1,首先启动程序 gdb pgname 2,设置程序的参数 set args 参数1

  3. thinkphp v5.1 开发笔记

    一.安装TP5.1 1.使用git安装 <1>下载Tp git clone https://github.com/top-think/think tp5 <2>安装核心库 gi ...

  4. 我的第一个python web开发框架(27)——定制ORM(三)

    在上一章中,我们已经创建好ORM的基类了,接下来要做的就是将基类的常用方法一一实现. 首先我们来看看之前项目中,最常见的获取指定主键的记录实体 @get('/api/product/<id:in ...

  5. RabbitMQ持久化

    我们知道,如果消息接收端挂了,消息会保存在队列里.下次接收端启动就会接收到消息. 如果RabbitMQ挂了怎么办呢?这时候需要将消息持久化到硬盘 消息发送端:producer ........... ...

  6. Jenkins + Ansible + Gitlab之ansible篇

    Ansible介绍 什么是Ansible? Ansible是一个开源部署工具 开发语言:Python 特点:SSH协议通信,全平台,无需要编译,模块化部署管理 作用:推送Playbook进行远程节点快 ...

  7. day22---面向对象基础初识

    面向过程编程: 核心是过程两个字,指的是解决问题的步骤,即先干什么再干什么,基于面向过程设计的程序就好比在设计一条流水线,是一种机械的思维方式. 优点:复杂问题流程化, 缺点:程序的可扩展性差 面向对 ...

  8. C++ shared_ptr、unique_ptr、weak_ptr

    shared_ptr unique_ptr weak_ptr 内存泄漏 智能指针 引用计数 循环引用 reset

  9. Python学习--Python运算符

    什么是运算符? 举个简单的例子 4 + 5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: 算数运算符 比较(关系)运算 ...

  10. linux查询日志常用命令,经常更新

    1.grep命令 grep -c "查询内容" filename    ------c,是小写,可以知道你要查询的内容在这个文件中是否存在 grep -C 10 "查询内 ...