《CSS设计指南》读书笔记

时间 2019-11-10

原文原文链接

前言

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

第一章 HTML标记与文档结构

1.html的含义

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

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

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

3.alt属性的做用

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

4.搜索引擎关键词来源

title>h1浏览器

5.段落的做用

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

6.<!DOCTYPE html>含义

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

7.html标签

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

8.head标签

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

9.划重点

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

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.伪类和伪元素

之前总结过，结合这本书的新知识再从新怎里一下。
http://www.javashuo.com/article/p-zkqrapra-cy.html 伪类与伪元素

4.关于color

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

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

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