CSS 级联样式表

什么是 CSS ?

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

什么是样式？

在 wordpress 站点中，更换一个主题theme(即一组样式文件的集合)，则会有站点内容不变，但站点外观大异的效果.

具有同一结构的文档，可以拥有多种不同的呈现或外观，即样式

内容、结构、样式与行为

示例：一曲新词酒一杯

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

结构与样式的分离

  • HTML刻化了内容的结构,令机器更易阅读和理解内容(即语义),但HTML文档并不适合普通用户阅读
  • CSS描述了内容的呈现样式,即指示机器(如浏览器)应当如何呈现内容,从而令HTML文档适合普通用户阅读

结构与样式分离原则：关于样式规则的代码应尽量与文档内容及结构标记从逻辑上和物理上进行分离。这样：

  • 机器用户(譬如爬虫)可以阅读干净的内容及结构,而不受样式代码的干扰。 错误代码示例 纠正工具
  • 同一文档，面向不同偏好的用户或设备环境,可以具有最适合的外观或表现形式。

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

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

<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渲染

<html><body><div id="main"><ul><li>one</li><li>two</li><li>three</li></ul><h2>标题1</h2><p>段落1</p><h2>标题2</h2><p>段落2</p></div></body></html>

html dom

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

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

关系选择器

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

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

引入css的方式

  1. 外联

    <head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

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

  2. 内联

    <p style="color:red;padding:10px">此处是正文</p>

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

  3. 嵌入

    <style>  p {color:red;padding:10px;}   </style>

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

推荐使用外联模式，实现物理分离。内联、嵌入多用于调试

语法参考

results matching ""

    No results matching ""