这是我参与「第五届青训营」伴学笔记创作活动的第2天。

CSS入门

什么是CSS

CSS指Cascading Style Sheet，层叠样式表，其记录了各HTML元素应该在页面中呈现的样式。

CSS是「一门吟唱咒语的魔法」，在「吟唱咒语」之前，应该先指定一个「施法对象」，CSS中对应的语法叫做选择器。

在选择器后使用一对花括号包裹若干「咒语」，即声明。一个声明由一个属性-值对构成，其间用冒号隔开，每条声明以分号结尾，它看起来像这样：h1 { color: red; }。

要想对HTML元素添加样式，大体上有三种可行的方法。

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

CSS内容可以放在一个单独的文件中，而不必与HTML掺杂在一起。

<style>
    a { text-decoration: none; }
</style>

<p style="font-size: 12px;">Copyright 2023 Zhilu. All rights reserved.</p>

不推荐使用这种方式来为元素添加样式，样式与内容的交错会影响编写页面的效率。

首先，浏览器解析HTML文档，并根据标签嵌套关系生成DOM（Document Object Model，文档对象模型），随后，HTML页面还需等待CSSOM（CSS Object Model ，CSS对象模型）生成并且对各DOM节点应用样式，再经过一系列其他渲染流程，才能呈现出页面。

如果遇到CSS没有定义的样式，初始值从哪里来？这就要参照浏览器的用户代理样式表应用对应样式了。对了，如果HTML文件头没有<!DOCTYPE html>的话，网页的某些元素可能会表现出一些—预期之外的样式哦。

CSS之所以叫层叠样式表，是因为它在描述样式的同时还有一个重要的特性——层叠。

就像是给屋子刷油漆一般，相同优先级的声明，后出现的往往被使用。例如这段：

p { 
    color: grey; 
}

p { 
    color: orange; 
}

段落显然是橙色的。

刚刚提到了优先级的概念，那不得不再提到优先级的判断标准——特异度。

一般来说，特异度遵循的一个原则是：选择范围越粗略，特异度越低，优先级也越低；反之优先级则越高。

一些对于父级元素的设置也会被子元素继承。例如规定html {font-family: serif; }，其中的大多数元素都会继承到这个属性值。