前端基础内容读书笔记（一）

1.em 和strong 元素都表示强调，区别在于后者要比前者的强调程度更深。在大多数浏览器中，em 元素中的文字会以斜体方式显示，而strong元素中的文字会以粗体方式显示。二者一起使用则是粗斜体。
单位中的%，百分数通常表示另一个数值的相对值，这个基值可能位于同一元素的其他属性中，也可能位于某个祖先元素中。如：

p#text{
    font-size:12px;
}
p#text{
    line-height:150%;
}

上面的行距就是相对于同一元素的font-size属性的。行距大小为12*150% = 18px；
行距：一行的顶端与下一行顶端的距离。

2.组选择：使多个元素具有相同的CSS样式

h1, h2, h3, p#title {
    font-size:14px;
}

空格是后代选择器。子选择符（div > p）和邻接兄弟选择符（dt + dd）在IE6中均不识别。IE6及以前版本不支持属性选择符。为了获得最大兼容性，应尽量使用后代选择符。

3.多重class
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。只有其中的一个类名或部分的，不能匹配。
<a class="class1 class2" href="/">链接</a>

a.class1.class2{
  color:red;
}

如上，不能匹配<a class="class1">和<a class="class2">，但是能匹配<a class="class1 class3 class2">。

注意：IE6及以前版本对多重class支持效果并不理想，上面示例的选择付div.class1.class2应该只匹配class属性为”class1 class2”的a 元素，但是IE中还会匹配class 属性为”class2”的a 元素。

4.一个HTML文档中，ID选择器只能用一次。不同于类选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。

5.伪元素
伪元素是一种在（X）HTML标记中并不实际存在的抽象元素。比如，标记语言并没有一种机制可以访问某个元素的首个字符或首行内容。而CSS伪元素则创建了这样的虚拟元素，通过这种虚拟元素可以访问并控制其样式。
（1） ：first-line 和：first-letter伪元素
使用：first-line伪元素添加只应用与某元素首行的样式。该元素必须是块级（block）、内联块（inline-block）、表格标题（table caption）或表格单元（table cell）,所添加的样式属性也是有限的：

• 字体属性（font）
• 颜色（color）
• 背景属性（background）
• 词间距（word-spacing）
• 字间距（letter-spacing）
• 文字装饰（text-decoration）
• 垂直对齐（vertical-align）
• 文字变形（text-transform）

• 行距（line-height）
  如：p:first-line {font-size:130%;}

  :first-letter，元素的首个字符。应用：first-letter元素需是块级元素、内联元素、列表项、表格标题或表格中的单元格。除可以使用：first-line规定的属性外，:first-letter还可以使用如下属性：

• 浮动（float）

• clear
• 填充（padding）
• 边框（border）
• 边距（margin）
  如：p.text:first-letter{color:red;}
  注意：IE6及以前版本不支持 :first-line 和 :first-letter伪元素。IE7和Firefox的显示结果也存在细微的差别。
  （2） ：before 和：after 伪元素
  用来确定要产生的内容放置在哪里，可以在元素的开头或结束位置。如：

p:before{
     content:"重要通知！";
}
p:after{
     content:"不许迟到。";
}
<p>今下午开会，参加。</p>

效果为：重要通知！今下午开会，参加。不许迟到。
注意：IE不支持:before 和 ：after伪元素。