css at @ 规则
css相信我们都不陌生,但是我们真的对它非常了解吗?
css主要分为两种规则组成:
- 一种被称为 at-rule,也就是 at 规则
另一种是 qualified rule,也就是普通规则
今天让我们来讲讲我们不常用的 at 规则吧:
1. @charset
@charset 用于提示 CSS 文件使用的字符编码方式,它如果被使用,必须出现在最前面,不能在<style>
元素内的样式属性内使用。
我也没搞清楚具体有什么用,只要html和css保持编码一致,并且html上加上 <meta charset="xxxx"> 即可,@charset写不写也没什么作用
@charset "utf-8";
2. @import
@import 当时我以为是less sass的语法糖,其实它是css本身的特性,可以在css文件里引入其他css文件
@import './style.css'; @import url(./style.css); @import './style.css' screen and (min-width:500px);
3. @media
@media查询应该是我们见得最多的@rule之一了,针对不同的媒体类型定义不同的样式
@media 媒体类型1,媒体类型2 and|not|only (媒体特性) { CSS-Code; }
媒体类型没有被废弃的只有以下几种:
1. all 所有设备
2. print 打印机和打印预览
3. screen 电脑/手机屏幕
4. speech 应用于屏幕阅读器等发声设备
媒体特性常用无非就是(更多):
1. min-width、max-width
2. min-height、max-height
3. orientation(方向): landscape(横屏)/
portrait(竖屏)
4. @page
@page 用于设置分页媒体的样式,和@media print相似,但是@page只能设置部分css样式
MDN原文说到: You can only change the margins, orphans, widows, and page breaks of the document.
5. @counter-style
自定义list-style的图形,目前只有firefox支持,详情
@counter-style aaa { system: cyclic; symbols: ‣; suffix: " "; } ul { list-style: aaa; }
6. @keyframes
也是我们常用的@rule之一,用于定义animation的动画帧
div { position: relative; height: 100px; background: red; animation: mymove 5s ease infinite; } @keyframes mymove { from {top:0px;} to {top:200px;} }
7. @font-face
用于引入一些额外的字体,放在css顶部或者css规则组
@font-face { font-family: aaa; src: url(http://example.com/fonts/Gentium.woff); } p { font-family: aaa, serif; }
8. @supports
用于检测css兼容的特性
@supports (display: grid) { div { display: grid; } } @supports not (display: grid) { div { float: right; } }
9. @namespace
要和xml的命名控件配合使用,暂时还没搞明白怎么用,详情
/* 默认命名空间 */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL"; /* 命名空间前缀 */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL";
10. @viewport
设置视窗的属性,目前safari、firefox都不支持,更多使用meta的形式来代替
@viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; }
css at @ 规则的更多相关文章
- 常用的css命名规则:
关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...
- 【转】常用css命名规则
常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...
- CSS 命名规则
CSS书写顺序: 位置属性(position, top, right, z-index,display, float等) 大小(width, height, padding, margin) 文字系列 ...
- 一些CSS命名规则
一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...
- CSS命名规则常用的css命名规则
CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- [转] 常用的CSS命名规则
(一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度 ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- CSS命名规则和如何命名
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- css层叠规则(层叠样式表)
CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...
随机推荐
- idea 模板注释设置
一.首先我们来设置IDEA中类的模板: 1.File-->settings-->Editor-->File and Code Templates-->Files 我们选择Cla ...
- 5.1Python数据处理篇之Sympy系列(一)---Sympy的大体认识
目录 目录 前言 目录 前言 sympy是python一个强大的数学符号运算第三方库,具体的功能请看下面操作 官网教程: https://docs.sympy.org/latest/tutorial/ ...
- DRF 序列化器-Serializer (2)
作用 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 完成数据校验功能 3. 反序列化,把客户端发送过来的数据,经过request以后变成字典,序列化器 ...
- particles.js在vue上的运用
转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架 ...
- Java多线程——中断机制
前言:在Java多线程中,中断一直围绕着我们,当我们阅读各种关于Java多线程的资料.书籍时,“中断”一词总是会出现,笔者对其的理解也是朦朦胧胧,因此非常有必要搞清楚Java多线程的中断机制. 1.J ...
- linux sort排序及取前几条数据
查看sort --help -n 根据字符串的数值进行比较 -k 根据某一个关键字的位置或者类型排序 -r 倒序排序 -t 字段分隔,后面跟分隔符 查看head --help -n 打印前几行记录,后 ...
- BugPhobia开发篇章:Beta阶段第X次Scrum Meeting
0x01 :Scrum Meeting基本摘要 Beta阶段第十次Scrum Meeting 敏捷开发起始时间 2015/12/29 00:00 A.M. 敏捷开发终止时间 2016/01/01 23 ...
- PS调出米黄色复古柔和外景人物照
配色思路 从片中可以看出主要景物近处的有人物和栏杆,远处的海水,天空和礁石.为体现出远近层次,近处景物选择了偏黄的色调,远处景物选择了偏青色调. 调色 以下面这张照片为例,先放上对比图: LR部分 首 ...
- OracleSql语句学习(五)
--数据库对象数据库对象包含:表,视图,索引,序列视图VIEN视图在SQL语句中体现的角色与表一样,但是视图并非真实存在的表,它只是对应一条查询语句的结果集 使用视图通常是为了重用子查询,简化SQL语 ...
- opensetting禁用后小程序二次授权的问题-以及根据定位城市获取天气
一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSet ...