1. 标签 <style>
如果 HTML 元素有太多样式，可以把它们放到一个专门的 元素中 —— 标签 style。 一般来说它会放在 <head> 标签里，看起来像这样：
CSS+HTML+JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 示例</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个在 <style> 标签中使用样式的例子。</p>
</body>
</html>
现在可以不用在 <body> 的 style 属性中写一长串样式，而是 把它们搬到 style 标签中。超级方便。
对于 <p>（段落）标签，也是一样的。 而且，在 <head> 中 <style> 标签里指定的样式会 应用于文档的所有段落，即便是几千个都会生效。 这是因为样式在 <style> 标签的 选择器 中定义了。
5.2 选择器
选择器是用来选择 HTML 元素的方式，以便为它们应用 CSS 属性。选择器有很多种类型：
标签选择器
应用样式 到所有 某一类型的元素。 你只需要写标签名字，加上花括号就行。
tagname {
// 样式
}
tagname 可以是任意标签：body, image, a, p, … 任何标签
类选择器
还可以不用绑定到某个标签，而是给一组 CSS 属性指定一个名字。这样的一组在 CSS 中叫 类。 这种样式会应用到所有带有指定类的元素。 类通过 HTML 的 class 属性来定义。
CSS+HTML+JavaScript
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">这是重要的文本。</p>
<p>这是一般的文本。</p>
</body>
</html>
在上面的示例中，只有第一个段落的文本会加粗， 因为它用了 “important” 样式/类。 第二个段落没有这个样式。
在 <style> 标签中定义样式时，可以有 3 种方式：
- tagname { …}
- tagname.classname { …}
- .classname { …}
选择器的主题我们以后深入学习 CSS 的时候会更详细地讲解。 现在我只是提前给大家介绍一下，因为在 HTML 示例中 会碰到 CSS，我也经常会把它放到 style 标签里， 并用选择器为特定的 HTML 元素设置样式。
GO TO FULL VERSION