html中css修饰

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2011-3-30,#,单击此处编辑母版标题样式,第,6CSS,样式表修饰页面,6.1 CSS,概述,6.2 CSS,的类型,6.3,创建样式,6.4,样式的其他操作,6.5 CSS,设置,6.6 CSS,修饰页面实例,1,第,6,章 使用,CSS,样式表修饰页面,经常上网的人都会有这样的经验，将浏览器的显示字体变大或变小，网页中的文字也会随着发生变化。虽然有时会给浏览者带来帮助，但是也会对网页的布局产生影响，网页的版面会变得参差不齐。但是如果使用,CSS,，网页中的文本始终不随之发生变化，总是保持原有的外观，现代网页制作离不开,CSS,技术，采用,CSS,技术，可以有效地对页面布局、字体、背景和其他效果实现更加精确的控制。用,CSS,不仅可以制作令浏览着赏心悦目的网页，还能给网页添加许多特效。创建,CSS,样式表的过程，就是对各种,CSS,属性的设置过程，所以了解和掌握,CSS,属性设置非常重要。,2,第,6,章 使用,CSS,样式表修饰页面,6.1 CSS,概述,CSS,（,Cascading Style Sheets,层叠样式表 ）是一种制作网页的新技术，已经成为网页设计必不可少的工具之一。目前，,Internet Explorer 4.0,、,Netscape Navigator 4.0,或更高版本的浏览器都能正确的显示带有,CSS,样式的网页，使用,CSS,样式不仅可以轻松地网页中的对象产生动态效果，同时还简化了,HTML,中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性。,CSS,样式甚至超越了,Web,页面本身的显示功能，将样式扩展到多媒体上，可显示出令人难以抗拒的强大魅力。简言之，应用,CSS,样式就可以使网页锦上添花。,3,第,6,章 使用,CSS,样式表修饰页面,CSS,样式的主要功能如下：,可以更加灵活地控制网页中文字的字体、大小、颜色等属性。,可以精确地控制网页中各个元素的位置。,简化代码，提高下载速度。,可以和脚本语言相结合，从而使网页中的元素实现动态效果。,代码兼容性更好。,4,第,6,章 使用,CSS,样式表修饰页面,6.2 CSS,的类型,6.2.1,标签样式,在以前的课程中介绍的,HTML,语言属于标签语言，很多标签都是成对出现的。对于,HTML,标签的样式定义，被称为标签样式。 而有些,HTML,标签，如,标签，不是成对出现的，就不能设定样式。,例如，链接符号,a,引号的样式即是标签样式。如下：,a color :#000099 ;font-size:9pt;text-decoration:none ,标签,a,的样式包括颜色（,color,）、字号：（,font-size,）、文字的修饰（,text-decoration,），网页之中所有的链接文字（因为链接文字两端都会有,ERRORBasic syntax errorin:ERRORBasic syntax errorin: ,标签）都会应用标签样式中定义的外观。,链接文字取消下划线就是通过定义,标签实现的，代码为,text-decoration:none,。,标签样式的缺点是不具有选择性，如果定义了某个,HTML,标签，网页上该标签之内的对象都会应用。,5,第,6,章 使用,CSS,样式表修饰页面,6.2.2 CSS,选择器,CSS,选择器是一种特殊类型的样式，在,Dreamweaver,中提供的有,4,种，分别为：,a:link,、,a:active,、,a:visited,、,a:hover,Dreamweaver,中的,CSS,选择器都是针对链接文字设定属性。,a:link,设定正常状态下链接文字的样式。,a:active,设定鼠标单击时链接的外观。,a:visited,设定访问过的链接外观。,a:hover,设定鼠标放置在链接文字之上时文字的外观，,其中最后一种,a:hover,最为常用。例如：,a:hover color :# ff6600 ;font-family:,宋体,;,text-decoration:underline; ,a:visited font-family:,宋体,; color :# 339900 ;,text-decoration:none; ,CSS,选择器和对特定标签中的文字在特定情况下的外观作出了设定，和标签样式一样，网页中所有的链接文字在特定情况下都会显示出,CSS,选择器定义的外观。,6,第,6,章 使用,CSS,样式表修饰页面,6.2.3,自定义样式,标签样式和,CSS,选择器的缺点是不够灵活啊，网页中的,HTML,标签内的对象，只要定义了标签样式，外观都会发生变化。,自定义样式比标签样式和,CSS,选择器更加灵活，在网页之中，可以选择应用自定义样式的范围。,自定义的样式首先要命名。命名的方式很特别，以一个英文的句号开始，然后是英文的名字，这里不能使用中文名。例如：,.bgbackground-imag:url(./images/bg.gif);,其中,background-imag:url(./images/bg.gif),设定的是背景图像的路径。,设定了自定义样式之后，另一个问题是在网页中选择应用范围。方法是在应用自定义样式的,HTML,标签中添加,class= ,，引号之内为使用自定义样式的名字。例如：,ERRORBasic syntax error in,：,class=0,说明网页的主体应用了设定背景图像的自定义样式。,7,第,6,章 使用,CSS,样式表修饰页面,无论是哪一种类型的样式，创建基本上要经过以下的步骤,:,1.,定义样式类型,包括在网页内部创建样式文件和建立的单独的样式文件；定义样式的类型；命名或者选择标签。,2.,设定样式的外观,主要指对样式外观的设定，包括文字、段落、背景、边框、列表等内容。,3.,应用样式,对于标签样式和,CSS,选择器，样式是自动应用于网页的，但对于自定义的样式，则需要特别设定应用的范围。,8,第,6,章 使用,CSS,样式表修饰页面,6.3,创建样式,6.3.1,创建标签样式,假设现在要去除网页上所有链接的下划线，就需要定义,标签的样式，按照上面提到的三个步骤，创建方法如下。,1,、准备工作,2,、定义样式类型,3,、设定样式外观,4,、应用样式,5,、编辑,9,第,6,章 使用,CSS,样式表修饰页面,6.3.2,创建,CSS,选择器,1.,准备工作,2.,定义样式类型,3.,设定样式外观,4.,应用样式,10,第,6,章 使用,CSS,样式表修饰页面,6.3.3,创建自定义样式,1.,准备工作,2.,定义样式的类型,3.,设定样式外观,4.,应用样式,11,第,6,章 使用,CSS,样式表修饰页面,6.4,样式的其他操作,单击,CSS,样式面板右上方的扩展按钮，其下拉菜单如图所示。,CSS,的相关操作主要都是通过这个菜单上的项目来实现的。在面板上有分隔线，第一条分隔线上面是对单个样式的操作项目，第一条分隔线下面是对网页中所有样式的控制。,12,第,6,章 使用,CSS,样式表修饰页面,6.4.1,编辑单个样式,在样式面板中选中要进行操作的样式，这时编辑、复制、套用变为可选。,选择“编辑”，打开样式定义对话框，可以重新定义样式。,选择“复制”，打开复制样式对话框，可以重新定义复制后样式的存放位置、类型、名称。但样式外观的设置将被保留，这很适合对样式做小的改动或者转移样式的存放位置。,选择“套用”，将样式应用于选中网页中的对象。,13,第,6,章 使用,CSS,样式表修饰页面,6.4.2,编辑样式表,在下拉菜单中选择“附加样式表”，会打开“链接外部样式”对话框，单击“浏览”按钮，选择外部的样式文件，此类文件的文件名以,CSS,结尾，可以反复被不同的网页使用。,14,第,6,章 使用,CSS,样式表修饰页面,6.4.3,外部样式,将站点中应用的样式统一制定成单独的样式表文件，每次创建网页的样式只需要导入该文件，根据需要从中选择应用的样式即可。这样操作既可以保持网页外观的一致性，又可以极大地简化设置过程（实际只需要设置一次，以后无需设置）。因而称为专业网站设计普遍使用的方法。,1.,创建外部样式,2.,导出外部样式,15,第,6,章 使用,CSS,样式表修饰页面,6.5,常用的,CSS,设置,6.5.1,类型设定,文字属性面板的设定方法如下。,1.,字体,2.,大小,3.,样式,4.,行高,5.,修饰,6.,粗细,7.,变体,8.,大小写,9.,颜色,16,第,6,章 使用,CSS,样式表修饰页面,6.5.2,背景颜色,在,HTML,语言中，背景只能使用单一的色彩或利用图像水平和垂直方向平铺。使用,CSS,之后，有了更加灵活的设置。,1.,背景颜色,2.,背景图像,3.,重复,4.,附件,5.,水平位置,6.,垂直位置,17,第,6,章 使用,CSS,样式表修饰页面,6.5.3,文字整体设定,1.,单词间距,2.,字母间距,3.,垂直对齐,4.,文本对齐,5.,文字缩进,6.,空格,18,第,6,章 使用,CSS,样式表修饰页面,6.5.4,边框的设定,边框面板的设定如下。,1.,样式,设定边框的样式，包括无、虚线、点划线、双线、槽状、凹陷和凸出。如果选中“全部相同”则只需要设置“上”的样式，其他方向样式与“上”相同。,2.,宽度,设置,4,个方向边框的宽度。如果选中“全部相同”则只需要设置“上”的样式，其他方向样式与“上”相同。可以选择相对值：粗、中、细，也可以设置边框的宽度值和单位。,3.,颜色,设置对应边框的颜色。如果选中“全部相同”则只需要设置“上”的样式，其他方向样式与“上”相同。,19,第,6,章 使用,CSS,样式表修饰页面,6.5.5,扩展设定,CSS,样式还可以实现一些扩展功能，这些功能集中在“扩展”子面板上。这个面板主要包括,3,种效果,:,分页、光标和滤镜。,1.,分页,2.,光标,通过样式改变鼠标的形状，鼠标放在被此项设置修饰的区域上时，形状会发生改变。具体的形状包括：,Hand,（手）、,crosshair,（交叉十字）、,text,（文本选择符号）、,wait(windows,的沙漏形状,),、,Default,（默认的鼠标形状）、,help(,带问号的鼠标,),、,e-resize,（向东的箭头）、,ne-resize,（指向东北方的箭头）、,n-resize,（向北的箭头）、,nw-resize,（指向西北的箭头）、,w-resize(,向西的箭头,),、,sw-resize,（向西南的箭头）、,s-resize,（向南的箭头）、,se-resize,（向东南的箭头）和,auto,（正常鼠标）。,3.,滤镜,20,第,6,章 使用,CSS,样式表修饰页面,6.6,利用,CSS,修饰页面实例,6.6.1,利用,CSS,固定字体大小,实例,1,6.6.2,利用,CSS,创建精美网页导航,21,