最近在看极客时间winter大神的重学前端系列,遇到了许多不常用但是很重要的知识点.感觉视野得到了极大的开阔(打个广告,哈哈).

其中css @规则令人印象深刻。简单的做下笔记:

@namespace

这个css规则还是蛮重要的,MDN有相关介绍--https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace

@namespace url(http://www.w3.org/1999/xhtml);

@namespace svg url(http://www.w3.org/2000/svg);

/* 匹配所有的XHTML <a> 元素, 因为 XHTML 是默认无前缀命名空间 */

a {}

/* 匹配所有的 SVG <a> 元素 */

svg|a {}

/* 匹配 XHTML 和 SVG <a> 元素 */

*|a {}

　　

说的简单点就是:为了分别给不同命名空间下的相同元素可以分别设置样式.

@media

想必是好多响应式设计都是借助于这一规则。

它可以针对不同媒体使用响应式,因为我么多说媒体是手机、pad、computer.

它还有以下媒体类型

链接地址为如下:

https://www.runoob.com/cssref/css3-pr-mediaquery.html

 

@ support

检测是否支持指定的CSS属性.

例如：

  @supports (display:flex) {

    section { display: flex }

    ...

    }

如果浏览器支持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式.

@charset

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

@import 

@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。

@import "mystyle.css";

@import url("mystyle.css")

通常此指令放在css文件其实位置;

@ counter-style

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

 @counter-style circled-alpha {

  system: fixed;

  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;

  suffix: " ";

}

ul {

   list-style: circled-alpha;

}

    </style>

</head>

<body>

    <ul class="list">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li>10</li>

    </ul>

</body>

</html>

代码效果如下:

测了下谷歌、IE、360、火狐浏览器，只有火狐支持此规则。

@ key-frames

keyframes 产生一种数据，用于定义动画关键帧。

@ fontface

fontface 用于定义一种字体，icon font 技术就是利用这个特性来实现的。

@font-face {

  font-family: Gentium;

  src: url(http://example.com/fonts/Gentium.woff);

}

p { font-family: Gentium, serif; }

 

CSS @规则的更多相关文章

  1. sass 安装、配置，css规则

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

  2. CSS规则的执行顺序（转）

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

  3. CSS笔记（一）CSS规则

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

  4. CSS规则

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

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

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

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

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

  7. 动态修改css 规则

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

  8. CSS规则的优先级匹配

    CSS规则之间能够互相覆盖.这一点我们应该已经习以为常了.然而正是因为规则之间能够互相覆盖.子元素继承父元素的默认行为,导致了CSS冲突的问题. 碰到CSS冲突时.通常我们会增加一些更加具体的规则来明 ...

  9. WEB笔记-2 剖析CSS规则

    2.1 剖析CSS规则   规则即指令,其声明了需要修改的元素及要应用给元素的样式.     2.2 为文档添加样式的三种方法   行内样式:直接写在HTML文档标签中的style属性当中,行内元素只 ...

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

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

随机推荐

  1. JDK1.8源码分析02之阅读源码顺序

    序言:阅读JDK源码应该从何开始,有计划,有步骤的深入学习呢? 下面就分享一篇比较好的学习源码顺序的文章,给了我们再阅读源码时,一个指导性的标志,而不会迷失方向. 很多java开发的小伙伴都会阅读jd ...

  2. 关于VAD的两种内存隐藏方式

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 技术学习来源:火哥(QQ:471194425) 内存在0环的两种内 ...

  3. Taro自定义Modal对话框组件|taro仿微信、android弹窗

    基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...

  4. HTML基础——表单的应用

    1.表单的构成 一个完整的表单由表单控件(表单元素).提示信息和表单域3个部分构成. 表单控件:包含了具体的表单功能项,如单行文本输入框.密码输入框.复选框.提交按钮.搜索框等. 提示信息:一个表单中 ...

  5. linux学习（八)Shell中变量的数学运算

    目录 常见的运算符 expr命令 @(Shell中变量的数学运算) 常见的运算符 环境变量 说明 + 加 - 减 * 乘 / 除 % 取模 因为Shell中将*作为通配符使用, expr命令 expr ...

  6. RAC ORA-32004: obsolete or deprecated parameter(s) specified for RDBMS instance

    重启RAC时发现32004,后来才发现DG已经不存在了standby_archive_dest还在生效中,而background_dump_dest和user_dump_dest并没在pfile中出现 ...

  7. 安装HomeBrew 失败的解决方案(Error: Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core failed!)

    在安装HomeBrew(或者安装成功 执行相关指令)时遇到错误提示: Error: Failure while executing: git clone https://github.com/Home ...

  8. [日常] win10开启和安装ubuntu子系统

    在控制面板的程序与功能里启用和关闭windows功能打开,适用于linux的windows子系统 在微软商店里搜索ubuntu,直接点击安装就可以了 安装完成后的windows与linux的磁盘映射见 ...

  9. CK：User mode Bus Error(用户空间操作内核地址导致的异常)

    关键词:VEC_ACCESS.coredump.LR.PC等. CK中存在一种VEC_ACCESS异常,可能原因是用户空间访问了内核空间,还有一种是内核访问不存在的总线地址. 下面简单构造VEC_AC ...

  10. RabbitMQ入门及其几种工作模式

    1.简介 MQ全程Message Queue,用于应用程序和应用程序间进行通信.RabbitMQ采用Erlang编写,实现了AMQP(高级消息队列)协议,跨平台,支持各种主流的操作系统和多种客户端. ...