CSS设计指南（第3版）第二章 CSS工作原理

TanXinNiao commented 3 years ago

HTML创建文档结构，这里我们来说一说 CSS规则。怎么为 HTML 添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多种样式值的时候，CSS就要靠层叠机制来决定最终应用哪种样式。每个 HTML元素都有一组样式属性，可以通过 CSS来设定。这些属性涉及元素在屏幕上显示时的不同方面，比如在屏幕上位置、边框的宽度，文本内容的字体、字号和颜色，等等。CSS就是一种先选择 HTML元素，然后设定选中元素 CSS属性的机制。CSS选择符和要应用的样式构成了一条 CSS规则。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>HTML5 Template</title>
<style>
/* CSS 规则放在<style>标签中 */
</style>
</head>
<body>
<!-- HTML 元素放在<body>标签中 -->
</body>
</html>

代码里包含一个 HTML 的时，它会再切换回解释 HTML 代码。

TanXinNiao commented 3 years ago

CSS 规则分两部分，即选择符和声明。声明又由两部分组成，即属性和值。声明包含在一对花括号内对这个基本的结构，有三种方法可以进行扩展。第一种方法：多个声明包含在一条规则里。 p {color:red; font-size:12px; font-weight:bold;} 第二种方法：多个选择符组合在一起。 h1, h2, h3 {color:blue; font-weight:bold;} 第三种方法：多条规则应用给一个选择符假设，你在写完前面那条规则后，又想只把 h3 变成斜体，那可以再为 h3 写一条规则：

h1, h2, h3 {color:blue; font-weight:bold;}
h3 {font-style:italic;}

所有用于选择特定元素的选择符又分三种。  上下文选择符。基于祖先或同胞元素选择一个元素。  ID 和类选择符。基于 id 和 class 属性的值（你自己设定）选择元素。  属性选择符。基于属性的有无和特征选择元素。

TanXinNiao commented 3 years ago

上下文选择符

上下文选择符的格式如下：标签 1 标签 2 {声明} 其中，标签 2 就是我们想要选择目标，而且只有在标签 1 是其祖先元素（不一定是父元素）的情况下才会被选中。

<body>
<article>
<h1>Contextual selectors are <em>very</em> selective</h1>
<p>This example shows how to target a <em>specific</em> tag.</p>
</article>
<aside>
<p>Contextual selectors are <em>very</em> useful!</p>
</aside>
</body>

article h1 em {color:green;} 这里选择符的意思就是说：“选中的 em 必须有一个祖先是 h1 ，后者进而还要有一个祖先是 article 。” 值得一提的是上下文选择器的选择顺序是从右往左，如果有多个子元素性能可能会有点糟糕（挖坑）

TanXinNiao commented 3 years ago

特殊的上下文选择符

子选择符> 标签 1 > 标签 2 标签 2必须是标签 1的子元素，或者反过来说，标签 1必须是标签 2的父元素。与常规的上下文选择符不同，这个选择符中的标签 1 不能是标签 2 的父元素之外的其他祖先元素 section > > h2 {font-style:italic;} 紧邻同胞选择符+ 标签 1 + 标签 2 标签 2必须紧跟在其同胞标签 1的后面。 h2 + p {font-variant:small-caps;}

一般同胞选择符~

标签 1 ~ 标签 2 标签 2必须跟（不一定紧跟）在其同胞标签 1后面。 h2 ~ ~ a {color:red;} **通用选择符** ```p {color:red;} 这样只会把 p 包含的所有元素的文本变成红色。这个选择符有一个非常有意思的用法，即用它构成非子选择符，比如： section * a {font-size:1.3em;}``` 如图 2-13所示，任何是 section 孙子元素，而非子元素的 a 标签都会被选中。至于 a 的父元素是什么，没有关系。

TanXinNiao commented 3 years ago

ID 和类选择符

ID 和类选择符区别： ID 也可以用在页内导航链接中。下面就是一个链接，其目标是同一页的另一个位置。 Biography 看到 href 属性值开头的 # 了吗？它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有 # ，浏览器就会尝试加载 bio 目录下的默认页面了）。 ID的用途是在页面标记中唯一地标识一个特定的元素类是可以应用给任意多个页面中的任意多个 HTML元素的公共标识符

<nav>
<ul>
<li class="boy"><a href="#">Alan</a></li>
<li class="boy"><a href="#">Andrew</a></li>
<li class="girl"><a href="#">Angela</a></li>
<li class="boy"><a href="#">Angus</a></li>
<li class="girl"><a href="#">Anne</a></li>
<li class="girl"><a href="#">Annette</a></li>
</ul>
</nav>

不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能像大多数对 CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的 CSS 量。

TanXinNiao commented 3 years ago

属性选择符

属性名选择符 img[title] {border:2px solid blue;} <img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" /> title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。 属性值选择符 img[title="red flower"] {border:4px solid green;}

TanXinNiao commented 3 years ago

伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。  UI（User Interface，用户界面）伪类会在 HTML 元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用 CSS样式。  结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用 CSS 样式。

UI伪类

链接伪类  Link。此时，链接就在那儿等着用户点击。  Visited。用户此前点击过这个链接。  Hover。鼠标指针正悬停在链接上。  Active。链接正在被点击（鼠标在元素上按下，还没有释放）。给新手的话：一个冒号（ : ）表示伪类，两个冒号（ :: ）表示 CSS3新增的伪元素。尽管浏览器目前都支持对 CSS 1和 CSS 2的伪元素使用一个冒号，但希望你能习惯于用双冒号代替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉。（这句话不懂啥意思，以前的伪元素我用::会报错，挖坑） :focus 伪类 表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。 input:focus {border:1px solid blue;} :target 伪类 如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用 :target 伪类选中它。 #more_info:target {background:#eee;} 会在用户单击链接转向 ID为 more_info 的元素时，为该元素添加浅灰色背景。

结构化伪类

:first-child 和 :last-child和nth-child ol.results li:first-child {color:blue;} li:nth-child(3)

TanXinNiao commented 3 years ago

伪元素

::first-letter 伪元素 p::first-letter {font-size:300%;} 可以得到段落首字符放大的效果。 ::first-line 伪元素 p::first-line {font-variant:small-caps;} 可以把第一行以小型大写字母显示

::before 和 ::after 伪元素

可用于在特定元素前面或后面添加特殊内容。

<p class="age">25</p>
和如下样式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}

能得到以下结果：Age: 25 years.

TanXinNiao commented 3 years ago

继承

如果我们为 body 像下面一样写一条规则 body {font-family:helvetica, arial, sans-serif;} 那么，文档中的所有元素，无论它在层次结构中多么靠下，都将继承这些样式注：也有很多 CSS 属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距由于字体和文本样式是可以继承的，所以在使用相对字体单位（如百分比和 em ）时要格外小心。如果某个标签的字体大小被设置为 80%，而它的一个后代的字体大小也被设置为 80%，那么该后代中文本最终的字体大小将是 64%

TanXinNiao commented 3 years ago

层叠

层叠是 CSS的核心机制，理解了它才能以最经济的方式写出最容易改动的 CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们能根据需要更改文档的显示效果（比如整体调整字号）。

样式来源

作者给网页添加样式的三种方法：链接样式、嵌入样式和行内样式。以下就是浏览器层叠各个来源样式的顺序：  浏览器默认样式表  用户样式表  作者链接样式表（按照它们链接到页面的先后顺序）  作者嵌入样式  作者行内样式

TanXinNiao commented 3 years ago

层叠规则

层叠规则一：找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时，都会据此查到每一条 CSS规则，标识出所有受到影响的 HTML 元素。 层叠规则二：按照顺序和权重排序。浏览器依次检查 5个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查完页面中所有标签受影响属性的全部 5个来源为止。声明也可以有权重。可以像下面这样为单独的声明增加权重： p {color:green !important; font-size:12pt;} 空格 !important 分号（ ; ）用于加重声明的权重。这条规则加重了将文本设置为绿色的权重。于是，就算层叠的下一来源给段落设定了其他颜色，最终的颜色值仍然还是绿色。 层叠规则三：按特指度排序

计算特指度

选择符中有一个 ID，就在 I的位置上加 1；
选择符中有一个类，就在 C的位置上加 1；
选择符中有一个元素（标签）名，就在 E的位置上加 1；
得到一个三位数。好了，下面通过几个例子来理解特指度。 P 0-0-1 特指度=1 p.largetext 0-1-1 特指度=11 p#largetext 1-0-1 特指度=101 body p#largetext 1-0-2 特指度=102 body p#largetext ul.mylist 1-1-3 特指度=113 body p#largetext ul.mylist li 1-1-4 特指度=114 I - C - E 层叠规则四：顺序决定权重 如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出设定的样式胜过继承的样式 千万得知道 0-1-12与 0-2-0相比，仍然是 0-2-0的特指度更高。

TanXinNiao commented 3 years ago

规则声明

CSS属性值主要分以下三类。文本值。例如， font-weight:bold 声明中的 bold 就一个文本值。文本值也叫做关键字。数字值。颜色值。

数字值

数字值主要分两类：绝对值和相对值相对值及示例相对值单位缩写示例 Em em height:1.2em Ex ex height:6ex 百分比 % height:120 % em 和 ex 都是字体大小的单位，但在 CSS 中，它们作为长度单位适用于任何元素。先说说 em ，它表示一种字体中字母 M 的宽度，因此它的具体大小取决于你使用的字体。而 ex 呢，等于给定字体中字母 x 的高度（小写字母 x代表一种字体的字母中间部分的高度，不包括字母上、下突出的部分——如 d和 p上下都出头儿）。

颜色值

颜色名（如 red） 十六进制颜色（#RRGGBB 或#RGB） RGB 颜色值（R, G , B） RGB 百分比值（R%, G%, B%） HSL (色相, 饱和度%, 亮度%) HSL 颜色中的第一个值表示色相，也就是一个实际的颜色，比如红色和绿色。所有颜色围绕色相环（也叫色轮）一周，而色相值以圆周上的度数表示。饱和度设定有多少颜色，灰色的饱和度低，而强烈的色彩饱和度高。亮度设定颜色的明暗，0%就是黑色，100%就是白色，而中间的值是实际能看到的色相 Alpha 通道 RGB 和 HSL都支持 Alpha通道，用于设置颜色的不透明度（换句话说，就是能够透过多少背景）。相应的格式分别叫 RGBA和 HSLA

TanXinNiao / blog