CSS @规则
最近在看极客时间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 @规则的更多相关文章
- 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 选择器 ...
- 【转】10条你不可不知的css规则
10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 :[译]10条你不可不知的css规则正文: Published D ...
- 同一标签内多个css规则在页面中如何显示?
这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...
- 动态修改css 规则
页面引用了两个样式表: <link href="css/mui.min.css" rel="stylesheet" /> <link href ...
- CSS规则的优先级匹配
CSS规则之间能够互相覆盖.这一点我们应该已经习以为常了.然而正是因为规则之间能够互相覆盖.子元素继承父元素的默认行为,导致了CSS冲突的问题. 碰到CSS冲突时.通常我们会增加一些更加具体的规则来明 ...
- WEB笔记-2 剖析CSS规则
2.1 剖析CSS规则 规则即指令,其声明了需要修改的元素及要应用给元素的样式. 2.2 为文档添加样式的三种方法 行内样式:直接写在HTML文档标签中的style属性当中,行内元素只 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成
CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...
随机推荐
- JAVA笔记 -- 访问权限控制
访问权限控制 没有权限控制的时候,由于所有的接口都是可以访问的.当一个类库部分代码,发现有更好的方法解决的时候,可能其他接口会发生改动.这会导致另一个地方的引用该类库的程序发生崩溃.为了解决这种问题, ...
- canvas绘制星星和月亮
用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差 ...
- [转]RPA认证 Developer UIPath Certificate,细说uipath认证学习,Online Quiz和Practical Exam项目详解
本文转自:https://blog.csdn.net/u010369735/article/details/88621195 UIPath,RPA里算是比较简单易操作的一款软件了,因为公司业务的需要, ...
- ES6中Class的用法及在微信小程序中的应用实例
1.ES6的基本用法 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6 的class可以看作只是一个语法糖,它的绝 ...
- ORA-04045: errors during recompilation/revalidation of LBACSYS.LBAC_EVENTS
使用orachk工具检查数据库实例的时候,发现报告里面有类似下面这样一些错误(最近有给Oracle 10g应用补丁PSU 10.2.0.5.180717,不清楚是这个产生的还是其他原因导致),使用脚本 ...
- WPF datagrid 列按钮使用
原文:WPF中使用DataGrid时操作列按钮问题 <DataGrid x:Name="datagrid" AutoGenerateColumns="Fal ...
- sql客户端工具Navicat_Premiun12中文破解版
Navicat Premium 是一套数据库开发工具,让你从单一应用程序中同时连接 MySQL.MariaDB.MongoDB.SQL Server.Oracle.PostgreSQL 和 SQLit ...
- sqliteman
2.安装文件 采用源码方式安装 可用下面地址自行下载 https://sourceforge.net/projects/sqliteman/files/sqliteman/1.2.2/ 3.安装 1) ...
- python的imread、newaxis
一:imread 用来读取图片,返回一个numpy.ndarray类型的多维数组,具有两个参数: 参数1 filename, 读取的图片文件名,可以使用相对路径或者绝对路径,但必须带完整的文件扩展名( ...
- Acwing43 不分行从上往下打印二叉树
地址 https://www.acwing.com/problem/content/description/41/ 从上往下打印出二叉树的每个结点,同一层的结点按照从左到右的顺序打印. 样例 输入如下 ...