stylin’ with CSS:A Designer’s Guide

第一章：Web标准

1.内容、结构、表现和行为

内容是网页原材料，如文本，图像，视频等。结构是XHTML的标记集合。

表现即外观，用CSS来设置。行为是对浏览者动作的反应，用JavaScript来编写。

好的网页必须做到这4者的严格分离。

2.XHMTL

XHTML是将HTML作为XML进行了一次重新表达，可以自定义标签，加强了扩展性。

标准XHMTL的编码要求：

• 声明DOCTYPE，Strict、Transitional、Frameset.
• 声明XML命名空间
• 声明内容类型
• 关闭每个标签，无论是封闭标签还是非封闭标签
• 标签正确嵌套
• 行内标签不能包含块级标签
• 标签全部小写
• 属性必须有值，并且值必须加引号
• 用实体编码来表示特殊符号，如<表示&lt;

3.title标签

title标签对于搜索引擎来说占有相当大的权重，所以要设置好这个标签

4.块级元素和行内元素

块级元素无需换行符，自动在页面上堆叠起来，在默认情况下会预先设置一些外边距。行内元素则没有这些外边距，它们会肩并肩的横向排布在页面上，知道页面空间不足换行。

常见XHTML标签及属性：

http://www.elizabethcastro.com/html/extras/xhtml_ref.html

 

第二章 CSS的工作原理

1.三种方式

• 内联样式：直接写在元素属性中，尽量避免。
• 嵌入样式：写在页面头中，通常也只用于特殊情况
• 链接样式：样式放在单独的文档中，然后将它链接到多个页面。真正做到了结构与表现分离。&lt;link href=”my_css_sheet.css” media=”screen” rel=”stylesheet” type=”text/css” />

2.CSS规则

CSS要求绝对精确，省略一个分号或者多一个冒号都会导致浏览器忽略整条规则！！

基本：p {color:red; font-size:12px;}

多个：h1, h2, h3 {color:blue;}

后代：div p span { }

子选择符：p &gt; em { }

类：.myclass { }

上下文中的类：p.myclass { } p.myclass span { }

注意：一个标签可以应用多个类。

ID:#myid { }

注意：一般来说，应该有节制的使用ID和类，正确的用法是把它们添加到包含标签主要部分的div中，然后再使用以相应的ID和类名开头的上下文选择符来访问位于该ID种的标签。

通配： p * { }

相邻同辈：h1 + p { }

属性：img[title] { }, img[title=”hello”] { }。img[title|=”hello”] { }

其中第三条匹配title以hello开头的img

但是IE6和IE7都不支持属性选择符

伪类：伪类是指同样也是类，但并没有实际添加到标签中的类，通过伪类可以在某种事件发生时，将规则应用到标签上。

锚链接的四种伪类 a：link, a:visited, a:hover, a:active

IE6只支持链接（a）的这四种伪类，IE7虽然支持任何元素上的悬停行为，但DOCTYPE必须是严格型。FF等则支持所有伪类。

其他有用的伪类： p:first-child(last-child),第一个（最后一个）p元素

input：focus获取焦点

伪元素：伪元素可以在文档中添加额外标记（事实上并没有）。

p：first-letter {font-size:300%; float:left;}段落开头首字放大效果

x:first-line，x元素第一行

x:before和x:after，能够在元素前后添加指定文本，如：h1.age:before {content:”Age: ”}

注意：不要依赖伪类和伪元素生成网站的关键内容，以为IE6和IE7不能很好的支持它们

 

3.继承

CSS拥有强大的继承机制，利用继承可以减少实现必要效果的CSS代码。有些属性可以被继承，比如文本属性，但是有些属性不能被继承，主要是盒元素的定位和显示。

此外，当使用百分比和em等相对尺寸时，需要注意。当一个标签的文本大小设置为80%，其后代标签文本大小也是80%，则后代标签的实际大小事64%。

 

4.层叠机制

3条重要规则

• 包含ID的选择符覆盖包含类的选择符，包含类的选择符覆盖只包含标签的选择符
• 内联样式覆盖嵌入样式，嵌入样式覆盖链接样式。但是当选择符更有针对性时，优先使用，即规则1优先于规则2
• 无论如何，定义的样式覆盖继承的样式

一个大概的规则：看哪条规则更加明确，更有针对性！！

 

5.数字值

数字值用于定义各种元素的长度，分两种类型：绝对值和相对值

绝对值推荐使用px，相对值则推荐使用%和em。其中使用em来指定字体大小，1em等于浏览器中设置的字体大小，通常为16px

 

第三章 字体和文本样式

1.字体属性：

font-family，可以指定多个值，按先后顺序使用。

font-size，用em设置，注意标记嵌套时的继承

font-style,设置是不是显示斜体

font-weight，设置字体粗细

font-variant，只接受small-caps，所有字母转换成小型大写字母（少用）

字体属性的简写方式：

可以将上述的属性都写在一个地方，如 p {font: bold italic small-caps .75em verdana, arial, sans-serif;}

规则：

• 始终要声明font-size和font-family
• 顺序：首先是weight，style，variant（这3个任意），然后size，最后family

 

2.文本属性

文本会被包含在一个细长的盒子中，而且通常会跨越多行，作者称之为“蛇”形文本。

text-indent:这个属性用来设置文本盒子相对于包含元素的开始位置，值可以为正值或者负值

letter-spacing:字母间距

word-spacing：单词间距

text-decoraction:underline，overline，linethrough，blink，一般用于链接。

text-align：对齐方式，left，right，center，justify，不一定用于文本元素，也可以对齐图像等其他

line-height：行间距，值为数学值，不需要单位

text-transform：uppercase，lowercase，capitalize，none，大小写，或者首字母大写