Dreamweaver网页设计与制作教程教学课件 杨继 第8章 样式表.ppt

《Dreamweaver网页设计与制作教程教学课件 杨继 第8章 样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章样式表第8章样式表内容提要CSS的基础知识创建CSS样式定义CSS属性编辑CSS样式样式冲突2第8章样式表8.1CSS简介1、什么是CSSCSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中表现形式存放在另一个文件(.css)中HTML文档的某一部分通常为文件头部分3第8章样式表8.1CSS简介2、CSS的特点CSS将页面的内容与表现形式分离，解决了网页制作当中普遍存在的这个问题。样式通

2、常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表可以同时改变站点中所有页面的布局和外观，从而层叠样式表极大地提高了工作效率。4第8章样式表8.1CSS简介采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：1．表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。2．提高页面浏览速度对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。3．易于维护和改版只要简单

3、的修改几个CSS文件就可以重新设计整个网站的页面。4．使用CSS布局更符合现在的W3C标准5第8章样式表8.1CSS简介3、css的写法语法格式为：selector{property:value}其中selector（选择符）是可以是多种形式，通常是将要定义样式的HTML标记，例如BODY、P、TABLE……，可以通过此方法定义其property（属性）和value（值），属性和值要用冒号隔开。例如：body{color:black}，此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称通常是几个单词的组合。例如：p{f

4、ont-family:“TimesNewRoman”}(定义段落字体为TimesNewRoman)。如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。例如：p{text-align:left;color:green}(段落左对齐;并且段落中的文字为绿色)。此外，CSS中还可以进行选择符组、类选择符、ID选择符、包含选择符和包含选择符等具体的设置。6第8章样式表8.1CSS简介可以在CSS中插入注释来说明代码的含义，注释有利于以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*"开头，以"*/"结尾，如下:/*定义

5、段落样式表*/p{text-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial/*字体为arial*/}7第8章样式表8.1CSS简介4、初识css面板8第8章样式表8.1CSS简介1）．显示类别视图设置方式及其功能：单击“CSS样式面板”左下角显示类别视图按钮将CSS样式面板切换为类别视图状态，如右图所示。在此种视图下，将CSS属性划分为9个类别，分别是“字体”、“背景”、“区块”、“边框”、“方框”、“列表”、“定位”、“扩展”和“表、内容、引用”。可以通过单击加号展开属性列表，通过点击

6、减号折叠属性列表。9第8章样式表8.1CSS简介2）.显示列表视图按钮设置方式及其功能：单击“CSS样式面板”左下角显示列表视图按钮将CSS样式面板切换为列表视图状态，如图所示。将已定义样式显示在视图的前面，方便使用。在该状态下，将全部的样式按字母顺序进行列表，这样可以根据字母排列顺序进行编辑和查找。10第8章样式表8.1CSS简介3）.只显示设置属性按钮设置方式及其功能：单击“CSS样式面板”左下角只显示设置属性按钮将CSS样式面板切换为只显示设置属性状态，如图8.4所示。在该状态下，将全部已经设置的属性按字母顺序进行排列显示。通过单击面板下方的“添加属性”链

7、接来添加新的属性。11第8章样式表8.2创建CSS样式利用dreamweaver中“CSS样式面板”中创建样式规则按钮来创建一个新的样式。具体操作步骤如下：第一步：将光标定位在文档中，然后在“CSS样式面板”中，单击面板右下角“新建CSS规则”按钮或者利用“文本”菜单中“CSS样式”中的新建“CSS规则”命令，打开“新建CSS规则”对话框，如图所示。12第8章样式表8.2创建CSS样式第二步：在“新建CSS规则”对话框中，选择所要创建的选择器类型。第三步：在名称框中输入相应的名称、选择已有的标签或是某种链接状态或ID。第四步：选择新建CSS规则要定义的位置。第五

8、步：单击“确定”按钮，出