8.6.1认识CSS样式表
一、CSS的基本概念
CSS（Cascading Style Sheet），中文译为“层叠样式表”，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
常见CSS代码如下：
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
color: #FF0000;
}
-->
</style>
二、CSS样式的类型
1. 自定义CSS（类样式）
2. 重定义标签的（CSS）
3. CSS选择器样式（高级样式）
三、CSS样式基本语法
CSS的基本语法由三部分构成：选择器（Selector）、属性（Property）和属性值（Value）三个部分。
图8-38 CSS基本语法构成
8.6.2创建CSS样式
一、建立标签样式
（1）在“CSS样式”面板上，单击“新建CSS规则”按钮。
（2）弹出“新建CSS规则”对话框，单击展开“选择器类型”下拉按钮，选择“标签（重新定义HTML元素）”，单击“确定”按钮。
（3）弹出“CSS规则定义”对话框，在“分类”列表中，选择各项进行设置，单击“确定”按钮。
（4）切换至代码视图，可以看到在代码中，添加了相应的代码。
二、建立类样式
（1）在“CSS样式”面板上，单击“新建CSS规则”按钮 。
（2）弹出“新建CSS规则”对话框，单击展开“选择器类型”下拉按钮，选择“类（可应用于任何HTML元素）”，单击“确定”按钮。
（3）弹出“CSS规则定义”对话框，在“分类”列表中，选择各项进行设置，单击“确定”按钮。
（4）切换至代码视图，可以看到在代码中，添加了相应的代码。
三、建立复合内容样式
（1）在“CSS样式”面板上，单击“新建CSS规则”按钮 。
（2）在“新建CSS规则”对话框中，单击展开“选择器类型”下拉按钮，选择“复合内容（基于选择的内容）”选项。
（3）在“选择器名称”下拉选项中，包括了4个选项。选择需要的样式。
四、建立ID样式
（1）在“CSS样式”面板上，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。
（2）单击展开“选择器类型”下拉按钮，选择“类（可应用于任何HTML元素）”，单击“确定”按钮。
（3）弹出“CSS规则定义”对话框，在“分类”列表中，选择“方框”选项，设置参数，单击“确定”按钮。
（4）在“插入”面板中，单击“插入Div标签”按钮。
（5）弹出“插入Div标签”面板，单击展开“插入”下拉选项，选择“在结束标签之前”选项，单击“ID”下拉选项，选择“#top”选项下，单击“确定”按钮。
（6）此时，已经插入ID名称为top的Div，在页面中看到刚刚创建的#top的CSS样式表。
五、链接外部样式表
单击“CSS样式”面板下方的“附加样式表”按钮 ，弹出“链接外部样式表”对话框，单击“文件/URL”后面的“浏览”按钮，插入文件，选中“链接”单选项，单击“确定”按钮，即可完成添加外部链接样式表的操作。
8.6.3 将CSS应用到网页
一、内联样式表
内联式样式表是在现有HTML元素的基础上，写在标签里面的，它只针对自己所在的标签起作用。如：
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
二、内部样式表
内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中，样式表是用<style>标记插入的。如：
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
三、外部样式表
外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
8.6.4 设置CSS样式
图 8-39 CSS规则详细定义窗口
一、“类型”设置
1、font-family :字体。
2、font-size : 字号。
3、font-weight :字体粗细。
4、font-style : normal / italic / oblique 字体风格。
5、font-variant : normal / small-caps 变体。
6、line-height : normal / length 行高。
7、text-transform : none / capitalize / uppercase / lowercase 大小定设定。
8、text-decoration : none / underline / blink / overline / line-through文字修饰。
9、color :字体颜色。
二、“背景”设置
1、background-color : 背景颜色
2、 background-image : 背景图片
3、background-repeat : 背景图平铺属性
4、background-attachment : 背景图是否随网页内容滚动
5、background-position-x : 背景图像横坐标位置。
6、background-position-y : 背景图像纵坐标位置。
三、“区块”设置
2、letter-spacing: normal / length
5、padding 填充。设置样式限定对象的内容与其边线之间的距离。
6、 margin 边界。设置样式限定对象的边界与网页其它对象之间的距离。
1、list-style-type设置或检索对象的列表项所使用的预设标记。
2、list-style-image设置或检索作为对象的列表项标记的图像。
4、overflow 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
1、page-break-before检索或设置对象前出现的页分割符。此属性在打印文档时发生作用。
2、page-break-after检索或设置对象后出现的页分割符。此属性在打印文档时发生作用。
3、cursor 设置或检索在对象上移动的鼠标指针采用的光标形状。
