实习三CSS基本语法

实习三C S S基本语法 The following text is amended on 12 November 2020.

实习三CSS基本语法

一、实验目的

1. 了解XHTML；

2. 掌握在网页中引用CSS 的方法；

3. 掌握CSS 的基本语法规则；

4. 掌握CSS 的常用选择器；

5. 掌握使用Dreamweaver 定义CSS 的方法。

二、实验内容

1. CSS 的引入和基本选择器应用；

2. 利用CSS 对网页进行控制；

3. 利用W3school 网站进行CSS 的练习。

三、实验步骤

的引入和基本选择器应用；

(1)内嵌样式表

将定义的样式以

这是标题一

这是正文…..

这是使用Fnt 类后的效果

(2) 行内样式

将定义的样式以标记的属性形式插入，如：

,此种方法样式只影响当前标记所影响的区域。

建立网页，代码如下：

-8-

这是标题一

这是正文…..

这是使用Fnt 类后的效果

这是中效果只使用于此段….

(3) 外部样式表

将所有样式的信息存放在一个单独的文件中（扩展名为Css），然后用把它链接到

每个HTML 页面中。如果你希望样式能够影响你站点上的所有文件，这是很好的办法。链接

格式：

2. 利用CSS 对网页进行控制；

(1) 用Dreamweave 创建如图3-1 所示页面（）。

图3-7 未使用CSS 样式前的网页

(2) 建立样式文件，格式化上面页面如图3-8 所示，要求：

①标题：字体为"华文彩云", "华文琥珀", "华文行楷"；字号40pt；字色红色；背

景色：#FFFFCC。导航条：背景色为#33CCFF。

②导航栏：标题背景色为#FFFFCC，上边框为：实线，2pt 宽，色值：#FFCC00；内容背景色：#FFCCFF；导航栏右边框为：点划线，1pt 宽，色值：#0033FF。底框：背景色：#99CCFF；上边框：双线，2pt 宽。

③文本框：背景色：#FFFFCC；边框：宽度1pt，实线。

④正文字号：9pt。（除标题）

⑤超级链接：正常色：黑色，无修饰；鼠标悬停时：红色，加下划线；激活时：红色，加下划线；访问过的链接：黑色，无修饰。

图3-8 应用样式后的效果

3. 利用W3school 网站进行CSS 的练习。

W3school 网站是一个很好的学习网站，其上面有很多的学习资源，并且也提供了很多在线

测试的例子。

打开网站，找到CSS 相关部分并作练习。

四、实习要求

1. 根据指导书实例和操作步骤，独立完成实习内容。

2. 记录实验中出现的问题，以用解决办法。

五、思考问题

1. HTML 与XHTML 的区别，在网页设计中各有什么用处

区别：

文档必须在文档的第一行有一个文档类型的声明（DOCTYPE）

文档可以定义命名空间

文档里面必须具有html，head，body，title这些元素。

4.在XHTML语言规范的基础上，对标记的语言还有一些额外的要求。

HTML既用来表现文档的结构，又能表示文档的内容，但是描述文档表现的能力很弱，代码重用性低。XHTML实现了结构和表现分离，用XHTML确定网页的内容，CSS控制页面的表现形式。

的基本思想。

CSS的全称是Cascading Style Sheet，中文译文为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概况来说，CSS就是由“对象”“属性”“值”3个基本部分组成的。

选择器有哪些，在网页设计中如何选择使用。

基本的选择器包括：标记选择器，类选择器，ID 选择器，伪类选择器。

CSS的标记选择器用来声明哪种标记采用哪种CSS样式，标记选择器将拥有同一个标记的所有元素全部选中。

但是如果希望其中的一些元素改变，或者希望不同标记的元素应用同一种样式，可以用类选择器来选中它们。

ID选择器使用方法与class选择器基本相同，不同之处就是ID选择器只能应用于HTML 文档中的一个元素，因此针对性更强。

伪类选择器可以对目标元素出现某种特殊的状态应用样式，常用的伪类有四个：link链接、visited已访问的、hover鼠标悬停时、active激活状态。