《CSS设计指南》读书笔记

前言

代码网址：http://www.stylinwithcss.com/

第一章 HTML标记与文档结构

1.html的含义

HTML 标记内容的目的是为了赋予网页语义（semantic）。就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。
用户代理：浏览器、给视障用户朗读网页的屏幕阅读器，以及搜索引擎放出的 Web 爬虫都是用户代理，它们需要显示、朗读和分析网页。

2.闭合标签与自闭合标签的区别

闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在 HTML 页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。

3.alt属性的作用

视障用户使用的屏幕阅读器会大声读出 alt 属性的内容，因此一定要给<img>标签的这个 alt属性添加让人一听（或一看）就能明白的内容。

4.搜索引擎关键词来源

title>h1

5.段落的作用

段落用于标记主要的文本内容，是所有文本元素中出场率最高的一个。简言之，只
要有不适合放在其他文本标签中的文本，都可以把它放一个段落里面。

6.<!DOCTYPE html>含义

是一种简化的 DOCTYPE，这一行就是为了声明：“以下是一个 HTML 文档。”

7.html标签

<html>标签，也就是所谓的根级标签，<html>标签只有两个直接的子标签：<head>和<body>。

8.head标签

帮助浏览器理解页面的信息都包含在<head>标签中

9.划重点

无论你想了解哪个 HTML 元素，第一个要问的问题都应该是：它是块级元素，还是行内元素？知道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它。

10.blockquote

引用，使用cite标签包含作者姓名。

11.关于dom

DOM 是文档对象模型，从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树

2019.01.20 看了这本书的第一章，感觉大部分都已经了解，不过也有收获。
补充：html实体字符：http://www.w3school.com.cn/html/html_entities.asp

第二章 css工作原理

1.样式表

样式表：扩展名为.css的文本文件

2.@import指令

在样式表中链接其他样式表的方法：@import 指令如：@import url(css/styles2.css)

要注意的是，@import 指令必须出现在样式表中其他样式之前，否则@import 引用的样式表
不会被加载。

3.css选择器

a.上下文选择符

1）A,B 同时选择A、B两个元素

2）A B 选择以A为祖先（父）元素的B元素

3）A>B 选择以A为父元素（祖先元素不算）的B元素

4）A+B 选择紧跟（中间没有其他元素）在A后面的第一个B元素

5）A~B 选择跟（可以不紧跟）在A后面的所有兄弟元素中的B元素

6）通配符：*
p * {color:red;} 只会把 p包含的所有元素的文本变成红色。
这个选择符有一个非常有意思的用法，即用它构成非子选择符，比如： section * a {font-size:1.3em;}
任何是 section孙子元素，而非子元素的 a标签都会被选中。至于 a的父元素是什么，没有关系。

b.类选择器

<p class="specialtext featured">Here the span tag <span>may or may not</span> 
be styled.</p>

选择同时存在这两个类名的元素，可以这样写：

`.specialtext.featured {font-size:120%;}

`
注意，CSS 选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的那个元素。如果加了空格，那就变成了“祖先/后代”关系的上下文选择符了。

每个类名分别用一个 HTML class 属性的做法是常见的错误，正确的做法是像上面的代码那样，只用一个 class 属性，但给它设定多个值（不太理解，但感觉是重点，后面估计还会有讲解）

c.ID选择器

<h3 id="bio">Biography</h3> 
<a href="#bio">Biography</a>

href 中 # 表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有#，浏览器就会尝试加载 bio目录下的默认页面了）

用户单击前面的链接时，页面会滚动到 ID值为 bio的 h3 元素的位置。如果链接的 href 属性里只有一个#，那么点击该链接会返回页面顶部。

那么返回顶部的代码就可以写成

<a href="#">Back to Top</a>

注意：如果你暂时不知道某个 href 应该放什么 URL，也可以用 # 作为占位符，但不能把该属性留空。因为 href 属性值为空的链接的行为跟正常链接不一样。这样，团队中的其他人将来可以用中间层（比如 PHP）变量替换#，以便动态接收来自数据库的 URL。

小结：什么时候用ID，什么时候用类

ID 的用途是在页面中唯一地标识一个元素，每个 ID 名在页面中都只能用一次。到了后面读者会发现，我经常会给页面中每个顶级区域都添加一个 ID，从而得到非常明确的上下文，以便编写 CSS 时只选择嵌套在相应区域内的标签。（mark一下，后面留意）

类的目的是为了标识一组具有相同特征的元素，每个类可以被多个元素使用。

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

e.属性选择器

1）属性名选择

img[title] {border:2px solid blue;}
<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

带有 title属性的 HTML img元素，title属性有什么值，无关紧要。
小知识：alt属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。

2）属性值选择

img[title="red flower"] {border:4px solid green;}

在图片的 title 属性值为 red flower 的情况下，才会为图片添加边框。

f.伪类和伪元素

以前总结过，结合这本书的新知识再重新怎里一下。
https://segmentfault.com/a/1190000018001646 伪类与伪元素

4.关于color

color属性设定的是前景色（？）。前景色既影响文本也影响边框，但人们通常只用它设定文本颜色。

2019.1.21 今天一天都在为生活中的事情奔波，乱七八糟的事情一堆，烦心。晚上做了点蛋挞，也翻车了==。不过做蛋挞的时候还是挺开心的，因为总想着马上就有香甜酥脆，软糯润滑，能把隔壁小孩馋哭的蛋挞吃了。有美好的期望，总能让人干劲十足！！

2019.1.24 又看了一点，纪录一下。