chapter5CSS样式.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页设计与制作,网页的美容师,CSS,样式,学习目标,理解,CSS,技术在网页制作过程中所起的重要作用，掌握,CSS,样式定义的方法。,理解各种,CSS,属性的含义，掌握常用属性的用法。,掌握三种在网页中使用,CSS,样式的方法，并对比各自的优劣。,Part 1 CSS,基础,什么是,CSS,CSS（Cascading Style Sheet，,层叠样式表）是一种,格式化网页的标准方式,，它扩展了,HTML,的功能，使网页设计者能够以更有效的方式设置网页格式。,Part 1 CSS,基础,CSS,样式表是控制文本或文本区外观的一组格式属性，是一系列格式设置规则。,CSS,样式表可以非常灵活地控制网页的外观，从精确的布局定位到特定的字体和样式，样式表包括文档中的所有格式。使用外部样式表还可以一次作用于若干篇文档甚至整个站点,。,Part 1 CSS,基础,CSS,样式表的优点：,1.内容结构和格式控制相分离,2.精确控制网页外观,3.制作体积小，下载页面快,4.快速规格网页样式,5.可兼容不同浏览器,Part 1 CSS,基础,CSS,样式的分类,：,1.,自定义样式：最基本最灵活的样式,2.重定义,HTML,样式：对,HTML,标签的默认格式重新定义,3.,CSS,选择器样式：用得最多是关于链接的定义,Part 1 CSS,基础,关于链接的定义4种状态：,a:link,超级链接文字的一般状态,a:visited,超级链接文字已链接过的状态,a:hover,鼠标光标移到超级链接文字上的状态,a:active,超级链接文字正在链接中的状态,Part 1 CSS,基础,存放样式的位置：,1.在本文档的头部：将定义代码放在网页的,和,之间。,样式表只能用于当前的网页。,2.在外部,CSS,文件中：存放在外部的扩展名为,*.,css,的文件中。,样式表可以被所有网页引用。,Part 1 CSS,基础,样式定义的语法,CSS,定义由3部分构成：选择符（,selector）、,属性（,properties）,和属性值（,value）。,基本格式如下,：选择符属性：值,Selectorproperty1:value1;property2:value2;property3:value3;,Selector,定义样式作用的对象，,property,为,CSS,属性，,value,为属性对应的值。,Part 1 CSS,基础,样式定义的语法,选择器,样式定义,样式属性,属性取值,H1 text-align:center;font-family:,黑体,Part 1 CSS,基础 创建,CSS,样式,创建,CSS,样式，其操作步骤如下,：,单击“,CSS,样式”面板右下角的,（新建,CSS,样式）按钮，打开“新建,CSS,样式”，对话框,Part 1 CSS,基础 创建,CSS,样式,在“选择器类型”选区中选择所要创建样式的类型,。,输入名称、标签或选择器。,“定义在”选区是要求用户在此填写样式表的存储位置。,在打开的“,CSS,样式定义”对话框,中对各个参数进行设置,Part 1 CSS,基础 创建,CSS,样式,设置完成后，单击“确定”按钮，新创建的,CSS,样式就会出现在“,CSS,样式”面板中，如图,样式表设计完成后，还可以重命名样式表、将该样式表应用到选定文字等操作,Part 2,在,网页中使用,CSS,编辑,CSS,样式,内部样式表：将样式定义在,HTML,文档的,head,部分的,style,标签内，仅供该网页使用,外部样式表：存储在.,css,文件中的,CSS,样式，可用于多个页面,导入,CSS,样式表,导出内部样式表,Part 2,在,网页中使用,CSS,CSS,属性设置,类型面板：定义样式的基本类型设置，如文本字体、颜色、大小、风格等。,背景面板：定义样式的背景设置，如对网页元素应用背景属性、设置背景图像等。,Part 2,在,网页中使用,CSS,CSS,属性设置,区块面板：定义整段文本中文字的间距、对齐方式、缩进等。,方框面板：定义特定元素的大小及其周边元素的间距等。,Part 2,在,网页中使用,CSS,CSS,属性设置,边框面板：定义元素周围的边框设置。,列表面板：定义列表样式。,定位面板：定义层在页面中的排版相关属性。,Part 2,在,网页中使用,CSS,CSS,文件中的重定义,HTML,样式,1.定义,样式,2.定义,和,的样式,3.定义,的样式,4.设定段落格式,5.定义表单元素的样式,6.设置页面中的滚动条,Part 2,在,网页中使用,CSS,CSS,文件中的自定义样式,CSS,文件中的,CSS,选择器样式,Part 3,管理,CSS,文件中的样式,样式表的链接和导入,管理外部样式表中的样式,CSS,样式使用原则,尽量存储在外部,CSS,文件中,只有存储在外部的样式才能用在其他的文档上，而只有所有的网页用的都是一个或某几个样式表文件里的样式，才能方便统一整个网站风格。,样式类型尽量使用重定义,HTML,样式,重定义,HTML,样式最大的优势就是不应用就能将效果加在某个标签上，还可以避免管理众多的自定义样式。,CSS,样式使用原则,综合以上两点，在选择样式表使用类型和方法时：,首先考虑,外部重定义,HTML,样式,，,然后是,外部自定义样式,，,接着是本文档内重定义,HTML,样式，,最后是本文档内自定义样式。,上机实训,1.在,DW,中打开站点内任何一个网页文件，然后在其中创建一个样式表文件,main.,css,，,将其保存在站点根目录中。,2.在该文件中创建文档中可能用到的各种样式，包括自定义样式、重定义,HTML,样式以及,CSS,选择器样式。,3.在需要应用该,CSS,文件的网页上附加该样式表文件。,