被忽略的CSS规则
说起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规则的更多相关文章
- 【转】10条你不可不知的css规则
10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 :[译]10条你不可不知的css规则正文: Published D ...
- 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范
常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成
CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...
- sass 安装、配置,css规则
http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装 1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...
- CSS规则的执行顺序(转)
你对CSS规则的执行顺序是否了解,这里和大家分享一下,若两条规则具有相同的权值.起源及特殊性,那在样式表中最后出现的规则优先. 1.CSS规则之特殊性 首先来看一下这个例子将会发生的情形: <s ...
- CSS笔记(一)CSS规则
CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素. CSS规则由两个主要的部分构成:选择器 + 一条或多条声明. 每条声明由一个属性和一个值构成. ...
- CSS规则
CSS规则 --------------------------------------------- 1 前言 2 代码风格 2.1 文件 2.2 缩进 2.3 空格 2.4 行长度 2.5 选择器 ...
- 同一标签内多个css规则在页面中如何显示?
这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...
- 动态修改css 规则
页面引用了两个样式表: <link href="css/mui.min.css" rel="stylesheet" /> <link href ...
随机推荐
- python学习-class对象
# 面向对象 python,java,c## 面向过程 C # 类和对象# 类 类型类别.类别 物以类聚 一类事物# 班级.人类.动物类.车.学生类.老师类.手机.电脑# 统称 == 共同特性# 不具 ...
- python故障排除
在初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...
- php使用phpqrcode生成二维码
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...
- 《Dotnet9》建站-本站使用的什么主题?
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- C#程序编写高质量代码改善的157个建议【4-9】[TryParse比Parse、使用int?来确保值类型也可以为null、readonly和const、0值设为枚举的默认值、避免给枚举类型的元素提供显式的值、习惯重载运算符]
建议4.TryParse比Parse好 如果注意观察,除string之外的所有的基元类型.会发现它们都有两个将字符串转换为自身类型的方法:Parse和TryParse.以类型double为例. 两者最 ...
- 在项目中在线使用Iconfont图标
Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果.而且是国产的,网速会比较快,还可以改变图标颜色. 它提供svg.png.ai三种格式下载,之前我一直都是乖乖的一个个下 ...
- 3.Android-ADT之helloworld项目结构介绍
1.helloworld项目结构如下图所示: src 放项目的源代码的.而MainActivity.java文件则对应helloworld界面代码,代码如下所示: gen BuildConfig.ja ...
- iOS 和 H5 页面交互(WKWebview 和 UIWebview cookie 设置)
iOS 和 H5 页面交互(WKWebview 和 UIWebview cookie 设置) 主要记录关于cookie相关的坑 1. UIWebview 1. UIWebview 相对比较简单 直接通 ...
- java开发问题两三事(1)
1. 场景描述 最近在工作中碰到的几个问题,有点坑,记录下,遇到相同或类似问题的朋友可以参考下. 2. 解决方案 2.1 Disconnected from the target VM idea控制台 ...
- vue组件之间的通信方式
组件之间的通信方式有很多种 这里分享4种组件之间的通信方式 props(主要是父传子) 自定义事件(主要是子传父) pubsub消息订阅与发布 xuex 1.props和自定义事件 app.vu ...