CSS中一些@规则的用法小结


Posted in HTML / CSS onMarch 09, 2021

常规规则遵循下面的语法:

@[KEYWORD] (RULE);

@charset
这个规则定义了浏览器使用的字符集,如果样式表包含非ASCII characters (e.g:UTF-8)。注意,被放在HTTP头部的字符集将会覆盖@charset规则

@charset "UTF-8";

@import
这个规则指示请求样式表,在这一行,如果内容是正确的,就会引入一个外部的CSS文件。

@import 'global.css';
虽然流行的CSS预处理器都支持@import,但是应该指出的是,它们的工作原理不同于原生的CSS:预处理器会抓取CSS文件并将它们处理成一个CSS文件,对原生CSS,每一个@import都是一个独立的HTPP请求。

@namespace
对于将CSS应用在XML HTML(XHTML),这个规则是非常有用的,因为XHTML元素能在CSS中被作为一个选择器使用。

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

 

嵌套规则

嵌套规则包含了额外的子集声明,其中一些声明只能用于特定情况。

 

@[KEYWORD] {
/* Nested Statements */
}

@document
这个规则为样式表指定了条件:只能应用于特定页面。举个粟子,我们提供一个URL,然后为这个特定的页面自定义样式,在其他页面中,这些样式会被忽略。

@document
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*") {
/* Start styling */
	body {
		font-family: Comic Sans;
	}
}

@font-face
这个规则允许在web页面上加载自定义字体,对自定义字体有不同程度的支持,但是这个规则接受语句创建和提供这些字体。

@font-face {
	font-family: 'MyWebFont';
	src: url('myfont.woff2') format('woff2'),
	url('myfont.woff') format('woff');
}

@keyframes
在诸多CSS属性中,这个规则是关键帧  动画的基础,并允许我们标记动画开始和结束的标志。

@keyframes pulse {
	0% {
		background-color: #001f3f;
	}

	100% {
		background-color: #ff4136;
	}
}

@media
这个规则包含条件声明,可用于为特定屏幕指定样式,这些声明可以包含屏幕大小,在适屏样式中会很有用.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) {
    .module { width: 100%; }
}

或者只在文档打印时运用样式

@media print {
}

@page
这个规则为将要打印的单独页面定义样式。特别的是,它能为页面伪元素设置外边距::first、:left和:right

@page :first {
    margin: 1in;
}

@supports
这个规则可测试浏览器知否支持某个特性/功能,如果满足条件,将会为这些元素应用特定样式。有点像Modernizr,但确实是CSS属性。

/* Check one supported condition */
@supports (display: flex) {
	.module {
		display: flex;
	}
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
	.module {
		display: flex;
	}
}

 

HTML / CSS 相关文章推荐
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
CSS心形加载的动画源码的实现
使用CSS3实现字体颜色渐变的实现
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
纯CSS3实现质感细腻丝滑按钮
Mar 09 #HTML / CSS
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
jQuery实现冻结表格行和列
2015/04/29 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
final, finally, finalize的区别
2012/03/01 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
产品工艺师的岗位职责
2013/11/15 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
测量员岗位职责
2015/02/14 职场文书
羊脂球读书笔记
2015/06/30 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL