《Head First HTML & CSS》读书笔记 – kiwi

《Head First HTML & CSS》读书笔记 - kiwi

第三章 构建模块

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 特定性的确定


《Head First HTML & CSS》读书笔记 – kiwi

相关文章:

你感兴趣的文章:

标签云: