HTML5 作为下一代网页语言，加入中众多更具语义的标签，例如video、audio、section、article、header 和 nav 等。而 CSS3 作为 CSS 的下一代版本，同样引入了很多很酷的属性，以前我们要结合java web书籍中的一些内容来写这些代码，现在使用 CSS3 就能非常简单的实现。但是这些写CSS内容是，我们一样是要看相关html5书籍，下面接着来了解一下CSS的内容。
5、后代选择器
后代选择器可以选择作为某元素后代的元素。如：
p em { color: red; } 表示作为 p 元素的任何后代的 em 元素
6、子元素选择器
子元素选择器只能选择作为某元素子元素的元素。如：
p > em { color: red; } 表示作为 p 元素的子元素的 em 元素
7、相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如：
h2 + p { color: green; } 表示选择紧接在 h2 元素后出现的段落，h2 和 p 元素拥有共同的父元素。
例：
<html>
<head>
<title>CSS</title>
<style>
body { background-color: #cff; }
h1,h2 { text-align: center; }
p { font-size: 16pt; color: blue; }
p em { color: red; }
h2 + p { color: green; }
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2>HTML5<em>网页设计</em></h2>
<p>这是<em>第一段</em>文字内容</p>
<p>这是第二段文字内容</p>
<p>这是第三段文字内容</p>
</body>
</html>
六、CSS盒子模型
1、基本概念
CSS将网页中的每一个元素都看作是一个长方形的盒子。这个盒子包括外边距、边框、内边距和元素内容4项，盒子模型是一个很重要的模型应用，在html5学习过程中肯定会学到这个内容。
例：
<html>
<head>
<title>CSS</title>
<style>
#foo { width: 400px; border: 1px solid #000; }
#bar {
margin: 40px;
padding: 50px;
border: 20px solid #069;
background-color: #cf9;
}
</style>
</head>
<body>
<div id="foo">
<div id="bar">
HTML5网页设计，第1章 网页设计概述，第2章 HTML语言基础，第3章 CSS样式表基础
</div>
</div>
</body>
</html>
2、外边距属性 Margin
外边距指的是元素边框外的空白区域。
margin 在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
例：margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例：margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子：margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子：margin:10px;
所有 4 个外边距都是 10px
3、内边距属性 padding
内边距指的是元素边框与元素内容之间的空白区域。
padding 在一个声明中设置所有内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
例：padding: 10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例：padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例：padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例：padding:10px;
所有 4 个内边距都是 10px
4、边框 border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
(1)border-color 设置四条边框的颜色。
例子 1：border-color:red green blue pink;
上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色
例子 2：border-color:red green blue;
上边框是红色
右边框和左边框是绿色
下边框是蓝色
例子 3：border-color:dotted red green;
上边框和下边框是红色
右边框和左边框是绿色
例子 4：border-color:red;
所有 4 个边框都是红色
(2)border-width 设置四条边框的宽度。
(3)border-style 设置四条边框的样式。
none 定义无边框。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
(4)border 在一个声明中设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
例：border: 20px solid #066;
(5)轮廓 outline
轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性可设置元素周围的轮廓线。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
outline-color
outline-style
outline-width
例：outline:#f00 solid 10px;
上边介绍的内容很多，今天关于html5开发书籍中关于CSS的内容就先学习到这里，下面要做的工作就是用一些例子去实践今天学习的内容，希望大家也可以多操作，早日学会。
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
