CSS基础

元信息

目标：建立"样式与结构分离"的分层观——HTML 管"是什么"，CSS 管"长什么样"；掌握 CSS 规则语法（选择器+指令）与级联规则，理解多条规则命中同一元素时谁说了算
关键概念：层叠样式表、选择器、级联规则、DOM树、外联样式、内联样式
关联阶段：cp1
常见误区：以为代码顺序在后的规则总能覆盖在前者（id 选择器权重高于 class 与标记选择器）；以为内联样式是常规写法（它只宜调试，常规应外联实现物理分离）

什么是样式？

在 wordpress 站点中，更换一个主题theme(实质是一组CSS样式文件)，在保持站点内容不变的情况下，可以更换迥异的外观效果

内容、结构、样式与行为

示例：一曲新词酒一杯

内容：晏殊的《浣溪沙·一曲新词酒一杯》
结构：标题、正文（上、下阙、段落）、注解、参考链接、分类等
样式：排版、配色、装饰等视觉要素
行为：样式主题的切换

Web设计模式：分层

桌面软件或命令行软件，诞生之初面向专业开发者，其关注点是功能实现，其工具是专业程序设计语言（如C/C++、Java等）

数据、数据结构、代码的分层，缺失独立的样式层
缺乏跨语言的关于数据结构的统一描述和定义

Web软件，诞生之初面向半专业用户，其关注点是信息共享，其工具需要易用上手

内容：相较而言，更广阔范围的数据
结构：HTML刻化了内容的结构，优点是跨平台，缺点是结构化程度不足
样式：CSS描述了内容的呈现样式，即指示机器(如浏览器)应当如何呈现内容
行为：javascript实现了用户与网页的互动，但语法更为简单易上手

分层的优点

兼容性：样式的设计（规则的逻辑描述）与实现（规则的物理实现）分离，使得跨语言、跨平台更易实现
响应式：可以面向不同偏好的用户、不同的设备环境,等，切的是最适合的样式外观或表现形式。
易处理：比如机器用户(譬如爬虫)可以阅读干净的内容及结构,而不受样式代码的干扰。错误代码示例纠正工具
AI化：分层一方面降低了AI的处理难度，另一方面提供了大量的语料。

CSS的最初目标是视觉化呈现，但在最新CSS标准中，同样支持语音样式，以适合失明人士以及适合于语音阅读的场景。语音参考链接

CSS的基本语法

CSS样式表：Cascading Style Sheets，中文译为“层叠样式表”或"级联样式表"

CSS是一个文本文档,由一组样式规则组成,每一个样式规则的结构均为：选择器 + 指令，类似于主谓结构
每一个样式规则可以包含多条指令,每一条指令由样式属性和样式值组成

css

h1{font-size:28px; border:1px solid black;}
h2{font-size:22px;}

h1和h2是标记选择器,即选中文档中所有的<h1>和<h2>标记
font-size:28px; 是指令,即指示机器将选中的标记中的字体文本渲染为28px的尺寸
{ }是规则之间的界符, ; 是样式指令之间的界符, :是样式属性名称和值之间的界符,多个值之间使用空格作为界符

这种选择器+指令的方式,和windows系统界面或者面向对象的编程模式是一脉相承的,回想一下我们在windows下的工作模式,总是先选中一个对象(文件或目录或者ps中的图片),然后进行操作(copy或者设定颜色属性等等)

CSS的基础选择器: tag、class、id

css

<h1 id='title' class='title'>title</h1>
<style>
#title{font-size:18px;}
.title{font-size:16px;}
h1{ font-size:28px;}
</style>

id选择器(#)的选择范围最小，它只能且唯一选中<div id='title'> 这个元素
tag选择器是根据tag名来匹配的,可以选中同一类标记
class(.)选择器是根据元素的class 属性的值来匹配的，优势是可以跨越不同的标记，或者说，可以让不同的标记共享同一类样式

问题：上述代码中，h1元素的最终字体大小是多少？

级联规则

容易发现，在css的解析和应用过程中，一定会存在多个选择器同时选中同一个节点，并且对其应用同一样式属性，但属性值可能有不同，即所谓层叠或级联。

基于这种情况，浏览器将会按照一定的级联算法来计算该节点的最终的样式，即对不同的选择符赋予不同的权重，权重高的选择符会覆盖权利低的选择符。譬如：

代码顺序在后的css样式规则覆盖之前的样式规则
内联样式 > 嵌入样式 > 外联样式
id选择符 > class选择器 > 标记选择器

答案：前代码中，h1元素的最终字体大小是18px,因为 id 选择器的权重最高

级联样式权重的计算是很复杂的,详见文末的参考.

此外，仅仅只有上述这几种基础选择器,显然是不够用的,一是因为它们的选择粒度还不够精细,二是它们都属于绝对选择器,不能根据元素的相对关系来进行筛选.

因此,浏览器需要一种数据结构来确立元素之间的关系,这就是DOM树

DOM树: 文档对象模型

直接处理字符串是困难的，浏览器将html文档从字符串解析为树，即文档对象模型(DOM)。 DOM树 2D渲染 3D渲染

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

CSS基础-0

根节点：唯一，如<html>；中间节点：闭合类标记。
叶子节点：可细分为两类
- 文本：即闭合类标记中的内容。也可将文本视作一个被匿名标记括起来的元素
- 非闭合类标记：如<hr>等

注意区分标记与文本,CSS选择器可以精确定位到节点，从而间接渲染文本内容。但对没有结构化的文本，则仅支持少量的定位方式，如段落的第一个字母等。

关系选择器

类型	语法	示例	说明
后代选择器	element element	div p	选择 `<div>`<br/>元素内的所有`<p>`<br/>元素
直系选择器	element > element	div > p	选择父元素为`<div>`<br/>元素的所有`<p>`<br/>元素
相邻选择器	element + element	div + p	选择紧跟在`<div>`<br/>元素之后的所有`<p>`<br/>元素
兄弟选择器	element1 ~ element2	p ~ ul	选择前面带有`<p>`<br/>元素的每个`<ul>`<br/>元素,不必是紧跟

更多选择器及选择器之间的组合,详见

引入css的方式

外联

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

存储于外部文件，通过一个专用标记引入,只允许出现在<head>中

嵌入

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

嵌入在html文档中，通过一个专有标记<style>,推荐放置在<head>中

内联

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

内嵌于标记的属性中，通过一个专有属性style

传统上推荐使用外联模式，实现物理分离。内联、嵌入多用于调试，但是现代的tailwind.css则带来了另一种思路

语法参考

css 简介 http://www.runoob.com/css/css-intro.html
css 基本语法 http://www.runoob.com/css/css-syntax.html
如何引入css代码 http://www.runoob.com/css/css-howto.html
基本选择器 http://www.runoob.com/css/css-id-class.html
组合选择器 http://www.runoob.com/css/css-combinators.html
属性选择器 http://www.runoob.com/css/css-attribute-selectors.html
伪类选择器 http://www.runoob.com/css/css-pseudo-classes.html
伪元素选择器 http://www.runoob.com/css/css-pseudo-elements.html
css 样式优先级 http://www.runoob.com/w3cnote/css-style-priority.html

CSS基础 ​

元信息 ​

什么是样式？ ​

内容、结构、样式与行为 ​

Web设计模式：分层 ​

分层的优点 ​

CSS的基本语法 ​

CSS的基础选择器: tag、class、id ​

级联规则 ​

DOM树: 文档对象模型 ​

关系选择器 ​

引入css的方式 ​

语法参考 ​

CSS基础

元信息

什么是样式？

内容、结构、样式与行为

Web设计模式：分层

分层的优点

CSS的基本语法

CSS的基础选择器: tag、class、id

级联规则

DOM树: 文档对象模型

关系选择器

引入css的方式

语法参考