第三篇：【网页设计-最新经典技术文档】网页排版CSS教学(三)

网页排版CSS教学

（三）第三章 ＣＳＳ的应用补充 挑 选 者 特 性 的 应 用

在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。

接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。

一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。

前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！

元素A(标签A)元素B(标签B)元素C(标签C)...{样式规则} 要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。

元素A 元素B, 元素C 元素D 元素E,...{样式规则} 这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。

二、类别挑选者：让单一或数个标签使用同组样式规则的方法。

类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。

<--

.blue { color : BLUE }-->

...

...

...

...

... 要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。

标签之中。

例如：

通常是将整个的 结构写在网页的 部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入 即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的 部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入： 跟LINK用法很像，但必 放在 中。

例如：

要注意的是，行末的分号是绝对不可少的！切记切记！

很明显的，不管是LINK还是@import的用法都可能可以直接套用他人现有的样式表。不过，基於网路的礼仪，这种事别做的好，至少也应该知会 对方一声，要先取得人家的同意才行！

而四种应用方法各有其优缺点，您可以综合地使用，并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话，就要考量套用优先权的问题了！一般来讲，优先权的顺序有以下的几点原则：

网页设计者的样式设定 ＞ 使用者的样式设定 ＞ 浏览器的样式设定 STYLE属性的样式设定 ＞ STYLE标签样式设定 ＞ 链结进来的样式设定 後面声明的样式设定 ＞ 前面的样式设定

所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。

以上就是ＣＳＳ最基本的声明与应用的方法介绍，有了这些基本的认识与方法，您已经可以开始建立您的样式表！除了上面提到的Ｑ291911320基本的声明与应用的方法之外，还有其它的声明与应用的方法，将为您在下一章中再作介绍。

第五篇：实习六 网页设计 实习报告

实习六网页设计（1）

一、实习目的1.了解HTML文档结构；

2.初步掌握基本标记的使用；

3.能够运用文本编辑器制作简单网页。

二、实习内容

1.2.3.4.5.6.使用文本编辑器制作只有一行文字的网页，了解HTML文档结构。在IE浏览器中打开编写的网页文件，查看运行效果； 在网页中添加文本内容，并对页面格式进行设置排版，制作一个简单文字内容的网页； 在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页； 制作一个索引网页，建立与前面网页之间的超连接； 制作一个简单的个人主页。

三、预备知识

1.网页的基本组成；

2.HTML语言：常用HTML标记及其属性；

3.网页制作方法。

四、实习步骤

1.学习EditPlus文本编辑器的使用

2.使用EditPlus制作一行文字的网页

3.制作一个简单文字内容的网页

4.制作一个简单图文内容的网页

5.建立超链接

6.制作一个简单的个人主页。

五、实习要求

1.独立完成实习内容；

2.保存制作的网页；

3.记录实习过程存在的问题，书写实习报告。

六、思考问题

1.网页的基本结构包括哪些部分，各部分的功能是什么？

答：文本、图片、超链接是构成网页的最基本的元素。另外，网页中还可以包含表格、表单、视频和音频等。

文本：是展示信息的主体，它能够准确地表达信息的内容和含义。

图片：是对网页进行装饰以表达制作者的个人情调或网页的风格，另外也用于展示用文字难于表达或不能准确 表达的信息，如对产品的展示。

超链接：是从一个网页的热点指向目的端的指针。通过它用户可以快速地找到并打开所需的资源，而并不需要知道此资源的具体位置（URL地址）。

表格：一是用行和列的形式来布局文本和图像以及其他列表化数据；二是使用表格来精确控制各种网页元素在网页中出现的位置以及对网页进行布局。

表单：用户可以通过表单域输入文本、选择选项、上传文件等，网页制作者可以通过表单来收集用户的信息、反馈意见等。

视频和音频：通过视频和音频可以给用户传递更为丰富的信息。

2.网页设计中有哪些常用的图片类型，如何设置属性？

答:有JPEG、PNG、GIF三种。图片的属性还有width、height、alt、align等，Width属性用来设置图片的宽度，可以是绝对值（像素点）或相对值（占所处容器的百分比）;

Height属性用来设置图片的高度，取值同width;

Alt属性用来设置替代文本，当图片不能正常显示时，显示此文字;

Align属性用来设置图片的对齐方式，预期后面的文字产生环绕效果，若不设置则没有环绕。取值可为Left或者Right。

其格式为：

3.网页设计中如何设置超链接？

HTML通过标记来创建超链接，其格式为：链接触发对象。“触发对象”可以是文本或者图片，当用户单击触发对象时，浏览器就会打开URL指向的文件。

我的实习报告及总结：

1.在使用EditPlus制作一行文字的网页的操作中，在空白网页的标记之间添加文字“西北农林科技大学”，并保存为“西北农林科技大学”。

我所写的代码是：

西北农林科技大学

2.在制作一个简单文字内容的网页这一操作中，我利用HTML文字标记进行了版面编排

并保存为1.htm，之后我在IE浏览器中查看网页运行效果，如果我继续更改标记属性并进行保存，则我再次打开的网页是更改之后的效果。

我所写的代码如下：

Sarah Brightman

  莎拉·布莱曼是英国跨界音乐女高音歌手和演员。在西班牙她被称为“歌剧天使”；在德国她被称为“舞台剧歌后”；在日本她被称为“超人气歌星”；在大陆她被古典界称为“歌后”，她在迪斯科初试啼声，因为演绎安德鲁·洛伊·韦伯(Andrew Lloyd Webber)的音乐剧而闻名于世。在她21岁的时候，因饰演韦伯的著名音乐剧《Cats》

中的小猫（可爱猫）Jemima（需要女高音及舞蹈基础），引起了韦伯的注意。创作《The Phantom of the Opera》时，女主角克莉丝汀的音乐就是根据她的音域而作。结果，莎拉布莱曼和饰演魅影的迈克尔·克劳福德皆一炮而红。后来莎拉也演唱许多韦伯的歌曲，并收录到专辑里。她还在1992年巴塞罗那奥运会上与何塞·卡雷拉斯演唱了《Friends for Life 》一曲。并与中国歌手刘欢同唱2008年北京奥运会主题歌《You and me》，代表作为《告别时刻》，《月光女神》，《猫》。

---

  她的嗓音嘹亮，被誉为天籁之声。流行音乐、古典音乐和舞台剧原本是无法融合甚至对立的音乐空间，但是莎拉的歌声却极具创造性地将它们结合在了一起，她用极为难得的艺术手法将所演唱的音乐表现出来，而且仍能不损其原味。其绚丽多彩的美丽造型带人们进入如痴如醉的梦幻世界，不论在音乐上还是在视觉艺术上，莎拉?布莱曼都达到了别人无法达到的极致„„

  而更令人叹为观止的，是莎拉的歌声能够极具创造性地将流行音乐、舞台剧和古典音乐结合在一起，用一种极为难得的艺术手法将所演唱的音乐表现出来，且总能不损其原味。著名的曲目包括《Time to Say Goodbye》、《The Phantom of the Opera》等。莎拉也演唱过许多原剧中应是男角唱的歌曲，包括歌剧《图兰朵》中的《Nessum Dorma》、《艾薇塔》唱段音乐剧《The Phantom of the Opera》的《The Music of the Night》依旧涉及到流行、古典和摇滚三大音乐类型。莎拉·布莱曼创造了女人所未曾创造过的成绩——她是第一位同时登上跨国流行、古典和跨界音乐最高地位的女性，她不愧为“音乐剧皇后”。

---

  作为一位歌唱家，少有人能像莎拉布莱曼这样，如此的才华横溢，如此的风格惟一。那极具个人气质的歌声，虚幻、空灵、纯净，时而清新甜美、时而高亢震撼，营造出无边无际的空间幻觉，令她直入云霄的高音不仅不会刺耳，反而抹上一层天籁色彩，让人充满迷惑与想象，就像航行在海上孤寂的水手听见美人鱼的吟唱般，成为一种方向感的皈依，一种心灵折服的美声女神。每当她的歌声响起，在那些残阳如血的黄昏，人们总是不可救药地迷失在那柔情美声里。就像是在逃离烦闷躁动的心路上，莎拉的歌声是最好的御花园。

  作为韦伯的第二个妻子，莎拉 布莱曼演唱的“安魂曲”中的流行单曲，进入英国前10名排行榜。2001英国高收入妇女中,莎拉布莱曼名列第十。这也正是她能够极具创造性地将美声誉流行唱法绝佳融合的原因。

3.在制作一个简单图文内容的网页的操作中，我插入了有关SARAH BRIGHTMAN的专辑介绍以及图片，并进行了图文混排。保存为为2.htm。

我所书写的代码如下：

专辑:

天籁森林（The Trees They Grow So High，又称Early One Morning）(1988第一版，1998再版)

遗忘的歌声（The Songs That Got Away）(1989)

走过岁月（As I Came of Age）(1990)

韦伯之歌（Sings the Music of Andrew Lloyd Webber）(1992)

潜Dive）(1993)

臣服（Surrender）(1995)

飞（Fly）(1995)

永志不渝/永相随（Time To Say Goodbye/Timeless）(1997)

重返伊甸园（Eden）(1998)

月光女神（La Luna）(2000)

金选（Classics）(2001)

喝彩（Encore）(2002)

一千零一夜（Harem）(2003)

爱改变一切（Love Changes Everything: The Andrew Lloyd Webber CollectionⅡ）(2005)

真爱传奇/交响魅影（Symphony）(2008)

真爱永恒 冬之歌/冬日交响（A Winter Symphony）(2008)

阿尔玛菲：莎拉布莱曼的爱之歌Amalfi—Sarah Brightman Love Songs(2009)
新精选集 Bella Voce(2009)

4.在建立超链接的操作中，我新建一个空白网页，在网页中添加了之前做的1.htm和

2.htm，同时我还在在网页中建立了与“西北农林科技大学”主页（>Sarah Brightman

专辑

新浪网

5.在制作一个简单的个人主页过程中，我添加了一些个人简介，对页面背景添加了图片以及音乐（Time To Say Goodbye(Con Te Partiro).mp3），对 “我的学校”添加了西北农林科技大学的超链接，另外我插入了4张我的专辑收藏的照片。

我写的代码如下：

3.jpg” >

      我的个人简介

            姓名：宋巍

            学历：大学本科

            所在学校：西北农林科技大学

            爱好：钢琴、收集原版CD

            最喜欢的音乐类型：古典、跨界

            最喜欢的歌手：SARAH BRIGHTMAN、孙燕姿

            最喜欢的音乐家：肖邦

            最喜欢的国家：奥地利

            最喜欢的玩偶：宝贝羊羊

            我的专辑收藏量：大约200张

实验总结：通过这次网页制作实习，我发现了许多自身存在的问题，比如说没有注意到像表示空格（ ）、大于号（>）、小于号<、版权所有（©）、注册商标（®）等特殊符号这种类型的细节。另外，对各种网页代码不熟悉，在设置相应的属性的时候需要经过多次调试才能得到满意的结果。而且对于各种标记以及相关的属性之间的关系比较混淆，例如，字标记„与段落标记

„/p>之间是并列的关系，但是我却经常写成

,另外我还犯过这种错误，这是非常需要我注意以及改正的地方。这次实习对我最大的感受就是：一个内容丰富详实的好网页真的需要下很大的心思与功夫才能完成。所以，首先要掌握好基本功是最最重要的，这样才能为丰富内容打下基础！