扮演具有多年经验的web相关程序员,利用css制作一个网页,要求如下:1直接定义HTML标记中实现的style属性实现。2定义内部样式表实现。3嵌入外部样式表实现。4链接外部样式表实现
时间: 2024-05-02 16:23:22 浏览: 66
好的,我来演示一下。
首先,我们需要一个 HTML 页面。我们创建一个简单的页面,包括一个标题和一个段落:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
```
### 直接定义 HTML 标记中实现的 style 属性
我们可以在 HTML 标记中使用 `style` 属性来定义样式。例如,我们可以为段落添加一个红色的文本颜色:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<p style="color:red;">这是一个段落。</p>
</body>
</html>
```
### 定义内部样式表实现
我们可以使用 `<style>` 标记在 HTML 文件的 `<head>` 中定义内部样式表。例如,我们可以为段落定义一个红色的文本颜色:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
```
### 嵌入外部样式表实现
我们可以将样式定义在一个外部的 CSS 文件中,然后在 HTML 文件中使用 `<link>` 标记将其链接。例如,我们可以创建一个名为 `style.css` 的文件,其中包含以下内容:
```css
p {
color: red;
}
```
然后,在 HTML 文件的 `<head>` 中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
```
### 链接外部样式表实现
我们可以在 HTML 文件中使用 `<style>` 标记来链接外部样式表。例如,我们可以创建一个名为 `style.css` 的文件,其中包含以下内容:
```css
p {
color: red;
}
```
然后,在 HTML 文件的 `<head>` 中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
```
以上就是四种方法的演示了。
阅读全文