说起CSS规则,除了普通规则(属性和值,key:value),可能大家都会想到@media,@keyframes,@fontface等常用的,那剩余的大家是否有所了解呢。

我们先来看一看CSS有哪些规则:

  CSS的顶层样式表由两种规则组成的规则列表构成,⼀种被称为 at-rule,也就是at 规则,另⼀种是 qualified rule,也就是普通规则。at-rule由⼀个 @ 关键字和后续的⼀个区块组成,如果没有区块,则以分号结束。这些at-rule在开发中使⽤机会远远小于普通的规则。qualified rule则是指普通的CSS规则,由选择器和属性指定构成的规则。

下面我们来看看有哪些at规则

at规则:

  @charset

    @charset⽤于提示CSS文件使用的字符编码方式,它如果被使用,必须出现在最前面。这个规则只在给出语法解析阶段前使用,并不影响页面上的展示效果。

    @charset "utf-8";

  

  @import

    @import⽤于引⼊⼀个CSS文件,除了@charset规则不会被引入,@import可以引⼊另⼀个文件的全部内容。

  @import "mystyle.css";
  @import url("mystyle.css");
  @import [ <url> | <string> ]
  [ supports( [ <supports-condition> | <declaration> ] ) ]?
  <media-query-list>? ;

    import还⽀持 supports 和media query形式

  

  @media

    媒体查询,这个是很常用的,对设备进行判断,内部是一些普通的规则

   @media print {
     body { font-size: 10px }
   }

  @page

  page⽤于分页媒体访问网页时的表现设置,页面是⼀种特殊的盒模型结构,除了页面本身,还可以设置它周围的盒。

  @page {
    size: .5in 11in;
    margin: %;
    @top-left {
      content: "Hamlet";
    }
  @top-right {
    content: "Page " counter(page);
    }
  }

  @ counter-style

    counter-style产生⼀种数据,用于定义列表项的表现。 

  @counter-style triangle {
    system: cyclic;
    symbols: ‣;
    suffix: " ";
  }

  

  @ key-frames

    keyframes产⽣⼀种数据,⽤于定义动画关键帧。

  @keyframes diagonal-slide {
    from {
      left: ;
      top: ;
      }
    to {
      left: 100px;
      top: 100px;
      }
    }

    

  @ fontface
    fontface⽤于定义⼀种字体,icon font技术就是利⽤这个特性来实现的。

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

  

  @ support

    support检查环境的特性,它与media⽐较类似。

  @ namespace
    ⽤于跟XML命名空间配合的⼀个规则,表示内部的CSS选择器全都带上特定命名空间。

  @ viewport

    ⽤于设置视⼝的⼀些特性,不过兼容性⽬前不是很好,多数时候被html的meta代替。

  @color-profile

    是 SVG1.0 引⼊的CSS特性,但是实现状况不怎么好。
  @document

    还没讨论清楚,被推迟到了CSS4中。
  @font-feature-values

    允许作者在font-variant-alternates 中使用通用名称中使用通用名称,用于在OpenType中以不同方式激活功能。它允许在使用几种字体时简化CSS。

    

  @font-feature-values Font One { /* How to activate nice-style in Font One */
    @styleset {
    nice-style: ;
    }
   }   @font-feature-values Font Two { /* How to activate nice-style in Font Two */
    @styleset {
    nice-style: ;
    }
    }
  .nice-look
    { font-variant-alternates: styleset(nice-style); } /* Independent of the font */

被忽略的CSS规则的更多相关文章

  1. 【转】10条你不可不知的css规则

    10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 :[译]10条你不可不知的css规则正文: Published D ...

  2. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  4. sass 安装、配置,css规则

    http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装  1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...

  5. CSS规则的执行顺序(转)

    你对CSS规则的执行顺序是否了解,这里和大家分享一下,若两条规则具有相同的权值.起源及特殊性,那在样式表中最后出现的规则优先. 1.CSS规则之特殊性 首先来看一下这个例子将会发生的情形: <s ...

  6. CSS笔记(一)CSS规则

    CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素. CSS规则由两个主要的部分构成:选择器 + 一条或多条声明. 每条声明由一个属性和一个值构成. ...

  7. CSS规则

    CSS规则 --------------------------------------------- 1 前言 2 代码风格 2.1 文件 2.2 缩进 2.3 空格 2.4 行长度 2.5 选择器 ...

  8. 同一标签内多个css规则在页面中如何显示?

    这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...

  9. 动态修改css 规则

    页面引用了两个样式表: <link href="css/mui.min.css" rel="stylesheet" /> <link href ...

随机推荐

  1. Node Js模块讲解

    Node JS模块 所谓的Node JS模块其实就是指Node JS package,即nodejs包. 一 什么是NodeJS模块? 在说这个问题之前,我们有必要提出一个概念,即模块规范. 现阶段J ...

  2. go 利用chan的阻塞机制,实现协程的开始、阻塞、返回控制器

    一.使用场景 大背景是从kafka 中读取oplog进行增量处理,但是当我想发一条命令将这个增量过程阻塞,然后开始进行一次全量同步之后,在开始继续增量. 所以需要对多个协程进行控制. 二.使用知识 1 ...

  3. Ligg.EasyWinApp-000: 一款Windows应用编程框架介绍

        本框架(解决方案)是一个Windows应用编程框架和UI库,通过该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制( ...

  4. 利用ExecuteMultipleRequest来批量导入数据,成功的成功失败的失败,并生成导入结果文件

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  5. Hadoop_简介_01

    1. Apache Hadoop 1.1 Hadoop介绍 Hadoop是Apache旗下的一个用java语言实现的开源软件框架, 是一个开发和运行处理大规模数据的软件平台. 允许使用简单的编程模型在 ...

  6. Shell(六):输入/输出重定向

    重定向的作用是将命令的执行结果输出到指定的文件中. 重定向命令列表如下: 文件描述符 0 通常是标准输入(STDIN),1 是标准输出(STDOUT),2 是标准错误输出(STDERR). 1.输出重 ...

  7. 剑指offer-47:不用加减乘除做加法

    参考:https://www.cnblogs.com/zhangziqiu/archive/2011/03/30/ComputerCode.html <原码,反码,补码 详解> 题目描述 ...

  8. SpringCloud服务过滤filter

    一.目录展示 二.application.yml配置文件 三.MyZuulFilter package com.zn.filter; import com.netflix.zuul.ZuulFilte ...

  9. 用Python在25行以下代码实现人脸识别

    在本文中,我们将看到一种使用Python和开放源码库开始人脸识别的非常简单的方法. OpenCV OpenCV是最流行的计算机视觉库.最初是用C/C++编写的,现在它提供了Python的API. Op ...

  10. 求连通块个数 - BFS、DFS、并查集实现

    本文基于leetcode的200.岛屿数量(题目