《写给大家看的CSS书》部分读书笔记
Author：chemandy
第2章 CSS的工作原理
1.添加样式三种方法
◇内联样式（局部样式）：通过XHTML的style属性为标签添加的样式。
◇嵌入样式（页面样式）：昂在XHTML文档头部中的一组CSS样式。
◇链接样式：把样式放到一个单独的文档（即样式表）中，然后将它链接到多个页面以便相应的样式具有全局作用范围（整个网站）。
2.在文档层次中对准标签
◇使用上下文选择符。可间接作用于后代元素（不一定是直接后代元素）。
◇使用子选择符“>”,如：p > em {color:green;}，只作用于p的em直接后代元素。(IDWIMIE6)
◇添加类和ID：①直接添加类，②上下文中添加类，③一个元素添加多个类用空格隔开。
◇特殊选择符：①通配选择符，②相邻同辈选择符，③属性选择符（IE6、7不支持）。
3.伪类
◇锚链接伪类love-hate。
◇x:first-child，这个伪类用于选择签名为x的元素的第一个元素。（SCB和IE7支持）
◇x:focus，当用户单击一个表单字段时，我们说该字段会获得焦点，获得焦点的字段可以让用户在其中输入字符。（IE6、7和Safari不支持）
4.伪元素
◇x:first-letter，为第一个字母添加样式。
◇x:first-line，通常x为p，为一段文本第一行添加样式。（所有SCB和IE7支持）
◇x:before和x:after，能够为元素的前、后添加指定的文本。（IE7不支持）
ps：IE6不支持伪类和伪元素，IE7部分支持。
---------------------------------------------------------------------------------------
第3章 字体和文本样式
（一）字体种类
1. serif字体（Times New Roman、Georgia和Palatino等）：该字体在字符笔画末端有叫做衬线的一些小细节。
2. sans-serif字体（Trebuchet MS、Arial、和Verdana）字符笔画末端没有任何细节。
3. monospace字体（Courier和Monotype）每个字母的宽度相等（即“I”与“m”具有相同的宽度）。
4. cursive字体（Comic Sans MS和Brush Script）：看起来像是手写笔迹，单笔真正的手写效果要整洁得多。
5. fantasy字体：指不能归入其他种类的字体。
（二）设置字体大小
有3种类型的值：绝对值（例如，像素和英寸）、相对值（例如，百分比或em）和“运动衫尺码关键字”（例如，x-small、small、large和xx-large等）。
（三）字体属性简写方式（使用font属性包含所有值）：
规则1：始终要保证声明font-size和font-family的值。
规则2：这些值的先后顺序如下所述。
（1）首先是font-weight、font-style、font-variant——任意顺序；
（2）然后是font-size；
（3）然后是font-family。
（四）文本属性
1. text-indent属性：文本缩进。
2. Letter-spacing属性：调整字母间距，“缩排效果”。
3. Word-spacing属性：单词间间距。（空格分隔的任何字符或字符组都看成是一个单词）
4. Text-decoration属性：为文本添加下划线、上划线、删除线及闪烁效果。
5. Text-align属性：水平方向文本对齐方式。（文本垂直居中参考文献“Vertical Centering in CSS”）
6. line-height属性：行间距。
7. text-transform属性：改变元素中文本大小写形式。（值：uppercase、lowercase、capitalize、none）
8. vertical-align属性：可以相对于基线将文本向上方或下方移动，典型应用：将公式或数学表达式中的数字转换为上标或下标。
---------------------------------------------------------------------------------------
第5章 基本的页面布局
（1）两栏固定宽度布局
Key：
栏目设定宽度，使用float布局。
（2）两栏流动布局
key：
两栏，nav与content。
让nav左浮动脱离文档流。
content设足够大左边距防止nav。
思考：脱离文档流的盒子可栖身于未脱离文档流的大边距中。
（3）三栏固定宽度布局
key：
设定各栏目宽度，使用float布局。
（4）三栏流动式布局
key：
三栏，nav、content、promo。
nav盒子，左浮动，固定宽度。
content盒子，不浮动处于文档流，设足够大的左边距放置nav盒子。另外，设足够的又边距放置promo盒子。
nav与content关系如两栏流动布局。
promo盒子，左浮动，设固定宽度。
threecolwrap盒子包含三栏目，左浮动，宽度设100%。
twocolwrap盒子包含nav和content，左浮动，宽度设100%，并设与promo盒子宽度相同的负的右边距，以容纳promo盒子。
结论：脱离文档流的盒子可以栖身于文档流盒子的左边距，而不能栖身于其右边距，解决方法如上。
PS:任何使用float属性的盒子自动成为块级元素。当一个元素中同时存在float和margin，ie6下会产生双倍边距，解决方法：display：inline；
---------------------------------------------------------------------------------------
CSS
---------------------------------------------------------------------------------------
一、层叠次序（数字 4 拥有最高的优先权）
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
---------------------------------------------------------------------------------------
零散知识点
◇是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
◇属性选择符两种特殊用法：[title~=hello] { color:red; }适用于由空格分隔的属性值；[lang|=en] { color:red; }适用于由连字符分隔的属性值：
◇样式表应该放置于<head></head>内。
◇所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。
◇direction 属性规定文本的方向 / 书写方向。（值：ltr、rtl、inherit）
◇文档流：普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。
◇z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
◇使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
◇绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
◇绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
◇因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
◇由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
◇浮动元素脱离了文档流，所包围图片和文本的 div 不占据空间。
---------------------------------------------------------------------------------------
W3school
1. .class1.class2 {} 作用于同时具有class1和class2类的元素。中间没有空格，所以并不是上下文选择符。
2. 重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。
3. 类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
4. 属性选择符
[abd~="def"] 选择 abc 属性值包含 "def" 的所有元素
[abd^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abd$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abd*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
*[lang|="en"] {color: red;}选择 lang 属性等于 en 或以 en- 开头的所有元素。
[att|="val"] 可以用于任何属性及其值。
5. y > x:first-child {} 伪类来选择元素的第一个子元素。即，父元素y里面第一个子元素为x才对应实行样式。
6. :lang 伪类使你有能力为不同的语言定义特殊的规则。
7. @media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。@media screen{} 可选值：all、aural、braille、embossed、handheld、print、projection、screen、tty、tv。
8. Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。请使用 JavaScript 和 HTML DOM 取而代之。
相关推荐
读书笔记--Head First Html与Css 目录
1、
时间：2024-05-02 09:35
