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%;} 

1. 属性选择符
   属性名选择符 ：标签名[属性名]

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

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

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

伪类
UI伪类
1. 链接伪类
2. :focus伪类
3. :target 伪类
结构化伪类
2. e:first-child
3. e:last-child
4. 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.";}