CSS-@规则(At-rules)常用语法使用总结
At-rules规则是目前CSS中一种常见的语法规则,它使用一个"@"
符号加一个关键词定义,后面跟上语法区块,如果没有则以分号结束即可。
这种规则一般用于标识文档、引入外部样式、条件判断等等,本文是对该规则的使用总结。
常用规则
@import
@import 主要用于从其他样式表导入新的样式规则,语法:@import url|string list-of-mediaqueries;
。
- url|string:需要引入的样式资源路径,相对路径或绝对路径都可以;
- list-of-mediaqueries:逗号分隔的条件列表,判断什么条件下才引入该样式资源,支持媒体查询条件。
@import "./reset.css";
@import url("./reset.css")
当使用条件判断时,可以使用媒体查询条件。
/* 宽度小于1000px才会生效 */
@import "./reset.css" screen and (max-width: 1000px);
另外,当在html文件或样式文件中使用该语法(不使用现代框架),有两点需要注意:
- 引入位置:必须位于样式文件或
<style>
区块的头部,前面不可以出现其他css样式,但可以在@charset
后面。 - 不能在条件嵌套语法中使用。
当使用vue等框架的时候,则可以在
@import
前出现css样式,也能在条件嵌套语法中使用,是因为导入的样式资源会被解析具体的样式到页面上。
@font-face
@font-face 用于加载自定义字体。属于目前前端比较常用的语法,也有多开源的字体图标库可以使用。
既支持提供字体资源文件路径进行加载,也支持用户本地安装的字体加载。
@font-face {
font-family: "iconfont";
src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834');
}
@font-face {
font-family: "iconfont";
src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
}
如上,就是一个加载字体资源的示例,一个加载cdn上的地址,一个加载本地文件。
@font-face 定义了一个CSS区块,有多个属性取值:
- font-family:指定字体名字,被用于font或font-family属性;
- src:加载字体资源;
- url():加载字体资源文件;
- local():加载本地电脑字体名称,如
src: local("Arial");
;
- font-style:对src指定字体的描述;
- font-variant
- font-weight
@font-face {
font-family: "sys-Arial";
src: local("Arial");
font-weight: normal;
}
如上,使用local加载当前电脑系统的字体名称。
@charset
@charset 为样式表文件指定所需要使用的字符编码,只能在CSS文件中使用,语法:@charset "charset";
。
- charset:指定使用的字符集。
@charset "UTF-8";
特点:
- 在样式表文件中使用,不能在html文件的
<style>
区块或元素内样式属性中使用。 - 必须出现在样式表文件的最前面。
- 使用有效的字符编码和双引号,并且中间只能间隔一个空格字符,且以分号结尾。
- 不能在条件嵌套语法中使用。
- 如果有多个@charset声明,则只有第一个会生效。
浏览器解析样式表文件使用字符编码的顺序:
- 文件的编码格式;
- http请求响应中的charset属性值;
- @charset;
- link设置;
- 默认UTF-8;
@keyframes
@keyframes 通过定义动画序列中的关键帧的样式,用来控制CSS动画的中间步骤。
语法定义:@keyframes animationname { keyframes-selector { css-styles; } }
。
- animationname:动画名称,作为动画引用时的标识符;
- keyframes-selector:关键帧的名称选择器,用于指定关键帧被用于动画过程中的哪个节点,一般是时间节点,有两种取值方式:
- 百分比:0% - 100%,时间百分比的节点
- from和to:from等同起始时间from,to等同结束时间
- css-styles:指定当前关键帧的样式属性值。
@keyframes dropIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes wave {
0% {
transform: translateY(0);
}
45% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
如上,使用两种方式定义的关键帧动画样式。
特性说明:
- 当没有指定开始或结束状态,则将元素的享有样式作为开始或结束状态;
- 当有多个同名称的关键帧时,样式属性相同以最后一次为准,样式属性不同则会合并所有属性共同起作用;
- 如果再关键帧样式中使用不能用作动画的属性,会被忽略;
- 在关键帧中使用
!important
限定样式会被忽略,不起作用。
为了获得最佳动画体验,应该始终定义开始和结束状态。
@media
@media 媒体查询,是基于不同的媒体查询结果定义不同的样式。多用于针对不同屏幕尺寸进行差异化的样式设置,做一些响应式页面设计。另外,如果缩放浏览器的大小,也可以根据查询宽高重新渲染页面样式等。
语法: @media mediatype and|not|only (media feature) { CSS-Style; }
。
说明:
mediatype:媒体类型,描述设备类别,一般有 all、print、screen、speech,默认all:
- all:所有设备;
- print:打印预览模式;
- screen:用于屏幕;
- speech:语音合成器;
媒体特性(media feature):描述设备、环境的具体条件特征;必须使用括号括起来,常用的有:
- 宽高类:width、max-width、min-width、height、max-height、min-height等;
- 其他:color、grid、orientation、resolution、scan等;
逻辑操作符:and、not、only、,:
- and:多个规则组合,每条都满足才行;
- not:否定某个查询规则;
- only:整个查询匹配时才满足;
- 逗号,:将多个查询组合,一条满足即可,类似
or
;
@media screen (max-width: 1000px) {
div {
background-color: red;
}
}
/*或者嵌套*/
@media screen {
@media (max-width: 1000px) {
div {
background-color: red;
}
}
}
如上示例,即是我们经常使用的方式。
@media
媒体查询也能作为@import
的条件使用,可见上面已有介绍。
link和style中使用
在引入样式表的 <link>
语句中,也可以使用媒体查询,根据不同的条件加载不同的样式文件:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">
在 <style>
样式区块也可以使用媒体查询:
<style media="screen and (max-width: 1000px)">
div {
background-color: red;
}
</style>
JS检测媒体查询
使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。
使用方式:
// 获取媒体查询MediaQueryList对象,有matches
const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
console.log(1, screenMediaQueryList)
// matches: true -- 当前媒体查询规则已生效,为false则不生效
// media: "(max-width: 1000px)"
screenMediaQueryList.addEventListener('change', (res) => {
console.log(2, res)
})
可以获取当前是否已使用该媒体查询规则,或者监听媒体查询状态的变化事件。
非常用规则
以下是一些使用较少的@规则。
@supports
@supports 用于指定依赖于浏览器一个或多个特定CSS功能的支持申明。常用来判断当前浏览器是否支持某个CSS特性功能,所以又被称为特性查询。
ie不支持。
如判断自定义属性,详见自定义属性知识介绍。
@supports ((--a: 0)) {
/* 支持自定义属性 */
}
@supports (not (--a: 0)) {
/* 不支持自定义属性 */
}
语法,由一组样式声明和一条支持条件构成,支持条件可以是多条,可以使用 and、or、not
等进行结合处理;还可以使用圆括号调整优先级。
/* 浏览器支持grid */
@supports (display: grid) {
div {}
}
/* 不支持grid */
@supports not (display: grid) {
}
/* 不支持gri和flex */
@supports not ((display: grid) and (display: flex)) {
}
其他
- @namespace:是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。
- @page:主要用于打印文档时修改某些CSS属性,兼容性不高。
- counter-style:定义如何把一个计数器的值转化为字符串表示。
CSS-@规则(At-rules)常用语法使用总结的更多相关文章
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...
- CSS常用语法缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.CSS常用语法缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#33669 ...
- 《网页设计基础——CSS常用语法》
网页设计基础--CSS常用语法 一.注释: 例如: /* 在此处书写注释 */ 二.清除浏览器默认设置: 例如: *{ /* 全局声明 */ margin: 0; padding: ...
- CSS规则整理
一. 善用css缩写规则 /*注意上.右.下.左的书写顺序*/1. 关于边距(4边):1px 2px 3px 4px (上.右.下.左)1px 2px 3px (省略的左等于右)1px 2px (省略 ...
- CSS规则
CSS规则 --------------------------------------------- 1 前言 2 代码风格 2.1 文件 2.2 缩进 2.3 空格 2.4 行长度 2.5 选择器 ...
- 被忽略的CSS规则
说起CSS规则,除了普通规则(属性和值,key:value),可能大家都会想到@media,@keyframes,@fontface等常用的,那剩余的大家是否有所了解呢. 我们先来看一看CSS有哪些规 ...
- CSS @规则
最近在看极客时间winter大神的重学前端系列,遇到了许多不常用但是很重要的知识点.感觉视野得到了极大的开阔(打个广告,哈哈). 其中css @规则令人印象深刻.简单的做下笔记: @namespace ...
- Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
- CSS基础知识及其基本语法
一.什么是CSS CSS 是层叠样式表( Cascading Style Sheets ) 的简称. 有时我们也会称之为CSS 样式表或级联样式表. CSS 也是一种标记语言 CSS 主要用于设置HT ...
- HTML 学习笔记 CSS样式(简介和语法)
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
随机推荐
- Unity坐标系入门
一.坐标系的概念 Unity 世界坐标系采用左手坐标系,大拇指指向X轴(红色),食指指向Y轴(黄色),中指向手心方向歪曲90度表示Z轴(蓝色),同时Z轴也是物体前进方向,下图表示Unity的四种坐标系 ...
- 记录因Sharding Jdbc批量操作引发的一次fullGC
周五晚上告警群突然收到了一条告警消息,点开一看,应用 fullGC 了. 于是赶紧联系运维下载堆内存快照,进行分析. 内存分析 使用 MemoryAnalyzer 打开堆文件 mat 下载地址:htt ...
- python进阶(26)collections标准库
前言 这个模块实现了特定目标的容器,以提供Python标准内建容器dict ,list ,set , 和tuple 的替代选择. 这个模块提供了以下几个函数 函数 作用 namedtuple() 创建 ...
- Java中String被称为不可变字符串的原因
很多东西,看似可变,实际上不过是是新桃换旧符罢了. 代码: /** * String之所以被称为不可变字符串 */ static void testString(){ String str = &qu ...
- java学习之EL和JSTL
0x00前言 EL和JSTL都是JSP的内容的拓展,都是开发的一些东西,稍微学习记录一下,避免以后忘记 0x01EL 0x1基本用法 概念:Expression language 表达式语言 作用:替 ...
- AIR32F103(五) FreeRTOSv202112核心库的集成和示例代码
目录 AIR32F103(一) 合宙AIR32F103CBT6开发板上手报告 AIR32F103(二) Linux环境和LibOpenCM3项目模板 AIR32F103(三) Linux环境基于标准外 ...
- Java新特性(2):Java 10以后
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 虽然到目前为止Java的版本更新还没有什么惊天动地的改变,但总是会冒出一些有趣的小玩意.前面列举了Java9和Java10的一些特色,现在接着来 ...
- 【devexpress】spinEdit控件如何设置只能输入两位小数
只需设置对应的正则表达式即可,我这里设置的是n2意思就是两位小数的意思 效果如下
- C温故补缺(一):数据类型和基本类型占位
数据类型 基本类型:就是算术类型,包括整型和实型 枚举类型:一组离散的整数 void类型:无可用值类型 派生类型:指针(*),数组([]),结构体(struct),共用体(union),函数(fun( ...
- springboot +mybatis (@autowried 注入mapper :爆红)
问题描述:Could not autowire. No beans of XXXXmapper' type found 问题相关页面: 解决方式一:@mapper 接口计入@Repository 解 ...