CSS文档阅读笔记1

CSS背景

1.所有背景属性都不能继承，类似background-color，background-image等。

1.background-color

使用

p {background-color: gray;}

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p {background-color: gray; padding: 20px;}

适用范围

可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

2.background-position

背景定位，可以利用 background-position 属性改变图像在背景中的位置。

使用

1.属性值：关键值，长度值（5px，5cm），百分数。
不同类型的值对于背景图像的放置稍有差异。

百分值
1.如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
2background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
2.关键字（top、bottom、left、right 和 center。）
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

3.background-attachment

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响，默认是scroll。在默认的情况下，背景会随文档滚动。

CSS文本

1.text-indent（文本缩进）

作用：把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。

属性值：正负值都可以，可以是百分数。

适用范围

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
使用负值实现“悬挂缩进”
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

继承性：text-indent可以继承。

2.text-align（水平对齐）

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

误区

text-align:center 与 CENTER标签
您可能会认为 text-align:center 与 CENTER 元素的作用一样，但实际上二者大不相同。

CENTER 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

justify：水平对齐（多适用于两端对齐文本）

3.word-spacing（字间隔）

3.letter-spacing（字母间隔）

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

4.text-transform（字符转换）

text-transform 属性处理文本的大小写。这个属性有 4 个值：

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

5.text-decoration（文本装饰）

text-decoration 有 5 个值：

none，underline，overline，line-through，blink。
underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

使用

去掉超链接的下划线

a {text-decoration: none;}

可以在一个规则中结合多种装饰，比如希望所有超链接既有下划线，又有上划线。不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

a:link a:visited {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为text-decoration 值会替换而不是累积起来。

6.font-style（字体风格）

属性值

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

7.font-weight（字体加粗）

使用 bold 关键字可以将文本设置为粗体

8.font-size（文本大小）

CSS链接

设置链接的样式

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

CSS列表

list-style-type（列表类型）

要修改用于列表项的标志类型，比如下方明把无序列表中的列表项标志设置为方块。

ul {list-style-type : square}

list-style-image（列表项图像）

有时，常规的标志是不够的。你可能想对各标志使用一个图像，通过该属性可以做到。

ul li {list-style-image : url(xxx.gif)}

list-style-position （标志出现的位置）

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值

外边距合并

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS选择器

声明分组

注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

如果忽略了第二个分号，用户代理就会把这个样式表解释如下

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

因为 background 对 color 来说不是一个合法值，而且由于只能为 color 指定一个关键字，所以用户代理会完全忽略这个 color 声明（包括 background: black 部分）。这样 h1 标题只会显示为蓝色，而没有红色背景，不过更有可能根本得不到蓝色的 h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色。font: 28px Verdana 声明仍能正常发挥作用，因为它确实正确地以一个分号结尾。

类选择器

示例

.important {color:red;}

<h1 class="important">
This heading is very important.
</h1>

类选择器可以结合元素选择器来使用。

p.important {color:red;}

多类选择器

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

.important.warning {background:silver;}

<p class="important warning">
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

ID选择器

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

后代选择器

后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

子元素选择器

子结合符（">"）两边可以有空白符，这是可选的。（相邻兄弟选择器也允许）

CSS伪元素

用于向某些选择器添加特殊的效果。

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

CSS2 - :first-child 伪类

可以使用 :first-child 伪类来选择元素的第一个子元素。

p:first-child {font-weight: bold;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。
（如 :lang 类为属性值为 no 的 q 元素定义引号的类型）

CSS伪元素

:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。
注:“first-line” 伪元素只能用于块级元素。
下面的属性可应用于 “first-line” 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式.
注：“first-letter” 伪元素只能用于块级元素。
下面的属性可应用于 “first-letter” 伪元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

CSS2 - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

CSS2 - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。