如何用这些CSS 样式?
时间: 2023-06-16 22:07:29 浏览: 59
要在网页中使用 CSS 样式,有以下几种方法:
1. 内部样式表:在 HTML 文件头部的 `<head>` 标签中使用 `<style>` 标签定义样式,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
```
2. 外部样式表:将样式定义在独立的 CSS 文件中,然后在 HTML 文件中使用 `<link>` 标签引用该文件,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
```
styles.css 文件中的内容如下:
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
```
3. 内联样式:在 HTML 元素中使用 `style` 属性定义样式,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1 style="color: #333;">Welcome to my website!</h1>
<p style="font-family: Arial, sans-serif;">This is my first paragraph.</p>
</body>
</html>
```
以上三种方法都可以实现样式定义和引用,但推荐使用外部样式表,因为可以使 HTML 文件更加简洁,易于维护。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)