实验二 样式表应用
时间: 2023-08-07 17:12:09 浏览: 148
实验目的:
通过实验,学习样式表的基本语法和应用方式,掌握CSS在网页中的应用。
实验要求:
1. 使用外部样式表设置样式
2. 使用内部样式表设置样式
3. 使用行内样式设置样式
实验步骤:
1. 新建一个HTML文档,并在文档头部添加一个外部样式表,命名为style.css。
```html
<!DOCTYPE html>
<html>
<head>
<title>样式表应用实验</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
```
2. 在style.css文件中设置一些样式:
```css
/* 设置body的背景颜色为白色 */
body {
background-color: white;
}
/* 设置h1元素的字体大小为30像素,颜色为蓝色 */
h1 {
font-size: 30px;
color: blue;
}
/* 设置a元素的字体颜色为绿色 */
a {
color: green;
}
```
3. 在HTML文档的head标签内添加一个内部样式表,并设置一些样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>样式表应用实验</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
/* 设置p元素的字体大小为20像素,颜色为红色 */
p {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
```
4. 在HTML文档中使用行内样式设置样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>样式表应用实验</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
/* 设置p元素的字体大小为20像素,颜色为红色 */
p {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<!-- 网页内容 -->
<p style="font-size: 24px; color: blue;">这是一个使用行内样式的段落。</p>
</body>
</html>
```
实验总结:
通过本次实验,我们学习了样式表的基本语法和应用方式,掌握了CSS在网页中的应用。在网页开发中,使用样式表可以方便地设置网页的外观和布局,提高网页的可读性和美观性。
阅读全文