网页设计之CSS样式表和模板课件.ppt

《网页设计之CSS样式表和模板课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章CSS样式表和模板通过本章学习应能够熟练应用CSS和模板来设计网页页面元素的统一格式本章大纲8.1CSS样式8.2模板8.1CSS样式表和模板8.1.1CSS样式的概念8.1.2CSS样式面板8.1.3创建CSS样式8.1.4CSS样式的应用8.1.5CSS样式的编辑8.1.6链接和导入样式表8.1.7导出样式表8.1.8设置CSS的属性8.1.1CSS样式一、CSS样式1.定义2.CSS样式的类型自定义样式HTML标签样式CSS选择器样式（高级样式）CSS定义CSS即(CascadingStyleSheet),层叠样式表或级联样式表，样式就是用来控制一个文

2、档中某一文本区域外观的一组格式属性。层叠样式表则可以用来一次对若干个文档所有的样式进行控制CSS样式使网页中多处对象都采用同样属性，一次设置，多次应用CSS样式表位于文档中head标签之内CSS样式可以对HTML标签的默认格式进行重定义，可以对文本区域进行重定义，对标准文本进行重定义优点：可以同时将一个样式链接到多个文档当CSS样式被修改后，所有应用该样式的对象会被自动更新8.1.2CSS样式面板1.打开CSS样式面板的方法方法1：选择命令“窗口”

3、“CSS样式”方法2：单击面板组中的“CSS样式面板左边的三角形，选择“CSS样式”标签方法3：快捷键shift+F

4、112.CSS样式面板CSS样式面板编辑样式删除CSS规划新建CSS规则附加样式表‘类别’视图‘列表’视图‘设置属性’视图8.1.3创建CSS样式打开“新建Css样式”对话框“文本”菜单下的“CSS样式”中的”新建CSS样式”命令单击CSS样式面板中的新建按钮选择“选择器类型”类:用户自定义样式名称,可以在HTML中被调用标签:重新定义HTML各标签(标记)的默认格式高级:主要用于设置超级链接的特色(颜色)输入或选择样式名称:样式名称.<样式文件名>（选择器类型为“类”时）选择样式名称：当类型为标签、高级时选择选择样式定义的存放位置或作用范围:仅对该文档单击”确定

5、”,打开CSS样式定义对话框对话框的设置:详见设置CSS样式属性仅对当前文档：只在当前文档中使用新建CSS样式表文件：以文件的形式保存，不仅当前文档使用，也可以被其他网页使用个性化超级链接规则的创建1.打开“新建CSS规则”对话框2.选择器类型：高级在列表中选择链接的各状态，确定a:link——未被访问过的链接a:visited——访问过的链接a:hover——鼠标移上时的链接a:active——被点击的链接3.在对话框的“类型”选项中设置各链接的特色4.单击“确定”按钮8.1.4CSS样式的应用1.样式的应用标签和高级类型的样式:自动应用到相应的网页元素上,比如

6、建立了标签的样式后,网页上所有单元格的文字都自动变为新的格式类——自定义样式的应用:选择要应用样式的元素在属性面板的”类”下拉表中选择自定义的类2.已经创建的样式文件中样式的应用见8.1.6链接和导入样式表8.1.5CSS样式编辑编辑选择元素后执行下列操作之一:打开样式定义对话框双击选定的CSS样式名称单击样式面板中的“编辑样式”按钮右击要编辑的CSS样式，在快捷菜单中选择“编辑”命令在对话框中进行设置(同创建)单击“确定”删除:选择CSS样式单击“删除CSS样式”按钮8.1.6链接和导入样式表链接或导入外部样式表文件即是将已创建的外部样式表文件导入到当前

7、文档中,用样式表文件,格式化网页中的指定元素步骤打开”链接外部样式表”对话框:单击“CSS样式面板”右一方的“附加样式表”按钮在“文件/URL”文本框中输入文件的地址和文件名,或单击“浏览”,在磁盘中选择样式表文件在“添加为”处选择“CSS样式表文件”添加到此文档中的方式导入链接确定8.1.7导出样式表导出样式表即从一个网页文档中导出样式创建一个新的CSS样式表文件。步骤：打开“导出样式为CSS文件对话框：执行“文件”

8、“导出”

9、“CSS样式”命令（或“文本”

10、“CSS样式”

11、“导出”命令）在对话框中输入样式文件的名称单击“保存”按钮8.1.8设置CSS的属性1.

12、类型设置对于文字的格式设置：字体、大小、行高、样式和修饰2.背景设置网页背景的各种设置:重复:不重复、重复、横向重复、纵向重复附件：图像能否跟随网页一起滚动3.区块设置4.方框设置5.边框设置6.列表设置7.定位设置8.扩展功能区块、方框等设置1.区块设置：主要对文字的整体效果和段落缩进等进行设置单词、字母间距垂直对齐：对象的对齐方式文本对齐文字缩进：中文首行文字的缩进（字号为9pt，缩进2个字，设置为18pt，12号字，设置为24pt)2.方框设置：主要对图像的大小、水平和垂直方向上的空白，文字环绕等进行设置浮动：环绕效果对象与文边的相对位置清除：对象的边上是否

13、允许出现层