被忽略的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 ...
随机推荐
- Node Js模块讲解
Node JS模块 所谓的Node JS模块其实就是指Node JS package,即nodejs包. 一 什么是NodeJS模块? 在说这个问题之前,我们有必要提出一个概念,即模块规范. 现阶段J ...
- go 利用chan的阻塞机制,实现协程的开始、阻塞、返回控制器
一.使用场景 大背景是从kafka 中读取oplog进行增量处理,但是当我想发一条命令将这个增量过程阻塞,然后开始进行一次全量同步之后,在开始继续增量. 所以需要对多个协程进行控制. 二.使用知识 1 ...
- Ligg.EasyWinApp-000: 一款Windows应用编程框架介绍
本框架(解决方案)是一个Windows应用编程框架和UI库,通过该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制( ...
- 利用ExecuteMultipleRequest来批量导入数据,成功的成功失败的失败,并生成导入结果文件
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- Hadoop_简介_01
1. Apache Hadoop 1.1 Hadoop介绍 Hadoop是Apache旗下的一个用java语言实现的开源软件框架, 是一个开发和运行处理大规模数据的软件平台. 允许使用简单的编程模型在 ...
- Shell(六):输入/输出重定向
重定向的作用是将命令的执行结果输出到指定的文件中. 重定向命令列表如下: 文件描述符 0 通常是标准输入(STDIN),1 是标准输出(STDOUT),2 是标准错误输出(STDERR). 1.输出重 ...
- 剑指offer-47:不用加减乘除做加法
参考:https://www.cnblogs.com/zhangziqiu/archive/2011/03/30/ComputerCode.html <原码,反码,补码 详解> 题目描述 ...
- SpringCloud服务过滤filter
一.目录展示 二.application.yml配置文件 三.MyZuulFilter package com.zn.filter; import com.netflix.zuul.ZuulFilte ...
- 用Python在25行以下代码实现人脸识别
在本文中,我们将看到一种使用Python和开放源码库开始人脸识别的非常简单的方法. OpenCV OpenCV是最流行的计算机视觉库.最初是用C/C++编写的,现在它提供了Python的API. Op ...
- 求连通块个数 - BFS、DFS、并查集实现
本文基于leetcode的200.岛屿数量(题目