1.层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）

2.CSS语法

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

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

如果值为若干单词，则要给值加引号：

如果要定义不止一个声明，则需要用分号将每个声明分开。

CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

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

继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作

Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略

3.派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

li strong{
color: green;
font-style: italic;
}

<ol>
<li><strong>Coffee</strong></li>
<li>Water</li>
<li>milk</li>
</ol>

4.CSS id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

#red{
color: red;
}

<p id="red">红脸的关公战场杀？</p>

类选择器还是 ID 选择器？

在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。

区别 1：只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表

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

区别 3：ID 能包含更多含义

类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

 

5.CSS类选择器

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

 <h1 class="gray">灰色空间</h1>

.gray{
color: gray;
}

多个类.类名.类名{

}

6.CSS属性选择器

对带有指定属性的 HTML 元素设置样式。

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

7.css创建

 

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

 8.CSS子元素选择器与CSS后代选择器

子元素选择器：

h1>em

后代选择器：

h1 em

二者的区别：

子元素选择器只选择直接子代，而后代选择器任意层都可以

9.CSS相邻兄弟选择器

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符

用一个结合符只能选择两个相邻兄弟中的第二个元素

 

<style type="text/css">
li+li{
font-weight: bolder;
}

</style>