CSS设计指南第三版

第一章

---

HTML标签

<cite></cite>引证
<blockquote>独立引用
<q> 文本内引用
<strong>重要

HTML实体

&amp &ldquo &rdquo

为文档添加样式的三种方法

• 行内样式
• 嵌入样式
• 链接样式
  在创建包含多个页面的网站时，需要把样式集中在一个单独的文件里，这个文件就叫样式表。
  在样式表中链接其他样式表：@import 指令（是一种 at 规则）
  @import url(css/styles2.css)
  @import 指令必须出现在样式表中其他样式之前，否则@import 引用的样式表不会被加载

第二章

---

CSS规则 选择特定元素的选择符

上下文选择符

• 
  
• 子选择符>
• 紧邻同胞选择符+
• 一般同胞选择符~
• 通用选择符*
• color 属性设定的是前景色。前景色既影响文本也影响边框，但人们通常只用它设定文本颜色。* { color: green; } 会导致所有元素（的文本和边框）都变成绿色。p * { color: red; } 这样只会把 p 包含的所有元素的文本变成红色。
  应用： 非子选择符

section * a {
    font-size:1.3em;
}

任何是 section 孙子元素，而非子元素的 a 标签都会被选中。

ID 和类选择符

• 多类选择符

<p class="specialtext featured">Here the p tag </p> 

• 选择同时存在这两个类名的元素，CSS 选择符的两个类名之间没有空格。

.specialtext.featured {
    font-size:120%;
} 

属性选择符

• 属性名选择符 ：标签名[属性名]

img[title] {
    border:2px solid blue;
} 

• 属性值选择符 ：标签名[属性名=”属性值”]

img[title="red flower"] {
    border:4px solid green;
} 

伪类

• UI伪类
  
  1. 链接伪类
  2. :focus伪类
  3. :target 伪类
• 结构化伪类
  
  1. e:first-child
  2. e:last-child
  3. e:nth-child(n)

伪元素

1. e::first-letter
2. e::first-line
3. e::before
4. e::after

应用

<p class="age">25</p> 
p.age::before {
    content:"Age: ";
}
p.age::after {
    content:" years.";
} 

第三章

---

盒模型

* {
    margin:0; 
    padding:0;
}

• 垂直方向上的外边距会叠加
• 水平外边距不叠加

p {
    font-size:1em; 
    margin:.75em 30px;
} 

• 垂直间距始终会保持为字体高度的四分之三

围住浮动元素的三种方法

• 为父元素添加 overflow:hidden
• 同时浮动父元素
• 添加非浮动的清除元素

.clearfix:after {     
    content:".";     
    display:block;     
    height:0;     
    visibility:hidden;     
    clear:both; 
}
<section class="clearfix">     
    <img src="duck.jpg">     
    <p>It's fun to float.</p> 
</section> 

定位

• 静态定位
• 相对定位 position:relative;
• 绝对定位 position:absolute; 绝对定位元素的定位上下文是 body
• 固定定位 position:fixed; 固定定位元素的定位上下文是视口
• 绝对定位和固定定位会把元素彻底从文档流中拿出来

显示属性

• display: none; 原本占用的空间会被回收
• visibility: hidden; 占据的空间不会被回收
  背景渐变
  linear-gradient
  -webkit-radial-gradient（VSP厂商前缀）

单元格属性

• colSpan 规定单元格可横跨的列数