《网页设计与制作（第二版）》12 CSS 样式

网页设计与制作（第二版）目录DIRECTORY01DreamweaverCS5入门05插入图像02创建站点06插入多媒体03设置首页07建立网页链接04DreamweaverCS5编辑文本08表格目录DIRECTORY09使用Div标签和APDiv10框架11表单12CSS样式13行为14资源15模板和库16站点上传和维护12CSS样式1.会CSS编码规范。2.能使用CSS选择器。3.能在网页中应用样式表。4.引导学生要学会在日常生活中注重细节的意识。任务目标1任务实施（1）打开文档，将光标移动到要插入CSS规则的位置上，然后选择下面的任意一种方法打开“新建CSS规则”对话框。●点击“格式”菜单，选择“CSS样式”命令，在弹出的菜单中选择“新建”项，可以打开“新建CSS规则”对话框。如图12-1所示。●打开“CSS样式”面板，单击面板右下角的“新建CSS规则”按钮。也可以打开“新建CSS规则”对话框。如图12-2所示。●在“文档”窗口中选择文本，点击“窗口”菜单，选择“属性”项，在“属性”面板中点击左边的“CSS”按钮，打开“CSS属性”检查器，在“目标规则”下拉框中选择“<新CSS规则>”项，点击“编辑规则”按钮，也可以打开“新建CSS规则”对话框。（2）在“新建CSS规则”对话框中，设置要创建的CSS规则的选择器类型。在“选择器类型”中选择“类（可应用于任何HTML元素）”项，可以创建一个用class属性声明的应用于任何HTML元素的类选择器。然后在“选择器名称”文本框中输入类名称。类名称必须以句点（.）开头，能够包含任何字母和数字（如：.blue）。一、新建CSS规则二、设置CSS属性使用DreamweaverCS5可以定义CSS规则的属性，如设置字体、文本、背景、列表、间距以及布局属性等。首先使用DreamweaverCS5创建新的CSS规则，然后可以设置下面的任意属性。（1）打开“CSS样式”面板。（2）在“所选内容的摘要”窗格中双击某一个属性，打开“CSS规则定义”对话框。如图12-5所示。二、设置CSS属性（一）定义CSS的类型属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“类型”，然后可以在右边“类型”部分设置属性。Font-family设置字体系列。在下拉菜单中选择字体。对应了CSS2.0font_x0002_family属性。Font-weight对字体应用特定或相对的粗体量。对应了CSS2.0font-weight属性。Font-style指定“正常”“斜体”或“偏斜体”作为字体样式。对应了CSS2.0font-style属性。Font-size定义文字的字体大小。对应了CSS2.0font-size属性和CSS2.0长度单位。二、设置CSS属性（一）定义CSS的类型属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“类型”，然后可以在右边“类型”部分设置属性。Font-variant设置文本的小型大写字母变体。对应了CSS2.0font-variant属性。Text-transform将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。对应了CSS2.0text-transform属性。Color设置文本的颜色。对应了CSS2.0color属性。Line-height设置文本所在行的高度。对应了CSS2.0line-height属性。Text-decoration向文本中添加下划线、上划线或删除线，或使文本闪烁。对应了CSS2.0text-decoration属性。二、设置CSS属性（二）定义CSS的背景属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“背景”，然后可以在右边“背景”部分设置属性。●Background-color：设置元素的背景颜色。可以参考CSS2.0background-color属性。●Background-image：设置元素的背景图像。可以参考CSS2.0background-image属性。●Background-repeat：设置是否以及如何重复背景图像。可以参考CSS2.0background-repeat属性。●Background-attachment：设置背景图像是固定在其原始位置还是随内容一起滚动。可以参考CSS2.0background-attachment属性。●Background-position（X）和Background-position（Y）：设置背景图片相对于元素的初始位置。可以参考CSS2.0background-position属性。提示：如果某一个属性不需要设置，可以将其保留为空。二、设置CSS属性（三）定义CSS的区块属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“区块”，然后可以在右边“区块”部分设置属性。●Word-spacing：设置字词的间距。可以参考CSS2.0word-spacing属性。●Letter-spacing：增加或减小字母或字符的间距。可以参考CSS2.0letter-spacing属性。●Vertical-align：指定应用此属性的元素的垂直对齐方式。可以参考CSS2.0vertical-align属性。●Text-align：设置文本在元素内的对齐方式。可以参考CSS2.0text-align属性。●Text-indent：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示方式取决于浏览器。可以参考CSS2.0text-indent属性。●White-space：设置如何处理元素中的空格。可以参考CSS2.0white-space属性。●Display：设置是否以及如何显示元素。可以参考CSS2.0display属性。提示：如果某一个属性不需要设置，可以将其保留为空。二、设置CSS属性（四）定义CSS的方框属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“方框”，然后可以在右边“方框”部分设置属性。●Width：设置元素的宽度。可以参考CSS2.0width属性。●Height：设置元素的高度。可以参考CSS2.0height属性。●Float：设置其它元素（如文本、APDiv、表格等）在围绕元素的哪个边浮动。其它元素按通常的方式环绕在浮动元素的周围。可以参考CSS2.0float属性。●Clear：定义不允许AP元素的边。如果清除边上出现AP元素，则带清除设置的元素将移到该元素的下方。可以参考CSS2.0clear属性。●Padding：指定元素内容与元素边框之间的间距（如果没有边框，则为边距）。可以参考CSS2.0padding属性。●全部相同：取消此项，可以分别设置元素各个边的填充。如果选择此项，可以为元素的“上”“右”“下”和“左”设置相同的填充属性。●Margin：设置一个元素的边框与另一个元素之间的间距（如果没有边框，则为填充）。可以参考CSS2.0margin属性。●全部相同：取消此项，可以分别设置元素各个边的边距。如果选择此项，可以为元素的“上”“右”“下”和“左”设置相同的边距属性。二、设置CSS属性（五）定义CSS的边框属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“边框”，然后可以在右边“边框”部分设置属性。●Style：设置边框的样式外观。可以参考CSS2.0border-style属性。●全部相同：取消此项，可以分别设置元素各个边的边框样式属性。选择此项，可以为元素的“上”“右”“下”和“左”设置相同的边框样式属性。●Width：设置元素边框的粗细。可以参考CSS2.0border-width属性。●全部相同：取消此项，可以分别设置元素各个边的边框宽度。选择此项，可以为元素的“上”“右”“下”和“左”设置相同的边框宽度。●Color：设置边框的颜色。可以参考CSS2.0border-color属性。●全部相同：取消此项，可以分别设置元素各个边的边框颜色。选择此项，可以为元素的“上”“右”“下”和“左”设置相同的边框颜色。二、设置CSS属性（六）定义CSS的扩展属性在“CSS规则定义”对话框中，在“分类”下拉框中选择“扩展”，然后可以在右边“扩展”部分设置属性。●break-before：打印时在样式所控制的对象之前强行分页。可以参考CSS2.0break-before属性。●break-after：打印时在样式所控制的对象之后强行分页。可以参考CSS2.0break-after属性。●Cursor：当指针位于样式所控制的对象上时改变指针图像。可以参考CSS2.0cursor属性。●Filter：对样式所控制的对象应用特殊效果（包括模糊和反转）。可以参考CSS2.0滤镜。提示：如果某一个属性不需要设置，可以将其保留为空。设置好“CSS规则定义”对话框中的属性以后，单击“确定”按钮即可设置CSS属性。三、向CSS规则添加属性在DreamweaverCS5中，可以使用“CSS样式”面板向CSS规则添加属性。（1）打开“CSS样式”面板。（2）选择一条规则：●在“正在”模式下的“CSS样式”面板的“规格”窗格中选择一条规则。如图12-6所示。●在“全部”模式下的“CSS样式”面板的“所有规则”窗格中选择一条规则。如图12-7所示。（3）请选择下面的操作方法：●如果在“属性”窗格中选择了“只显示设置属性”视图，请单击“添加属性”链接添加属性名称，然后再添加属性值。●如果在“属性”窗格中选择了“显示类别视图”或“显示列表视图”，则只需要为添加的CSS属性填入一个值即可。2项目实训项目要求：为一个网页中所有文字设置一个文本样式，样式中字体的大小为12像素，颜色为深灰色。步骤1：打开网页。步骤2：添加新样式，设置选择器类型为“标签”。步骤3：“标签”为“body”。步骤4：在样式“类型”中设置字体的大小为12像素，颜色为深灰色。3项目