非常教程

CSS参考手册

杂项 | Miscellaneous

syntax

层叠样式表(CSS)语言的基本目标是允许浏览器引擎以特定的特征(例如颜色,定位或装饰)来绘制页面的元素。该CSS语法反映了这一目标,其基本构建模块是:

  • 属性是一个标识符,这是一个人类可读的名称,即定义哪些功能被考虑。
  • 描述该功能必须由引擎处理的。每个属性都有一组由浏览器引擎实现的正式语法定义的有效值,以及一个语义含义。

CSS声明

将CSS属性设置为特定值是CSS语言的核心功能。属性和值对被称为声明,任何CSS引擎都会计算哪些声明适用于页面的每个元素,以便适当地布置和设置样式。

在CSS中,默认情况下,属性和值都是不区分大小写的。该对由冒号分隔,“ :U+003A COLON)”和“空白”之前,之间和之后的空格,但不一定在里面,将被忽略。

syntax

二次

CSS 中有超过100个不同的属性,并且有几乎不同的值。并非所有的属性和值对都是允许的,每个属性都定义了什么是有效的值。当一个值对一个给定的属性无效时,声明被认为是无效的,并且被CSS引擎完全忽略。

CSS声明块

声明在以块blocks分组,也就是在由开口限定支架的结构,“ {”( U+007B LEFT CURLY BRACKET),和一个关闭一个,“ }”( U+007D RIGHT CURLY BRACKET)。块有时可以嵌套,所以打开和关闭花括号必须匹配。

syntax

这些块自然被称为声明块,它们内部的声明由分号“ ;'(U+003B SEMICOLON)分隔。声明块可能是空的,即包含空声明。声明周围的空格被忽略。块的最后一个声明不需要以分号结束,尽管这样做通常被认为是很好的风格,因为它可以避免在用另一个声明扩展块时忘记添加它。

syntax

CSS声明块的内容可以放在一个HTML style属性中,该声明块是一个分号分隔的声明列表,没有大括号和大括号。

CSS规则集

如果样式表只能对网页的每个元素应用一个声明,那么它们将是无用的。真正的目标是对文档的不同部分应用不同的声明。

CSS通过将条件与声明块关联来实现这一点。每个(有效的)声明块之前都有一个或多个选择器,这些选择是选择页面某些元素的条件。配对选择器组声明块称为规则集,或者通常简称为规则

syntax

由于页面的一个元素可以被多个选择器所匹配,因此可以通过几个潜在地包含一个给定属性的规则以不同的值,CSS标准定义哪一个优先于另一个,并且必须被应用:这被称为叠层算法。

需要注意的是,即使以一组选择器为特征的规则集是一种用一个选择器替换规则集的简写形式,这也不适用于规则集本身的有效性。

这导致了一个重要的后果:如果一个单一的基本选择器是无效的,就像使用未知的伪元素或伪类一样,整个选择器是无效的,因此整个规则被忽略(也是无效的)。

CSS语句

规则集是样式表的主要构建块,通常只包含大量列表。但是网页作者想要在样式表中传达的其他信息,如字符集,其他外部样式表导入,字体或列表计数器描述等等。它将使用其他特定种类的语句来做到这一点。

语句是一个构建块,与任何非空格字符开始,并且在所述第一闭合支架或分号结束(字符串外,非转义和不包括到另一个{},()或[]对)。

syntax

有两种说法:

  • 如所看到的,规则集(或规则)将CSS声明的集合与选择器描述的条件相关联。
  • 在规则,在标志与一个开始,“ @”( U+0040 COMMERCIAL AT),随后的标识符,并且然后继续了语句的结束,即到下一个分号(;)的块的外侧,或的端部下一个街区。由标识符定义的每个at-rules类型当然可以有其自己的内部语法和语义。它们用于传递元数据信息(如@charset@import),条件信息(如@media@document),或描述性信息(如@font-face)。

任何不是规则集或规则的语句都是无效的,并被忽略。

还有另一组语句 - 嵌套语句。这些是可以在规则的特定子集中使用的语句 - 条件组规则。这些语句仅适用于特定条件匹配的情况:@media只有在浏览器运行的设备符合表达条件时才应用规则内容; 在@document以规则的内容仅应用于当前页面匹配一些条件,等等。在CSS1和CSS2.1中,只有规则集可以在条件组规则中使用。这是非常限制性的,这个限制在CSS条件3级中解除了。现在,尽管仍然是实验性的,并且不受每个浏览器的支持,但是条件组规则可以包含更广泛的内容:规则集,但也包含一些(但不是全部)规则。

CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单