第07章 使用CSS样式控制网页外观_第1页
第07章 使用CSS样式控制网页外观_第2页
第07章 使用CSS样式控制网页外观_第3页
第07章 使用CSS样式控制网页外观_第4页
第07章 使用CSS样式控制网页外观_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章将介绍CSS样式的基本知识以及使用CSS样式控制网页外观的基本方法。第7章使用CSS样式控制网页外观学习目标了解CSS样式的类型。掌握创建CSS样式的方法。掌握应用CSS样式的方法。7.1 认识CSS样式

CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。在使用了CSS样式的网页文档的源代码中，“<style>…</style>”中间存放的是控制文档外观的CSS代码，位于文档的文件头部分，“<body>…</body>”中间是网页文档的内容。7.1 认识CSS样式7.1 认识CSS样式可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格及位置。可以灵活地为网页中的元素设置各种效果的边框。可以方便地为网页中的元素设置不同的背景颜色、背景图片及平铺方式。可以更加精确地控制网页中各元素的位置，使元素在网页中浮动。•可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。可以与脚本语言相结合，使网页中的元素产生各种动态效果。CSS样式可以实现的功能。7.2【CSS样式】面板

在DreamweaverCS3中，【CSS样式】面板是新建、编辑、管理CSS样式的主要工具。在打开文档窗口的情况下，选择【窗口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。7.3CSS样式的类型根据选择器类型的不同，CSS样式通常划分为以下3类。（1）【类（可应用于任何标签）】

利用该类选择器可创建自定义名称的CSS样式，能够应用在网页中的任何标签上。<styletype="text/css"><!--pstyle{font-size:12px;line-height:25px;text-indent:30px;}--></style>在网页文档中可以使用class属性引用“pstyle”类。<pclass="pstyle">…</p>8.3.2CSS样式的类型（2）【标签（重新定义特定标签的外观）】利用该类选择器可对HTML标签进行重新定义、规范或者扩展其属性。<styletype="text/css"><!--h2{ font-family:"黑体"; font-size:24px; color:#FF0000; text-align:center;}--></style>8.3.3CSS样式的类型（3）【高级（ID、伪类选择器等）】利用该类选择器会对标签组合（如“tdh2”表示所有在表格单元中出现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表示所有属性值中有“ID="myStyle"”的标签）应用样式。而“#myStyle1a:visited,#myStyle2a:link,#myStyle3…”表示可以一次性定义相同属性的多个CSS样式。其中，ID属性用于定义一个元素的独特的样式，如以下CSS规则<styletype="text/css"><!--#mytext{font-size:24}--></style>可以通过ID属性应用到HTML中：<PID="mytext">…</P>7.4创建CSS样式在DreamweaverCS3中，创建CSS样式的操作是一个完全可视化的过程。（1）选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，然后打开【新建CSS规则】对话框。（2）在【选择器类型】选项组中选择要创建的CSS样式的类型。（3）在对话框中的【定义在】下拉列表中选择CSS样式的存放位置。（4）打开【CSS规则定义】对话框，进行CSS样式设置。7.5CSS样式的属性类型背景区块方框边框列表定位扩展7.5.1类型类型属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果等。

7.5.2类型背景属性主要用于设置背景颜色或背景图像。7.5.3区块区块属性主要用于控制网页元素的间距、对齐方式等。7.5.4方框

CSS将网页中所有的块元素都看作是包含在一个方框中的，这个方框共分为4个部分。7.5.5边框网页元素边框的效果是在【边框】分类面板中进行设置的。7.5.6列表列表属性用于控制列表内的各项元素

。7.5.7定位定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法。7.5.8扩展

【扩展】分类对话框包含两部分。7.6

CSS样式的应用应用CSS样式附加样式表7.6.1应用CSS样式一、通过【属性】面板首先选中要应用CSS样式的内容，然后在【属性】面板的【样式】下拉列表中选择已经创建好的样式。一般情况下，在【CSS样式】面板中创建的样式都会在【属性】面板的【样式】下拉列表中出现，所以需要应用CSS样式时，在这里直接选择它们即可。7.6.1应用CSS样式二、通过菜单栏中的【文本】/【CSS样式】命令首先选中要应用CSS样式的内容，然后选择【文本】/【CSS样式】命令，从下拉菜单中选择一种设置好的样式，这样就可以将被选择的样式应用到所选的内容上。7.6.1应用CSS样式三、 通过【CSS样式】面板下拉菜单中的【套用】命令首先选中要应用CSS样式的内容，然后在【CSS样式】面板中选中要应用的样式，再在面板的右上角单击控制按钮，或者直接单击鼠标右键，从弹出的下拉菜单中选择【套用】命令即可应用样式。8.6.2附加样式表外部样式表通常是供多个网页使用的，其他网页文档要想使用已创建的外部样式表，必须通过【附加样式表】命令将样式表文件链接或者导入到文档中。附加样式表通常有两种途径：链接和导入。在【CSS样式】面板中单击（附加样式表）按钮，打开【

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论