《css样式介绍》

《《css样式介绍》》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、课堂讲解上机实战第9课CSS样式一、CSS样式简介（CascadingStyleSheets）▲CSS样式又叫层叠样式表，是一系列格式设置规则，能控制页面内容的外观。▲页面内容—HTMLCSS规则—外部样式表或HTML的中▲CSS样式作用：·对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制和美化；·减少网页编辑的工作量；·减少网页代码长度，加快网页下载速度；CSS语法规则选择器：标识已设置格式元素的术语声明：定义样式元素。（属性、值）H1{Font-siz

2、e：16pixels；Font-family：helvetica；Font-weight：bold；}优点：容易更新。CSS类型类样式（自定义样式）.self{color:#66ff00}标签样式H1{Font-size：16pixels}高级样式—定义与链接有关的格式CSS添加方式直接在标签内定义添加在HTML的中标签内通过链接外部样式表二、创建、编辑CSS样式表1、创建样式表的方法“文本”—“CSS样式表”—“新建”CSS样式面板2、创建类样式表自定义CSS样式可以对任何文本块或文本区域进

3、行且需要用户手动进行应用。3、创建标签样式表该样式是对现有的HTML标签进行重新定义，当创建或改变该样式时，所有应用了该样式的文本格式都会自动更新。3、创建高级样式表用于制作动态链接样式表，美化页面中文字链接的效果。4、链接和导入样式表链接：选择该单选按钮，只读取外部样式表的信息，不把信息导入网页文档。导入：选择该单选按钮，会将外部CSS样式表信息导入到当前的网页文档。导出样式表编辑样式表三、设置样式文本设置控制网页中文字的字体、字号、颜色等参数。背景设置“背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复

4、及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。区块设置“区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。方框设置“方框”设置可以对网页中的文字和图像进行排版，定义控制元素在页面上的放置方式和属性等。边框设置“边框”设置包括定义元素周围边框的样式、宽度及颜色等。列表设置“列表”设置主要用于控制列表内各项元素的属性，如项目符号类型、项目符号图像和项目符号位置。定位设置“定位”设置主要用于控制网页元素，特别是层的位置。扩展设置“扩展”设置主要用于为打印的页面设置分页和为网页

5、元素设置视觉效果。应用CSS滤镜效果CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效果添加到一个标准的HTML元素上，使应用样式的对象产生模糊、反转、发光等特殊效果。在Dreamweaver8中，可直接在对话框中添加滤镜的参数，而不用编写复杂的代码。实例制作：图片边框效果表格内插入图像给图像建立链接建立方框、边框样式border,并应用于图片建立高级链接样式管理CSS样式修改CSS样式删除CSS样式复制CSS样式重命名层叠样式应用CSS样式表自定义CSS样式的应用链接外部CSS样式修改CSS样式创建层叠样式后，可

6、以修改样式中的某些参数。删除CSS样式在“CSS样式”面板中，选择要删除的样式名称。单击面板底部的“删除”按钮即可将样式删除。复制CSS样式复制一个已经创建完成的CSS样式，再对其参数进行修改，即可创建一个全新的CSS样式，这样可以提高工作效率。重命名层叠样式自定义CSS样式的应用在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的，只有自定义层叠样式需要用户手动操作。扩展的CSS支持在Dreamweaver8中，CSS面板设计成了统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式

7、。上机实战本课上机实战主要练习某公司站点的CSS样式定义。在练习中主要用到CSS样式的创建和添加外部CSS样式的链接等知识点，通过练习读者应充分掌握自定义样式、HTML标签样式等CSS样式的创建。在制作中主要分为创建标签样式、自定义文本样式以及创建超级链接样式这3个部分。