如何使用样式
| 标签 | 描述 |
|---|---|
<style> |
定义样式定义。 |
<link> |
定义资源引用。 |
<div> |
定义文档中的节或区域（块级）。 |
<span> |
定义文档中的行内的小块或区域。 |
<font> |
规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 |
<basefont> |
定义基准字体。不赞成使用。请使用样式。 |
<center> |
对文本进行水平居中。不赞成使用。请使用样式。 |
| ### 外部样式表 |
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表
.div1{
background: red;
width: 100px;
height: 100px;
color: blue;
}
每行结束都使用分号
样式表的基础语法
h1{color:red;font-size:14px;}
-
h1是选择器 -
color是属性 -
red是值 - 用花括号包围声明
内联方式引用CSS样式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
嵌入方式引用CSS样式
嵌入方式指的是在 HTML 头部中的<style> 标签下书写 CSS 代码。
<head>
<style>
.content {
background: red;
}
</style></head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
链接式引用CSS样式
链接方式指的是使用 HTML 头部的<head> 标签引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css"></head>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
导入方式引用CSS样式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
<style>
@import url(style.css);</style>
比较链接方式和导入方式
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面比较这两种方式，并且说明为什么不推荐使用@import。
-
link属于 HTML，通过<link>标签中的href属性来引入外部文件，而@import属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件； -
@import是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件； - 当 HTML 文件被加载时，
link引用的文件会同时被加载，而@import引用的文件则会等页面全部下载完毕再被加载；
常用的选择器
元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
可以将某个样式从一个元素切换到另一个元素。假设决定将上面的段落文本（而不是h1元素）设置为灰色。只需要把h1选择器改为 p：
html {color:black;}
p {color:gray;}
h2 {color:silver;}
选择器分组
选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：
/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}
group 1
group 2
group 3
* 通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
声明分组
既可以对选择器进行分组，也可以对声明分组。假设希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
但是上面这种做法的效率并不高。尤其是当为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，可以将声明分组在一起：
h1 {font: 28px Verdana; color: white; background: black;}
结合选择器和声明的分组
我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。下面的规则为所有标题指定了一种复杂的样式：
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
上面这条规则将所有标题的样式定义为带有白色背景的灰色文本，其内边距是 10 像素，并带有 1 像素的实心边框，文本字体是 Verdana。
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
修改 HTML 代码
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
在上面的代码中，两个元素的class都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。语法然后使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：
*.important {color:red;}
如果只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important {color:red;}
结合元素选择器
类选择器可以结合元素选择器来使用。
例如，希望只有段落显示为红色文本：
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有p元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。
如果希望为 h1 元素指定不同的样式，可以使用选择器
p.important {color:red;}
h1.important {color:blue;}
多类选择器
在上一节中，我们处理了 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
</p>
这两个词的顺序无关紧要，写成 warning important 也可以。
假设 class 为important的所有元素都是粗体，而class为warning的所有元素为斜体，class 中同时包含important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent {background:silver;}
不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个p元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>
ID选择器
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
首先，ID 选择器前面有一个#号 -也称为棋盘号或井号。请看下面的规则：
*#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子：
群组选择器
要为不同的HTML对象定义相同的样式时，可以采用群组声明。如，希望 h2 元素和段落的文本都为灰色，则可以使用以下声明：
h2, p { color: gray; }
上述规则在选择器中指定了多个对象，对象之间用逗号来分隔。逗号告诉浏览器，规则中包含两个不同的选择器。这样的选择器叫群组选择器。
群组选择器可以减少样式的重复定义。可以把任意数量、任意类型的选择器放在群组中进行声明。如：
p, span, .blue, #blue { color: blue; }
使用逗号对选择器进行分隔，使用页面中所有的p, span, .blue, #blue都具有相同的样式。这样做的好处是，需要使用相同样式的地方只需要书写一次，可以减少代码量，改善CSS代码的结构，提高网页的性能。
.div1,.div2{
width: 400px;
height: 400px;
}
.div1{
background: red;
}
.div2{
background: blue;
}
后代选择器
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
根据上下文选择元素可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果希望只对h1元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
语法解释
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何em元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从ul 元素继承的所有 em 元素，而不论em的嵌套层次多深。
因此，ul em 将会选择以下标记中的所有 em 元素：
