CSS:The Definitive Guide(3nd)

描写CSS的书籍。web分为三层，HTML结构层，CSS表现层，Javascript和DOM动作层。
第1章
1. 一开始的html只能表现结构，不能显示颜色之类，后来添加了一些，但是太混乱，所以发明了CSS
2. CSS1996大放异彩
3. 重叠规则： 某个CSS中定义了h1的样子，后面又定义了h1的样子，则最后按后面定义的样子输出
4. HTML最常用元素:p,table,span,a,div
5. 块级元素如div,p,;      行内元素，如a
6. CSS的注释 /*     */

2012.11.2

第2章 选择器
1. 选择器一般是html元素
2. 选择器分组: h1,h2,h3{color:silver} h2,h3{background:grap;}
3. 通配符选择器 *{color:green}
3. 类选择器: 就是加点的例如： *.warning{font-weight:bold}           //当然*可以省略，意义一样
                                                       h1.warning{font-weight:bold}
  html中，写<p class="warning"></p>

4. 多类选择器 class="urgent warning", urgent和warning都是class slector
5.  ID选择器，就是加#的，例如：*#first-para {font-weight:bold;}, html中写为<p id="first-para"></p> ,当然*可以省略，意义一样的。
6.    实际中，浏览器并不检查HTML中ID的唯一性，但是使用getElementById()时，就会导致混乱。
7.  类选择器和ID选择器区分大小写。
8. 属性选择器,用[]括起来的选择器，例如h1[class]{font-weight:bold} ,这个就是h1标签的不管什么class，都进行这个设置。
   [foo^="bar"] 选择foo属性值以bar开头的所有元素
   [foo$="bar"]选择foo属性值以bar结尾的所有元素

   [foo*="bar"]选择foo属性值包含字串bar的所有元素
特定属性选择器：*[lang|="en"]{color:white} 这个规则选择lang属性等于en或者以en开头的所有元素。
9. 后代选择器 h1 em {color:gray} 设定h1标签中的em的color!!!
10. 选择子元素: h1>strong{color:red;} ，只选择h1的儿子strong,孙子及以下后代不受影响。
11. 选择相邻兄弟元素: h1+p{margin-top:0;}
12. 伪选择器，就是:冒号的选择器。
    a:visited{color:red;}
   :focus,:hover,:active
13. 伪元素选择器 :first-letter, first-line , before

 第3章 结构和层叠
1.   根据特殊性进行加分，最后决定到底产生什么格式出来。
2.   继承，例如一个h1应用某个颜色，那么这个颜色应用到h1中的所有文本，甚至应用到h1的子元素的文本中去。
3.   有些东西不能继承，如border,margin等。
4.  层叠 ,如指定h1{color:red}, h1{color:green},则最后产生绿色。
   

第4章 值和单位
1. 17个基本颜色：aqua,fuchsia,lime,olive,red,white,black,gray,marmoon,organge,silver,yellow,blue,green,navy,purple,teal
2.    h1{color:rgp(74%,74%,74%)}; 使用RGB指定颜色
2012.11.05
一天时间看完了，就看前四章，后面当做字典来查阅就好了。
什么都要学习呀，简单重复的劳动呀!    

css可继承和不可继承的属性

  以下属性是不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
  以下属性可被所有元素继承：visibility和cursor。
  以下属性会被内联元素继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  以下属性会被终端块状元素继承：text-indent和text-align。
  以下属性会被列表元素继承：list-style、list-style-type、list-style-position、list-style-image。
  以下属性会被表格元素继承：border-collapse。

内联级元素(inline-level element)中试图插入块级(block-level element)元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢？。

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

块元素(block element)

* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

可变元素
* applet - java applet

* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

Inline elements的定义

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). Several values of the ‘display’ property make an element inline: ‘inline’, ‘inline-table’, ‘inline-block’ and ‘run-in’ (part of the time; see run-in boxes). Inline-level elements generate inline boxes.

replaced elements and non-replaced elements

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user’s bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

replaced elements的大概意思是那些有自己尺寸和比例的元素，比如img有自己的宽和高。img，input，textarea，select，object这些都是replaced elements，除了它们别的元素就是non-replaced elements。

Inline elements的宽和高

对于non-replaced的inline元素，设置width和height是没有作用的，不过此类元素的高度可以由line-height来指定。

Inline elements的padding和margin

对于non-replaced的inline元素，padding和margin作用方式是一样的，margin和padding只会在左右两个方向起到实际作用。如下面的例子，将a元素的padding设置了50px，只在左右留出了空白。

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh