说起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. python学习-class对象

    # 面向对象 python,java,c## 面向过程 C # 类和对象# 类 类型类别.类别 物以类聚 一类事物# 班级.人类.动物类.车.学生类.老师类.手机.电脑# 统称 == 共同特性# 不具 ...

  2. python故障排除

    在初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  3. php使用phpqrcode生成二维码

    前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...

  4. 《Dotnet9》建站-本站使用的什么主题?

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  5. C#程序编写高质量代码改善的157个建议【4-9】[TryParse比Parse、使用int?来确保值类型也可以为null、readonly和const、0值设为枚举的默认值、避免给枚举类型的元素提供显式的值、习惯重载运算符]

    建议4.TryParse比Parse好 如果注意观察,除string之外的所有的基元类型.会发现它们都有两个将字符串转换为自身类型的方法:Parse和TryParse.以类型double为例. 两者最 ...

  6. 在项目中在线使用Iconfont图标

    Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果.而且是国产的,网速会比较快,还可以改变图标颜色. 它提供svg.png.ai三种格式下载,之前我一直都是乖乖的一个个下 ...

  7. 3.Android-ADT之helloworld项目结构介绍

    1.helloworld项目结构如下图所示: src 放项目的源代码的.而MainActivity.java文件则对应helloworld界面代码,代码如下所示: gen BuildConfig.ja ...

  8. iOS 和 H5 页面交互(WKWebview 和 UIWebview cookie 设置)

    iOS 和 H5 页面交互(WKWebview 和 UIWebview cookie 设置) 主要记录关于cookie相关的坑 1. UIWebview 1. UIWebview 相对比较简单 直接通 ...

  9. java开发问题两三事(1)

    1. 场景描述 最近在工作中碰到的几个问题,有点坑,记录下,遇到相同或类似问题的朋友可以参考下. 2. 解决方案 2.1 Disconnected from the target VM idea控制台 ...

  10. vue组件之间的通信方式

    组件之间的通信方式有很多种 这里分享4种组件之间的通信方式 props(主要是父传子)  自定义事件(主要是子传父)  pubsub消息订阅与发布  xuex 1.props和自定义事件 app.vu ...