一、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语法规则的更多相关文章

  1. web(七)css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  2. 学习Sass 的基本语法规则[Sass和compass学习笔记]

    自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...

  3. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  4. Sass 的基本语法规则

    转自:http://www.cnblogs.com/qqloving/p/3676852.html 自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另 ...

  5. CSS自学笔记(2):CSS语法

    CSS的语法规则主要有两个分构成选择器和声明(声明问一条或者多条). selector {declaration1; declaration2; ... declarationN } 选择器(selc ...

  6. CSS 语法

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样 ...

  7. CSS命名规则常用的css命名规则

    CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  8. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  9. CSS语法基础

    引言:CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明. selector { property: value; property: value; ... property: ...

随机推荐

  1. 2018-10-25-weekly

    Algorithm 94. 二叉树的中序遍历 What 给定一个二叉树,返回它的中序遍历. How 二叉树的中序遍历顺序为左-根-右,可以用递归来解,对左子结点调用递归函数,根节点访问值,右子节点再调 ...

  2. java selenium常用API汇总

    (WebElement.iFrame.select.alert.浏览器窗口.事件.js)     一 WebElement相关方法 1.点击操作 WebElement button = driver. ...

  3. 关于pug的笔记

    一.简介 Pug 是一款健壮.灵活.功能丰富的模板引擎,专门为 Node.js 平台开发.Pug 是由 Jade 改名而来,他可以帮助我们写html的时候更加的简单明了.安装.使用pug的过程打开cm ...

  4. [洛谷 P1013] NOIP1998 提高组 进制位

    问题描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: L K V E L L K V E K K V E KL V V E KL KK E E K ...

  5. Django2 --- cookie

    1. 什么是cookie ?用途是什么? Cookies是一些存储在用户电脑上的小文件.它是被设计用来保存一些站点的用户数据,这样能够让服务器为这样的用户定制内容,后者页面代码能够获取到Cookie值 ...

  6. 有关CSS的一些事

    看到两篇关于CSS的文章,总结的非常好.因为没有那个网站的账号,没法收藏转发,所以把链接贴在这里,分享给大家.这两篇文章对于初学CSS的人来说,总结得很精炼准确,而且通俗易懂.推荐~ 有关CSS的一些 ...

  7. JavaScript点击事件——美女合集

    Js点击事件--美女合集 实例 效果如下图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. p5471 [NOI2019]弹跳

    分析 代码 #include<bits/stdc++.h> using namespace std; #define fi first #define se second #define ...

  9. 手动修改key 伪修改内存变量

    # -*- coding: UTF-8 -*- import math import random import sys import threading import time from time ...

  10. Vagrant 手册之 box - box 的信息格式

    原文地址 创建 Vagrant 的 box 时,可以提供在运行 vagrant box list -i 时展示的与用户相关的其他信息.例如,可以打包 box,以包含有关该 box 的作者和网站信息: ...