介绍如何使用CSS（层叠样式表）来为网页添加样式。

最新推荐文章于 2024-04-30 09:57:08 发布

Chua8n

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量166

点赞数

分类专栏： java 文章标签： css html javascript

本文链接：https://blog.csdn.net/2302_76702437/article/details/131030181

版权

java 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

好的，下面我将为大家介绍如何使用CSS（层叠样式表）来为网页添加样式。

1. 使用内联样式

在HTML元素内部使用“style”属性，可以为该元素添加样式。以下是一个简单的示例，将文本颜色变为红色：

```html
<p style="color: red;">这是一段红色的文本。</p>
```

虽然这种方法是最简单的，但是它并不推荐在整个网站中使用，因为它破坏了HTML文档的结构和样式分离原则。

2. 使用内部样式表

将样式信息放在包含在HTML文件“head”部分的“style”元素中，可以对整个网页进行样式设置。以下是一个简单的示例：

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
```

在这个例子中，我们创建了一个简单的样式表，指定了背景颜色和标题颜色等。请注意，“style”元素必须放在HTML文件的“head”元素中。

与内联样式相比，内部样式表更灵活，但是仍然未能完全分离样式和内容。

3. 使用外部样式表

在HTML文件中引入外部样式表，可以更好地实现结构和样式分离。以下是一个样式表文件的示例，保存为“style.css”：

```css
body {
    background-color: #f0f0f0;
}
h1 {
    color: red;
    text-align: center;
}
```

在HTML文件中引用样式表文件：

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
```

在这个例子中，我们创建了一个名为“style.css”的外部样式表，并将其应用于HTML文档，可以使用“link”元素将其链接到HTML页面。在这个例子中，我们添加了一个文本颜色的属性，同时为文本居中。

使用外部样式表的好处是可以更好地实现样式和内容的分离，可以在不改变HTML文件的情况下随时修改样式表，而且可以在多个HTML文件中共享相同的样式。

4. CSS选择器

CSS选择器用于选择Web页面中的元素并为其应用样式。以下是常见的几种选择器：

① 元素选择器：选取所有指定类型的元素。

```css
p {
color: blue;
}
```

以上样式选择所有的段落元素，并将它们的文本颜色改变为蓝色。

② ID选择器：选取指定ID的元素。

```css
#myId {
color: red;
}
```

以上样式选择具有“myId” ID的元素，并将其文本颜色改变为红色。

③ 类选择器：选择包含特定类的元素。

```css
.myClass {
font-size: 18px;
}
```