(8.5)--8.5学习CSS美化网页.pdf

《(8.5)--8.5学习CSS美化网页.pdf》由会员分享，可在线阅读，更多相关《(8.5)--8.5学习CSS美化网页.pdf（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、任务五：学习CSS美化网页【例题】应用CSS样式设计图文混排效果，如图8.8所示。此实例涉及的知识点是CSS样式的创建和应用，有以下几点：1)背景样式、文本及列表样式、方框与边框样式、动态链接样式。2)建立单独的CSS文件，应用于多个网页。任务五 学习CSS美化网页在例题中，上方浅绿色的横条其实是重新定义了body标签的网页背景图像，背景图像横向重复，对网页元素与页边距也进行了设置，操作步骤如下：1)单击“窗口”菜单“CSS设计器”命令，打开“CSS设计器”面板。单击左上角的“源”按钮，创建新的CSS文件（style.css）；单击“媒体”，选择“全局”；单击“选择器，新建“body”CSS样

2、式后，取消属性面板中“显示集”复选框。单击“背景”选项卡，设置“background-images”为images/bg.gif，单击“background-repeat”下拉列表，选择“横向重复”命令，如图8.9所示。1背景样式的应用2)设置页边距。在“属性”面板中，选择“CSS”选项，确定“目标规则”，单击“编辑规则”，选择“body”，进入“body的CSS规则定义面板”。在“方框”分类中将填充（padding）设置为“全部相同”，值为0，边界（margin）分别设置上下均为50像素、左右均为400像素，如图8.10所示。margin和padding简写属性在一个声明中设置所有外边距属性

3、。该属性可以有 1 到 4 个值。其顺序为上(top)左(left)右(right)下(bottom)，按照顺时针排序，即为 margin:top right bottom left，如下案例。margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px;缩写：margin:10px 20px 30px 40px。1背景样式的应用背景样式的应用1在例8.1中，为文本和列表都应用了CSS样式，分别设置字体、段落、列表的相关属性。第一行文本（CSS样式的应用）是标题1(标签为h1)，第二行文本（使用css样式的理由）是标

4、题2(标签为h2)，正文部分用了列表(标签为ul)。1.字体的样式设置在“CSS设计器”对话框的“文本”选项卡中，设置文本的字体、字体大小、字体颜色、字体修饰、字体的粗细及行高等。2文本及列表样式的应用2.文本段落的样式设置在“CSS设计器”面板的“文本”选项卡中，如图所示，设置以下参数：2文本及列表样式的应用1)文本颜色（color）：用于设置文本的颜色，如#000000为黑色；2)文本字体（font-family）：用于设置文本的字体样式，如微软雅黑；3)文本大小（font-size）：用于设置文本的字体大小，如12px；4）单词间距(word-spacing)：用于设置单词之间的距离，距

5、离的单位有很多种，一般用像素来设置。5)字母间距(letter-spacing)：用于设置字母、字符之间的距离。6)垂直对齐(vertical-align)：指定对象的纵向对齐方式，比如可以设置文本的上标和下标等。如果输入一个具体的数值，则后面的下拉菜单框中显示为百分号，表示这个值是相对值。7)文本对齐(text-align)：文本对齐方式，如left、right、center；8)文本缩进(text-indent)：指定首行缩进的数值。2文本及列表样式的应用3.标题的设置操作步骤如下：1)重新定义标题1。在“CSS设计器”中，单击“源”，选择“style.css”，单击“媒体”，选择“全局”

6、，单击“选择器，选择“h1”后，显示“h1的CSS规则定义”对话框。在“文本”选项卡中，定义字体大小为34像素，粗细为bolder，行高为35像素，颜色(color)为白色(#FFF)，选择文本对齐为center。2)重新定义标题2。方法与步骤1 相同，单击“文本”选项卡，设置字体大小为18像素，粗细为粗体，行高为25像素，颜色为绿色(#000)，设置文本对齐为居中。3)重新定义导航条。与步骤1相同，单击“文本”选项卡，设置文本对齐为局中。2文本及列表样式的应用4.列表的样式设置1)类型：设置项目符号或编号的外观。2)项目符号图像：指定图像用于替代项目符号的样式，美化项目符号。重新定义项目列表

7、(标签为UL)。方法与标题设置时的步骤1)相同。在弹出的“UL的CSS规则定义”对话框中，在“文本”选项卡中，设置字体大小为14像素，字体颜色为深灰色(#666)，行高为40px，首航缩进(text-indent)2em，在项目符号图像中输入URL地址images/li.gif，如图8.12所示。2文本及列表样式的应用在例8.1中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。在该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框来修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。1.图像边距的设置在“C

8、SS规则定义”对话框的“布局”选项卡中，主要包括以下选项：高度(height)和宽度(width)：方框的尺寸。浮动(float)：设置网页元素浮于页面左边距或右边距。填充(padding分为上下左右)：网页元素到边框的距离。边界(margin分为上下左右)：网页元素边缘与周围元素之间的距离。3框和边框样式的应用2.图像边框的设置在“CSS设计器”对话框的“边框”选项卡中，主要包括边框样式、宽度和颜色等。其操作步骤如下：1)单击“选择器”按钮，添加选择器，在文本框中输入“.img1”。2)方框的设置。在“CSS规则定义”对话框中，单击“布局”选项卡，进行如图8.13所示的设置。float：右对

9、齐。padding：全部相同输入一个具体数值10像素。margin：全部相同，输入一个具体数值10像素。3框和边框样式的应用3)边框的设置。单击“边框”选项卡，在所有边的样式(style)下拉列表中选择“(dotted)”虚线，设置宽度(width)为2像素、颜色为紫色(#30F)，如图8.14所示。4)类的应用。将自定义的CSS规则应用于网页元素。在代码视图中找到对应的图像标签，在标签中编写class=img1，代码如下所示：3框和边框样式的应用简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，8.2节中已经讲过。在例8.1中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文

10、字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。4动态链接样式的应用1.建立链接CSS样式1)打开“CSS设计器”面板，单击“源”，选择“style.css”，单击“媒体”，选择“全局”，单击“选择器”，添加a:link(链接后效果)，定义字体颜色为黑色(#000)、字体修饰为“无”，如图所示。2)打开“CSS设计器”面板，选中a:link(超级链接默认效果)，单击鼠标右键，在弹出菜单中选择复制命令，如图8.16所示。新建一个a:visited(访问后效果)，样式不做任何修改，直接粘贴样式，如图8.17所

11、示，链接后与访问后效果一致。3)打开“CSS设计器”面板，单击“源”，选择“style.css”，单击“媒体”，选择“全局”，单击“选择器”，添加a:hover(鼠标经过效果)。4动态链接样式的应用4动态链接样式的应用4)在“文本”选项卡中，设定颜色为“橙色”#FFA200，修饰选中“下划线”，在“粗细”下拉列表中选择“粗体”。本小节主要讲解CSS链接样式存在有四种不同的状态，a:link代表未访问的链接、a:visited代表已访问的链接、a:hover代表鼠标悬停链接、a:active代表已选中链接。4动态链接样式的应用2.调用CSS样式文件若想在其他网页上应用刚才建立的CSS样式文件，应

12、如何调用呢？单击“CSS设计器”面板中的“源”按钮，选择“附加现有的CSS文件”，弹出“使用现有的CSS文件”对话框。在“文件/URL”文本框中输入外部CSS文件的路径和文件名，为“添加为”选择“链接”，将新建的样式文件链接到此网页，如图所示。4动态链接样式的应用1.CSS3简介CSS3（标识如图8.19）是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。5CSS3的应用2.CSS3新特性CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与

13、文字阴影、使用RGBA实现透明效果、渐变效果、使用Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等，下面举例说明。5CSS3的应用【例题】边框特性CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。代码如下所示，效果图如图8.20所示。菜鸟教程()divborder:2px solid#a1a1a1;padding:10px 40px;background:#dddddd

14、;width:300px;border-radius:25px;border-radius 属性添加圆角边框！5CSS3的应用【例题】多背景图CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本，代码如下所示，效果图如所

15、示。5CSS3的应用 多图背景#example1 background-image:url(img_flwr.gif),url(paper.gif);background-position:right bottom,left top;background-repeat:no-repeat,repeat;padding:15px;Lorem Ipsum DolorLorem ipsum dolor sit amet,consectetuer adipiscing elit,s e d d i a m n o n u m m y n i b h euismod tincidunt ut laore

16、et dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.5CSS3的应用【例题】颜色渐变CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的，具体代码如下所示，效果图如图8.22所示。5CSS3的应用 颜色渐变#grad1 height:200px;background-color:red;/*浏览器不支持时显示*/background-image:linear-gradient(#e66465,#9198e5);线性渐变-从上到下从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：注意：Internet Explorer 9 及之前的版本不支持渐变。5CSS3的应用THANKS