《Head First HTML & CSS》读书笔记

第三章 构建模块

p89 <q>和<blockquote>的区别

<blockquote>是一个块（block）元素，<q>是一个内联（inline）元素。

块元素显示时就好像前后各有一个换行，而内联元素在页面文本流中总在“行内”出现。

块元素是web页面中主要的构建模块，而内联元素用来表示小段内容

p98 void元素

<br> <img>这样的元素没有实际内容的元素称为 void元素

p99 xhtml中<br>应该写成<br/>

p102 html list

<ol> ordered list, <ul> unordered list, <li> list item

p112 特殊字符

>  &gt (greater than)

< &lt (less than)

& &amp

第四章 链接起来

p126 域名和网站名的区别

www.starbuzzcoffee.com 中 starbuzzcoffee.com 是域名， www是域中特定服务器的名字

如book.douban.com、movie.douban.com这些网站名都属于同一个douban.com的域名

p151 如何用id链接到元素

<a href="index.html#chai">See Chai Tea</a>

点击这个链接就会跳转到index.html中id为chai的部分显示

p156 用target打开新窗口

<a target="_target" href="http://www.google.com">Google</a>

第五章 为你的页面增加图像

p167 jpeg、png和gif的对比

照片和复杂图像使用 jpeg（jpeg有损、不支持透明度、比较小、不支持动画）

单色图像、logo和几何图像使用png或gif（png可包含上百万中颜色、无损、可透明、图像下面的东西可以显示出来、相对于jpeg而言png更大；类似png、256种颜色、无损、支持透明度，不过只有一种、比jpeg更大、支持动画）

p173 img中的alt属性

img中alt给定一段文字，当图像不能显示时，就显示这段文字

p195 img是内联元素

第六章 严肃的HTML

p222 HTML简史

html和xml的分手？？

第七章 CSS入门

《CSS Pocket Reference》

p281 CSS中的继承 & p284 覆盖继承

可以给元素提供特定的规则来覆盖继承，有点儿像面向对象编程中的，父类和子类的感觉。

某些CSS是可以继承的，而某些是不行的，总的来说，如果样式会影响你的文本外观，那么它就是可以继承的

应用样式快捷指南：

1.有没有某个选择器选择你的元素？

2.有没有继承？

3.都没有？使用默认值

4.如果多个选择器选择了同一元素，则使用更特定的那个规则

第八章 字体系列概述

p314 字体系列

font-family包含一组有共同特征的字体：sans-serif、serif、monospace、cursive和fantasy。

sans-serif：没有衬线，与serif比，更适合在计算机上显示

serif：有衬线，新闻报纸的文字排版

monospace：字体固定宽度，适合显示代码

curisive和fantasy：比较有趣的字体

p325 增加web字体

@font-face {

font-family: "Emblema One";  //font名字

src: url("..../EmblemaOne-Regular.woff")

       url("..../EmblemaOne-Regular.ttf")

}

可以使用google的字体托管服务

p328 调整字体大小的三种方式

px：直接指定大小

body  {  font-size: 14px;}

%: 相对于父元素的大小

body  {  font-size: 14px;  }

h1 {  font-size: 150%;  }

这相当于说h1的font-size是21px

em: 类似%，不过表示的是倍数

body  {  font-size: 14px;  }

h1 {  font-size: 1.5em;  }

还有xx-small, x-small, small, medium, large, x-large和xx-large

字体粗细： font-weight: bold

第九章 盒模型

p365 line-height

p367 盒模型

从内到外：content area(width)、padding(内边距)、border(边框)、margin(外边框)

content area：内容区用于显示元素内容

padding：内边距是透明的，没有颜色，也没有自己的装饰

border：边框可以有各种不同的宽度和颜色

margin：外边距也是透明的，没有颜色，也没有自己的装饰

p373 是一个非常好的例子

第十章 div与span

p417 div表示一个快级逻辑区

p423 div是一个块元素

p442 CSS简写属性

p448 span内联级内容逻辑分区

p453 伪类

a:visited { color: red; } 

当连接访问过以后显示为红色。

其他的状态按顺序还包括： link, visitied, hover, focus、active。

浏览器会在后台根据用户的操作对伪类进行添加删除的维护

p457 CSS中的层叠

层叠：给定一组样式，浏览器是按照层叠的方式来确定使用哪一个样式

层叠的顺序

1. 收集所有的样式表

2. 找到所有匹配的声明

3. 对所有的匹配规则排序（作者、读者、浏览器）

4. 按特定性对所有声明进行排序

5. 对于冲突的规则，按照它们在各自样式表中出现的顺序进行排序

p460 特定性的确定

【选择器包含id则+1】 | 【选择器若包含类或者伪类则+1】|【选择器包含元素名+1】

如 h1.blue 为 0 1 1，#expert 为1 0 0

第十一章 布局与定位

流体布局（liquid layouts）

p473 流（flow）

流就是浏览器在页面上摆放HTML元素所用的方法，浏览器从HTML文件最上面开始，从上到下沿着元素逐个显示所遇到的各个元素。

p475 块元素从上往下流，内联元素从左往右流

p477 外边距的处理

对于并排放置的内联元素，外边距不会折叠，并排放置的外边距就是他们的外边距之和；对于上下放置的两个块元素时，会产生折叠，折叠后的高度就是最大的外边距高度

p478 嵌套时的外边距 & 内联元素可以有外边距吗？

p479 浮动元素

#amazing {  width: 200px;  float: right;  }

浮动元素不再是正常流中的一部分，不过块元素中的内敛元素，它们会围绕着这个浮动元素

浮动元素时，限制大小，并且表明浮动的方向。

p495 使用clear解决重叠问题

#footer { ... clear: right;  }

p496 浮动元素的外边距会折叠吗？

不会，浮动元素只是浮在页面上，所以它的外边距并不会碰到正常流中元素的外边距。

冻结布局（frozen layouts）

p500 #allcontent {  width: 800px;  margin-left: auto;  margin-right: auto;  }

绝对定位：流中的元素不会将其内联内容围绕在一个绝对定位元素周围，它们完全不知道页面上有这个绝对定位的元素！！！

绝对布局

p506 position属性有四种取值：static、aboslute、fixed和relative

详细解释可以参考： http://www.w3school.com.cn/css/css_positioning.asp

表格显示布局

p515 创建表格显示

div#tableContainer {  display: table;  }

div#tableRow {  display: table-row;  }

#main {  display: table-cell;  }

#sidebar {  display: table-cell;  }

四种显示布局：

浮动布局、凝胶布局、绝对布局、表格显示布局

CSS Position:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

http://www.barelyfitz.com/screencast/html-training/css/positioning/