《CSS设计指南》读书笔记

前言

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

第一章 HTML标记与文档结构

1.html的含义

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

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

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

3.alt属性的作用

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

4.搜索引擎关键词来源

title>h1

5.段落的作用

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

6.含义

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

7.html标签

标签,也就是所谓的根级标签,标签只有两个直接的子标签:和。

8.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.类选择器
 

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

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

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

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

c.ID选择器

Biography

Biography

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

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

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

Back to Top

注意:如果你暂时不知道某个 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;}
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 又看了一点,纪录一下。


你可能感兴趣的