《网页设计》――使用CSS样式表修饰页面

江西师范大学网页设计课程组网页设计江西师范大学网页设计课程组5.1CSS概述5.2CSS的类型5.3创建样式5.4样式的其他操作5.5常用的CSS设置5.6实践技能训练-----利用CSS修饰页面第5章使用CSS样式表修饰页面江西师范大学网页设计课程组经常上网的人都会有这样的经验，将浏览器的显示字体变大或变小，网页中的文字也会随着发生变化。虽然有时会给浏览者带来帮助，但是也会对网页的布局产生影响，网页的版面会变得参差不齐。但是如果使用CSS，网页中的文本始终不随之发生变化，总是保持原有的外观，现代网页制作离不开CSS技术，采用CSS技术，可以有效地对页面布局、字体、背景和其他效果实现更加精确的控制。用CSS不仅可以制作令浏览着赏心悦目的网页，还能给网页添加许多特效。创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握CSS属性设置非常重要。第5章使用CSS样式表修饰页面江西师范大学网页设计课程组CSS（CascadingStyleSheets层叠样式表）是一种制作网页的新技术，已经成为网页设计必不可少的工具之一。目前，InternetExplorer4.0、NetscapeNavigator4.0或更高版本的浏览器都能正确的显示带有CSS样式的网页，使用CSS样式不仅可以轻松地网页中的对象产生动态效果，同时还简化了HTML中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性。CSS样式甚至超越了Web页面本身的显示功能，将样式扩展到多媒体上，可显示出令人难以抗拒的强大魅力。简言之，应用CSS样式就可以使网页锦上添花。CSS样式的主要功能如下:可以更加灵活地控制网页中文字的字体、大小、颜色等属性。可以精确地控制网页中各个元素的位置。简化代码，提高下载速度。可以和脚本语言相结合，从而使网页中的元素实现动态效果。代码兼容性更好。5.1CSS概述江西师范大学网页设计课程组5.2.1标签样式在前面第1章中介绍的HTML语言属于标签语言，很多标签都是成对出现的。对于HTML标签的样式定义，被称为标签样式。而有些HTML标签，如br标签，不是成对出现的，就不能设定样式。例如，链接符号a引号的样式即是标签样式。如下：a{color:#000099;font-size:9pt;text-decoration:none}标签a的样式包括颜色（color）、字号：（font-size）、文字的修饰（text-decoration），网页之中所有的链接文字（因为链接文字两端都会有ERROR[Basicsyntaxerror]in:aERROR[Basicsyntaxerror]in:ERROR[Basicsyntaxerror]in:/ERROR[Basicsyntaxerror]in:a标签）都会应用标签样式中定义的外观。链接文子取消下划线就是通过定义a标签实现的，代码为text-decoration:none。标签样式的缺点是不具有选择性，如果定义了某个HTML标签，网页上该标签之内的对象都会应用。5.2CSS的类型江西师范大学网页设计课程组5.2.2CSS选择器CSS选择器是一种特殊类型的样式，在Dreamweaver中提供的有4种，分别为：a:link、a:active、a:visited、a:hoverDreamweaver中的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选择器定义的外观。5.2CSS的类型江西师范大学网页设计课程组5.2.3自定义样式标签样式和CSS选择器的缺点是不够灵活啊，网页中的HTML标签内的对象，只要定义了标签样式，外观都会发生变化。自定义样式比标签样式和CSS选择器更加灵活，在网页之中，可以选择应用自定义样式的范围。自定义的样式首先要命名。命名的方式很特别，以一个英文的句号开始，然后是英文的名字，这里不能使用中文名。例如：.bg{background-imag:url(../images/bg.gif);}其中background-imag:url(../images/bg.gif)设定的是背景图像的路径。设定了自定义样式之后，另一个问题是在网页中选择应用范围。方法是在应用自定义样式的HTML标签中添加class=，引号之内为使用自定义样式的名字。例如：ERROR[Basicsyntaxerror]in：bodyleftmargin=ERROR[Basicsyntaxerror]in:0topmargin=0class=0class=0说明网页的主体应用了设定背景图像的自定义样式。5.2CSS的类型江西师范大学网页设计课程组无论是哪一种类型的样式，创建基本上要经过以下的步骤:1.定义样式类型包括在网页内部创建样式文件和建立的单独的样式文件；定义样式的类型；命名或者选择标签。2.设定样式的外观主要指对样式外观的设定，包括文字、段落、背景、边框、列表等内容。3.应用样式对于标签样式和CSS选择器，样式是自动应用于网页的，但对于自定义的样式，则需要特别设定应用的范围。5.3创建样式江西师范大学网页设计课程组5.3.1创建标签样式假设现在要去除网页上所有链接的下划线，就需要定义a标签的样式，按照上面提到的三个步骤，创建方法如下。1、准备工作2、定义样式类型3、设定样式外观4、应用样式5、编辑5.3创建样式江西师范大学网页设计课程组5.3.2创建CSS选择器1.准备工作2.定义样式类型3.设定样式外观4.应用样式5.3创建样式江西师范大学网页设计课程组5.3.3创建自定义样式1.准备工作2.定义样式的类型3.设定样式外观4.应用样式5.3创建样式江西师范大学网页设计课程组单击CSS样式面板右上方的扩展按钮，其下拉菜单如图8-8所示。CSS的相关操作主要都是通过这个菜单上的项目来实现的。在面板上有分隔线，第一条分隔线上面是对单个样式的操作项目，第一条分隔线下面是对网页中所有样式的控制。5.4样式的其他操作江西师范大学网页设计课程组5.4.1编辑单个样式在样式面板中选中要进行操作的样式，这时编辑、复制、套用变为可选。选择“编辑”，打开样式定义对话框，可以重新定义样式。选择“复制”，打开复制样式对话框，可以重新定义复制后样式的存放位置、类型、名称。但样式外观的设置将被保留，这很适合对样式做小的改动或者转移样式的存放位置。选择“套用”，将样式应用于选中网页中的对象。5.4样式的其他操作江西师范大学网页设计课程组5.4.2编辑样式表在下拉菜单中选择“附加样式表”，会打开“链接外部样式”对话框，单击“浏览”按钮，选择外部的样式文件，此类文件的文件名以CSS结尾，可以反复被不同的网页使用。5.4样式的其他操作江西师范大学网页设计课程组5.4.3外部样式将站点中应用的样式统一制定成单独的样式表文件，每次创建网页的样式只需要导入该文件，根据需要从中选择应用的样式即可。这样操作既可以保持网页外观的一致性，又可以极大地简化设置过程（实际只需要设置一次，以后无需设置）。因而称为专业网站设计普遍使用的方法。5.4样式的其他操作江西师范大学网页设计课程组1.创建外部样式2.导出外部样式5.4样式的其他操作江西师范大学网页设计课程组5.5.1类型设定文字属性面板的设定方法如下。1.字体2.大小3.样式4.行高5.修饰6.粗细7.变体8.大小写9.颜色5.5常用的CSS设置江西师范大学网页设计课程组5.5.2背景颜色在HTML语言中，背景只能使用单一的色彩或利用图像水平和垂直方向平铺。使用CSS之后，有了更加灵活的设置。1.背景颜色2.背景图像3.重复4.附件5.水平位置6.垂直位置5.5常用的CSS设置江西师范大学网页设计课程组5.5.3文字整体设定1.单词间距2.字母间距3.垂直对齐4.文本对齐5.文字缩进6.空格5.5常用的CSS设置江西师范大学网页设计课程组5.5.4边框的设定边框面板的设定如下。1.样式设定边框的样式，包括无、虚线、点划线、双线、槽状、凹陷和凸出。如果选中“全部相同”则只需要设置“上”的样式，其他方向样式与“上”相同。2.宽度设置4个方向边框的宽度。如果选中“全部相同”则只需要设置“上”的样式，其他方向样式与“上”相同。可以选择相对值：粗、中、细，也可以设置边框的宽度值和单位。3.颜色设置对应边框的颜色。如果选中“全部相同”则只需要设置“上”的样式，其他方向样式与“上”相同。5.5常用的CSS设置江西师范大学网页设计课程组5.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.滤镜5.5常用的CSS设置江西师范大学网页设计课程组5.6.1利用CSS固定字体大小5.6.2利用CSS创建精美网页导航5.6实践技能训练-----利用CSS修饰页面