原创作品，未经许可不得转载
运用我们之前学的知识，将页面中的三个<div>元素都设置为蓝色背景、黄色字体、10px的下外边距：
<body>
<div style="background-color:blue; color:yellow; margin-bottom:10px">
第一个DIV
</div>
<div style="background-color:blue; color:yellow; margin-bottom:10px">
第二个DIV
</div>
<div style="background-color:blue; color:yellow; margin-bottom:10px">
第三个DIV
</div>
</body>
虽然这样写也没什么问题，但是需要为三个<div>都写相同的样式，使得代码非常累赘。这还是只有三个<div>，若是有十个、或者二十个<div>呢？那么写起来就更繁琐了。若将来某一天想将背景色改为黑色呢？就需要修改每一个<div>的样式，这样的代码太不利于维护了。
其实，可以将<div>的样式提取出来，让所有的<div>都使用这个样式。
在网页的<head>元素内，加入一个<style>元素，并将它的type属性设为text/css：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
</style>
</head>
<body>
<div>第一个DIV</div>
<div>第二个DIV</div>
<div>第三个DIV</div>
</body>
</html>
<style>元素是用来包含样式代码的。将type属性设为text/css，用来明确表示它里面包含的是样式代码。在某些浏览器上可以省略type属性，但还是建议你将它写上。
然后，将第一个示例中<div>元素的样式定义到<style>元素内。最终的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
div{
background-color: blue;
color: yellow;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>第一个DIV</div>
<div>第二个DIV</div>
<div>第三个DIV</div>
</body>
</html>
留意<style>元素内样式定义的写法。
最开始的div表示页面内所有的<div>元素都将使用此样式。它其实是一个“选择器”，匹配页面中的所有<div>元素。还有更多的选择器的写法，在后面的章节中将会讲解到。
大括号{}内的就是样式的设置了，它与在元素的style元素内设置样式的语法是一样的。
再来看另一个例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
li{
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</div>
</body>
</html>
上面的示例中，将页面中的所有<li>元素的字体颜色设为了红色。