实习二 CSS基本语法

一、实验目的

1. 2. 3. 4.

掌握在网页中引用CSS的方法； 掌握CSS的基本语法规则； 掌握CSS的常用选择器；

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

二、实验内容

1. CSS的引入和基本选择器应用； 2. 利用CSS对网页进行控制；

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

三、实验步骤

1. CSS的引入和基本选择器应用； (1) 内嵌样式表

将定义的样式以

这是标题一

这是使用fnt类样式后的效果

(2) 行内样式

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

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

建立网页Css2.htm，代码如下：

这是标题一

这是使用Fnt类后的效果

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

(3) 外部样式表

将所有样式的信息存放在一个单独的文件中（扩展名为css），然后用把它链接到每个HTML页面中。链接格式：

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

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

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

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

① 标题：字体为\华文彩云\\华文琥珀\\华文行楷\；字号40pt；字色红色；背景色：#FFFFCC。导航条：背景色为#33CCFF。

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

③ 文本框：背景色：#FFFFCC；边框：宽度1pt，实线。 ④ 正文字号：9pt。（除标题）

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

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

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

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

在线测试的例子。

打开 http://www.w3school.com.cn 网站，找到CSS相关部分并作练习。

四、实习要求

1. 根据指导书实例和操作步骤，独立完成实习内容。 2. 记录实验中出现的问题，以用解决办法。

五、思考问题

1. HTML与XHTML的区别，在网页设计中各有什么用处？ 2. CSS的基本思想。

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

本文来源：https://www.bwwdw.com/article/wzcv.html