CSS重要知识点汇总

CSS重要知识点汇总

本文通过对w3school的CSS基础教程，整理出比较常见的却又容易遗忘或者忽略的CSS相关知识点。本文的标题顺序与w3school中的CSS基础教程标题顺序保持一致。适合翻阅和复习。

1. CSS 高级语法

（1）继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {
     font-family: Verdana, sans-serif;
}

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢?
（2）友善地对待Netscape 4 && 继承是一个诅咒吗？
如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则（同时，4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。）：

body {
    font-family: Verdana, sans-serif;
}

td, ul, ol, ul, li, dl, dt, dd {
    font-family: Verdana, sans-serif;
}

p {
    font-family: Times, "Times New Roman", serif;
}

2.CSS 属性选择器

（1）设置表单的样式

input[type="text"] {
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
    font-family: Verdana, Arial;
}

input[type="button"] {
    width:120px;
    margin-left:35px;
    display:block;
    font-family: Verdana, Arial;
}

（2）CSS 选择器参考手册

3.CSS 背景

（1）背景色（background-color）
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

p {
    background-color: gray;
}

（2）背景图像（background-image）
background-image 属性的默认值是 none，表示背景上没有放置任何图像。

body {
    background-image: url(/i/eg_bg_04.gif);
}

（3）背景重复（background-repeat）
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

body { 
      background-image: url(/i/eg_bg_03.gif);
      background-repeat: repeat-y;
  }

（4）背景定位（background-position）
background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

body { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
}

（5）背景关联（background-attachment）
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body {
    background-image:url(/i/eg_bg_02.gif);
    background-repeat:no-repeat;
    background-attachment:fixed
}

4.CSS 文本

（1）缩进文本（text-indent）
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
    text-indent: 5em;
}

（2）水平对齐（text-align）

（3）字间隔（word-spacing ）
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

（4）字母间隔（letter-spacing）
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

（5）字符转换（text-transform）
text-transform 属性处理文本的大小写。这个属性有 4 个值：

• none
• uppercase
• lowercase
• capitalize

---

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
（6）文本装饰（text-decoration ）

• none
• underline
• overline
• line-through
• blink

（7）处理空白符（white-space）
值：

（8）文本方向（direction）

5.CSS 链接

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

6.CSS 表格

（1）折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：

table {
  border-collapse:collapse;
}

table,th, td {
  border: 1px solid black;
}

7.CSS 外边距合并

（1）外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

8.CSS 定位

（1）CSS position 属性
position 属性值的含义：
static：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

9.CSS 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
（1）CSS clear 属性（清除浮动）

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值。允许浮动元素出现在两侧
inherit	规定应该从父元素继承 clear 属性的值