带@的css语法,你知道多少?
时间:2022-06-18
本文章向大家介绍带@的css语法,你知道多少?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
css的顶层样式表由两种规则组成的规则列表构成,一种称为at—rule规则,也就是at规则,另一种是qualified rule,也就是普通规则。今天就学习一下at规则
正文
@charset
用于提示css文件使用的编码方式,必须在最前面使用
@charset "utf-8";
@import
用于引入一个css文件,除了@charset规则不会被引入,可以引入一个文件的全部内容。
@import "mystyle.css";
@import url("mystyle.css");
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>? ;
@media
它能对设备的类型进行一些判断,在media的区块中,是普通规则列表
@media print {
body { font-size: 10pt }
}
我也经常用来做响应式布局的补充,如:
// 在width: 768px以下是使用下列布局
@page
用于分页媒体访问网页时的表现设置,页面是一种特殊的盒模型结构,除了页面本身,还可以设置它周围的盒。
@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}
@counter-style
产生一种数据,用于定义列表项的消息
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}
@key-frames
keyframes产生一种数据,用于定义动画关键帧
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
@fontfacce
yongyu定义一种字体,icon font技术就是利用这个特性实现的
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
@support
检查环境的特性,它与media类似
@namespace
用于跟xml命名空间配合的一个规则,表示内部的css选择器全都带上特定的命名空间
@viewport
用于设置视口的一些特性,不过兼容性目前不是很好,多数时候被heml的meta代替
css选择器的示意图
以上内容为个人的学习笔记,仅作为学习交流之用。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- (C99)复合字面量
- 排障集锦:九九八十一难之第十三难!-------------史上最全MySQL 单实例故障排查
- c语言数组越界的避免方法
- 单片机的存储区范例
- 大点干!早点散----------Nginx+Tomcat动静分离
- 大点干!早点散----------深入剖析缓存加速--squid传统代理和透明代理
- stm32 HardFault_Handler调试及问题查找方法——飞思卡尔
- 堆栈的分布
- memset()函数的使用
- 质量保障的方法和实践
- Selenium4 IDE,它终于来了
- strtol函数的用法——字符串转长整形
- JsonPath工具类封装
- Ubuntu16.04 实时内核 RT Preempt 安装
- c语言实现整数转换为字符串——不考虑负数