- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
At-rules规则是目前CSS中一种常见的语法规则,它使用一个 "@" 符号加一个关键词定义,后面跟上语法区块,如果没有则以分号结束即可。 这种规则一般用于标识文档、引入外部样式、条件判断等等,本文是对该规则的使用总结.
@import 主要用于从其他样式表导入新的样式规则,语法: @import 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-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区块,有多个属性取值:
src: local("Arial");
;
@font-face {
font-family: "sys-Arial";
src: local("Arial");
font-weight: normal;
}
如上,使用local加载当前电脑系统的字体名称.
@charset 为样式表文件指定所需要使用的字符编码,只能在CSS文件中使用,语法: @charset "charset"; .
@charset "UTF-8";
特点:
<style>
区块或元素内样式属性中使用。 浏览器解析样式表文件使用字符编码的顺序:
@keyframes 通过定义动画序列中的关键帧的样式,用来控制CSS动画的中间步骤。 语法定义: @keyframes animationname { keyframes-selector { 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 mediatype and|not|only (media feature) { CSS-Style; } .
说明:
mediatype:媒体类型,描述设备类别,一般有 all、print、screen、speech,默认all:
媒体特性(media feature):描述设备、环境的具体条件特征;必须使用括号括起来,常用的有:
逻辑操作符: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> 语句中,也可以使用媒体查询,根据不同的条件加载不同的样式文件:
<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>
使用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 用于指定依赖于浏览器一个或多个特定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)) {
}
最后此篇关于CSS-@规则(At-rules)常用语法使用总结的文章就讲到这里了,如果你想了解更多关于CSS-@规则(At-rules)常用语法使用总结的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点? .someClass { //apply rules to
在更新我的 css 之前,我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是,如果元素中的某个属性弄乱了特定页面,而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前,我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素),以便它们在桌面计算机的屏幕上显示得很好。然后,如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗?我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页,我可以手动完成。但是有100页。有人有想法吗? 最佳答案 就像有人说的那样,“
当我想从 Styled Components 迁移到 CSS Modules 时,出现了以下问题。 假设我有以下样式组件,它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等?例如,如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮,这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据,然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS?还是在整个 CSS 文件被浏览器下载后才进行解析?不同浏览器的做法有区别吗?我在哪里可以找到这种底层信息? 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱,我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中,我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中,我已经大大减少了它) 当我查看页面的源代码时,我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间,min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途,例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块,所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念,一个是 CSS 定位(静态、相对、绝对、固定),另一个是 CSS Margin,它定义了元素之间的空间。 假设我想移动一个元素,这是最好的方法吗?因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀!