CSS 概述

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {
    property: value;
	... 
    declaration1; 
    declaration2; 
    ... 
    declarationN
}

选择器的分组

对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

# 对所有的标题元素进行了分组。所有的标题元素都是绿色的
h1,h2,h3,h4,h5,h6 {
  color: green;
}

继承及属性覆盖

根据 CSS，子元素从父元素继承属性。即父元素声明的属性，子元素中可以不声明（默认继承），当子元素重复声明同一属性时，完成对父元素属性覆盖。

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

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

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

# 该样式只会匹配到 li元素内的strong元素
li strong {
    font-style: italic;
    font-weight: normal;
}

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

属性选择器

对带有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

# 为带有 title 属性的所有元素设置样式
[title] {
     color:red;
}

# 为 title="W3School" 的所有元素设置样式
[title=W3School] {
     border:5px solid blue;
}

设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

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

• [attribute] 用于选取带有指定属性的元素。
• [attribute=value] 用于选取带有指定属性和值的元素。
• [attribute~=value] 用于选取属性值中包含指定词汇的元素。

• **[attribute

  =value]** 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

• [attribute^=value] 匹配属性值以指定值开头的每个元素。
• [attribute$=value] 匹配属性值以指定值结尾的每个元素。
• [attribute*=value] 匹配属性值中包含指定值的每个元素。

• 下一篇
  CSS样式