第8讲 CSS样式设置.ppt

《网页设计教程》 网页制作应用教程 2012.10 QQ 讲师：徐儒 上节回顾 插入表格 表格和单元格属性设置 表格高级设置 --合并、拆分、增删、嵌套 创建CSS样式 CSS样式设置 CSS样式管理 应用实例 本节讲堂： CSS样式和设置 1、创建CSS样式 了解的知识点： CSS样式简介 CSS样式的作用 CSS样式的类型 CSS创建方法 应用CSS样式 1.1CSS样式简介 CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。顾名思义，它是一种设计网页样式的工具，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS可以有效地对页面的布局、字体、颜色、背景和其它效果实现精确控制，独立文件的css样式表，其后缀名为.css。 1.2 CSS样式的作用 网页（网站）设计和制作主要设计三个部分的内容：结构,样式和行为，主要由HTML,CSS和JS来实现。因此，CSS主要的作用就是美化网页的一个语言,它的特点： 1.结构与样式分离的方式,便于后期维护与改版； 2.样式定义精确到像素的级别； 3.可以用多套样式,使网页有任意样式切换的效果(如:WWW.YOUKU.COM的开,关灯效果)； 4.代码重用，降低服务器的成本； 5.用于布局网页，使用方便，容易维护。 1.3 CSS样式的类型 （1）内部（嵌入式）CSS样式： 将CSS样式表潜入到网页文档的head区，这样，整个文档中都可以使用这些样式规则。 1.3 CSS样式的类型 （2）外部（链接）CSS样式： 将CSS样式表链接到网页文档中，这样多个文档中都可以使用这些样式规则。 1.3 CSS样式的类型 （3）内联CSS样式： 将CSS样式表插入到使用样式的地方，样式的规则可以应用到内容的单个字符级别。 1.4 CSS创建方法 （1）打开CSS样式面板：选择插入点- 窗口-CSS样式； （2）新建CSS规则： CSS样式面板-新建CSS规则； 1.4 CSS创建方法 （3）CSS样式自定义： 1.4 CSS创建方法 （4）应用样式： 属性-样式（选择） 2、CSS样式设置 了解的知识点： 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置 2.1类型设置 “类型”设置包括字体、字号、颜色、粗体等基本设置。 2.2背景设置 “背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。 2.3区块设置 “区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。 2.4方框设置 “方框”设置可以定义控制元素在页面上的放置方式和属性等。 2.5边框设置 “边框”设置包括定义元素周围边框的样式、宽度及颜色等。 2.6列表设置 “列表”设置主要用于控制列表内各项元素的属性，如项目符号类型、项目符号图像和项目符号位置。 2.7定位设置 “定位”设置主要用于控制网页元素，特别是层的位置。 2.8扩展设置 “扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。 3、CSS样式管理 了解的知识点： 样式的编辑 样式删除 3.1、CSS样式编辑 选中CSS样式文件中的样式-右键-编辑； 3.2、CSS样式删除 选中CSS样式文件中的样式-右键-删除； 其余功能依次类推； 4、CSS样式综合应用 实际案例 4.1、CSS样式设置 在CSS样式中定义两种颜色：红色和绿色； 4.2、表格设置 设置一行5列的表格，并在单元格内输入内容并进行如下格式设置； 4.3、绑定CSS样式代码 设置一行5列的表格，并在单元格内输入内容并进行如下格式设置； td bgcolor=#FFFFFF onmousemove=this.className=hongse onmouseout=this.className=lvsediv align=center菜单栏目1/div/td 4.4、实际运行效果 上机练习 在网页中进行CSS样式设置的练习。在练习过程中，运用课堂讲解的CSS样式设置、CSS属性设置、CSS设置技巧和综合应用等知识，进行综合练习。 《网页设计教程》