钟文志的部落格

在 HTML 中，样式用于定义网页的外观和布局。使用 CSS（Cascading Style Sheets）可以实现这一点。以下是一些在 HTML 中应用样式的方法和示例。

三种主要的 CSS 应用方式

内联样式（Inline Style）: 在 HTML 元素的 style 属性中直接定义样式。
html
```
<p style="color: red; font-size: 20px;">这是一个带有内联样式的段落。</p>
```

内部样式表（Internal Style Sheet）: 在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .highlight {
            background-color: yellow;
        }
        #unique {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个带有内部样式的段落。</p>
    <p id="unique">这是一个带有唯一样式的段落。</p>
</body>
</html>

外部样式表（External Style Sheet）: 在 HTML 文档的 <head> 部分链接一个外部的 CSS 文件。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="highlight">这是一个带有外部样式的段落。</p>
    <p id="unique">这是一个带有唯一样式的段落。</p>
</body>
</html>

styles.css 文件内容：

css

body {
    font-family: Arial, sans-serif;
}
.highlight {
    background-color: yellow;
}
#unique {
    color: blue;
}

常见的 CSS 属性

颜色（Color）: 设置文本颜色。
css
```
p {
    color: red;
}
```
背景颜色（Background Color）: 设置元素的背景颜色。
css
```
.highlight {
    background-color: yellow;
}
```

字体（Font）: 设置字体系列、大小、粗细等。

css

h1 {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
}

边距（Margin）: 设置元素的外边距。
css
```
.box {
    margin: 20px;
}
```
填充（Padding）: 设置元素的内边距。
css
```
.content {
    padding: 10px;
}
```

边框（Border）: 设置元素的边框。

css

.bordered {
    border: 2px solid black;
}

选择器（Selectors）

元素选择器（Element Selector）: 选择所有指定类型的 HTML 元素。
css
```
p {
    color: green;
}
```
类选择器（Class Selector）: 选择所有具有指定类的元素。
css
```
.highlight {
    background-color: yellow;
}
```
ID 选择器（ID Selector）: 选择具有指定 ID 的元素。
css
```
#unique {
    color: blue;
}
```
属性选择器（Attribute Selector）: 选择具有指定属性的元素。
css
```
a[target="_blank"] {
    color: red;
}
```
后代选择器（Descendant Selector）: 选择所有是某个元素后代的元素。
css
```
div p {
    color: purple;
}
```

综合示例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 应用示例</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .highlight {
            background-color: yellow;
        }
        #unique {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>CSS 应用示例</h1>
    <p class="highlight">这是一个带有高亮背景的段落。</p>
    <p id="unique">这是一个带有唯一样式的段落。</p>
    <div>
        <p>这是一个嵌套在 div 元素中的段落。</p>
    </div>
    <a href="https://www.example.com" target="_blank">在新标签页中打开链接</a>
</body>
</html>

通过这些方式，您可以在 HTML 文档中使用 CSS 来控制网页的外观和布局，从而实现更丰富和有吸引力的用户界面。

三种主要的 CSS 应用方式 ​

常见的 CSS 属性 ​

选择器（Selectors） ​

综合示例 ​

三种主要的 CSS 应用方式

常见的 CSS 属性

选择器（Selectors）

综合示例