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.按特殊性对应用到给定元素的所有声 ...
随机推荐
- [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt
[20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt --//前几天做了sql语句在mutexes上的探究.今天对比不同_mutex_wait_scheme模式cpu ...
- c/c++ gdb 调试带参数的程序
直接gdb pgname 参数1 这种方式,参数1是不会带到gdb里的 1,首先启动程序 gdb pgname 2,设置程序的参数 set args 参数1
- thinkphp v5.1 开发笔记
一.安装TP5.1 1.使用git安装 <1>下载Tp git clone https://github.com/top-think/think tp5 <2>安装核心库 gi ...
- 我的第一个python web开发框架(27)——定制ORM(三)
在上一章中,我们已经创建好ORM的基类了,接下来要做的就是将基类的常用方法一一实现. 首先我们来看看之前项目中,最常见的获取指定主键的记录实体 @get('/api/product/<id:in ...
- RabbitMQ持久化
我们知道,如果消息接收端挂了,消息会保存在队列里.下次接收端启动就会接收到消息. 如果RabbitMQ挂了怎么办呢?这时候需要将消息持久化到硬盘 消息发送端:producer ........... ...
- Jenkins + Ansible + Gitlab之ansible篇
Ansible介绍 什么是Ansible? Ansible是一个开源部署工具 开发语言:Python 特点:SSH协议通信,全平台,无需要编译,模块化部署管理 作用:推送Playbook进行远程节点快 ...
- day22---面向对象基础初识
面向过程编程: 核心是过程两个字,指的是解决问题的步骤,即先干什么再干什么,基于面向过程设计的程序就好比在设计一条流水线,是一种机械的思维方式. 优点:复杂问题流程化, 缺点:程序的可扩展性差 面向对 ...
- C++ shared_ptr、unique_ptr、weak_ptr
shared_ptr unique_ptr weak_ptr 内存泄漏 智能指针 引用计数 循环引用 reset
- Python学习--Python运算符
什么是运算符? 举个简单的例子 4 + 5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: 算数运算符 比较(关系)运算 ...
- linux查询日志常用命令,经常更新
1.grep命令 grep -c "查询内容" filename ------c,是小写,可以知道你要查询的内容在这个文件中是否存在 grep -C 10 "查询内 ...