CSS语法规则
一、At-rule
一种以@开头的声明语句,以分号;结尾。语法规则为: @IDENTIFIER (RULE); 。
At-rule主要用作表示CSS的行为,参考: https://www.cnblogs.com/wuyinghong/p/3700519.html
1、@charset—定义被样式表使用的字符集
2、@import——告诉CSS引擎包含外部的CSS样式表
3、@namespace——告诉CSS引擎所有的内容都必须考虑使用XML命名空间前缀
4、嵌套at-rules
(1)@media——条件组规则。如果设备符合标准定义的条件查询则使用该媒体
(2)@font-face——描述了一个将从外部下载的字体
(3)@keyframes——描述了中间步骤在CSS动画的序列
(4)@page——描述了文件的布局变化,当要打印文档时。
(5)@supports——条件组规则,如果浏览器满足给出的规则,则把它应用到内容中
(6)@document——条件组规则,如果被用到文档的CSS样式表满足了给定的标准,那么将被应用到所有的内容中。
例子:
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
二、CSS规则定义
p {color:red;text-align:center;}
由选择器后面跟着一对{}花括号,花括号内部有一条或多条声明语句;每条声明语句使用"属性: 值;"的形式,中间用冒号,结尾用分号。
注释以 "/*" 开始, 以 "*/" 结束。
CSS规则的定义涉及到两个方面: 属性和选择器,参考: http://phpstudy.php.cn/css3/
三、CSS的属性
参考: https://www.runoob.com/cssref/css-reference.html
四、CSS的选择器
CSS选择器的权值: important(最高,在设置属性值后面添加"!important")、内联(1000)、ID(100)、Class(10)、Tag(1)。
CSS选择器的优先级: 根据选择器的权值计算,组合选择器的权值会进行叠加。
同一个元素应用可能多个选择器时,权值大的优先;如果权值相同,那么则选择最后加载的选择器。
如果选择器设置为class="A B C",最终选择的选择器不是按A/B/C的先后顺序,而方式按照A/B/C的CSS加载顺序。
1、基本选择器
(1) 标签选择器(元素选择器)
直接写元素标签名字,比如p。其中比较特殊的是*,它表示选择所有元素。
(2) 类选择器
.class,其中class就是元素的class属性需要填写的值。
(3) ID选择器
#id,其中id就是元素的id属性值。(HTML页面中能够重复使用相同的ID)
(4) 属性选择器
元素[属性=值][...]的基本格式,如果没有"=值"的部分就表示元素需要包括该属性。
可以多个属性同时使用;其中=又扩展为~=、|=、^=、$=、*=。
2、派生选择器
(1) 后代选择器
用空格隔开的多个选择器名字,比如div p表示div包含的所有p元素,不管是div直接包含还是间接包含。
(2) 子元素选择器
用>号表示,比如div>p表示div下的所有子元素p,只能直接包含。
(3) (普通)兄弟选择器
用~号表示,比如div~p表示div之后的所有同级兄弟p元素,但是div之前的兄弟元素p不包含在内。
(4) 相邻兄弟选择器
用+号表示,比如div+p表示div后面相邻的p元素。(div和p在同一个层次上,并且p刚好在div后面)
(5) 并集选择器
用,号表示,比如div,p表示所有的div元素和p元素。
(6) 交集选择器
用.号表示,比如h3.special只能用于<h3 class="special">这样的标签中。
注意它和h3 .special不一样,中间有空格和没空格是有区别的。
(7) 伪类选择器
用:号表示,一个选择器可以同时使用多个伪类。
伪类是为了弥补选择器的不足。
(8) 伪元素选择器
用::表示,一个选择器只能使用一个伪元素。
伪元素的本质则是创建一个虚拟元素然后在应用样式。
转载自:https://www.cnblogs.com/ringboow/p/11134373.html
CSS语法规则的更多相关文章
- web(七)css的语法规则、注释
css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...
- 学习Sass 的基本语法规则[Sass和compass学习笔记]
自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
- Sass 的基本语法规则
转自:http://www.cnblogs.com/qqloving/p/3676852.html 自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另 ...
- CSS自学笔记(2):CSS语法
CSS的语法规则主要有两个分构成选择器和声明(声明问一条或者多条). selector {declaration1; declaration2; ... declarationN } 选择器(selc ...
- CSS 语法
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样 ...
- 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语法 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明. selector { property: value; property: value; ... property: ...
随机推荐
- 2018-10-25-weekly
Algorithm 94. 二叉树的中序遍历 What 给定一个二叉树,返回它的中序遍历. How 二叉树的中序遍历顺序为左-根-右,可以用递归来解,对左子结点调用递归函数,根节点访问值,右子节点再调 ...
- java selenium常用API汇总
(WebElement.iFrame.select.alert.浏览器窗口.事件.js) 一 WebElement相关方法 1.点击操作 WebElement button = driver. ...
- 关于pug的笔记
一.简介 Pug 是一款健壮.灵活.功能丰富的模板引擎,专门为 Node.js 平台开发.Pug 是由 Jade 改名而来,他可以帮助我们写html的时候更加的简单明了.安装.使用pug的过程打开cm ...
- [洛谷 P1013] NOIP1998 提高组 进制位
问题描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: L K V E L L K V E K K V E KL V V E KL KK E E K ...
- Django2 --- cookie
1. 什么是cookie ?用途是什么? Cookies是一些存储在用户电脑上的小文件.它是被设计用来保存一些站点的用户数据,这样能够让服务器为这样的用户定制内容,后者页面代码能够获取到Cookie值 ...
- 有关CSS的一些事
看到两篇关于CSS的文章,总结的非常好.因为没有那个网站的账号,没法收藏转发,所以把链接贴在这里,分享给大家.这两篇文章对于初学CSS的人来说,总结得很精炼准确,而且通俗易懂.推荐~ 有关CSS的一些 ...
- JavaScript点击事件——美女合集
Js点击事件--美女合集 实例 效果如下图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- p5471 [NOI2019]弹跳
分析 代码 #include<bits/stdc++.h> using namespace std; #define fi first #define se second #define ...
- 手动修改key 伪修改内存变量
# -*- coding: UTF-8 -*- import math import random import sys import threading import time from time ...
- Vagrant 手册之 box - box 的信息格式
原文地址 创建 Vagrant 的 box 时,可以提供在运行 vagrant box list -i 时展示的与用户相关的其他信息.例如,可以打包 box,以包含有关该 box 的作者和网站信息: ...