简述 css 样式表的使用方式。
摘要：
1.CSS 样式表简介
2.使用内联样式
3.使用内部样式表
4.使用外部样式表
5.CSS 选择器
6.常用 CSS 样式属性
7.应用 CSS 样式实例
正文：
CSS(层叠样式表) 是一种用于描述 HTML 或 XML 文档样式的样式表语言。通过使用 CSS 样式表，可以为网页中的元素 (如标题、段落、图像等) 设置字体、颜、大小、位置和其他外观属性。CSS 样式表可以应用于 HTML 文档的内部或外部，可以通过各种选择器来选取需要应用样式的元素。
以下是使用 CSS 样式表的一些常见方式:
## 使用内联样式
内联样式是指在 HTML 元素中使用`style`属性来设置元素的样式。例如，以下代码将在段落元素中设置字体颜为红:
```
<p >这是一个红的段落。</p>
```
使用内联样式的方法不太推荐，因为它会使 HTML 文档变得难以阅读和维护。
## 使用内部样式表
内部样式表是指在 HTML 文档的`<head>`部分使用`<style>`标签来定义 CSS 样式。例如，以下代码定义了一个名为`my-style`的 CSS 样式，它将应用于 HTML 文档中的所有段落元素:
```
<head>
<style>
.my-style {
color:red;
}
</style>
</head>
<body>
<p class="my-style">这是一个红的段落。</p>
<p class="my-style">这是另一个红的段落。</p>
</body>
css外部样式表代码```
使用内部样式表比使用内联样式更推荐，因为它可以使 HTML 文档更容易阅读和维护，并且可以轻松地为多个元素应用相同的样式。
## 使用外部样式表
外部样式表是指将 CSS 样式定义在一个单独的`.css`文件中，并在 HTML 文档中使用`<link>`标签引用该文件。例如，以下代码将引用一个名为`styles.css`的外部样式表，其中定义了一个名为`my-style`的 CSS 样式，它将应用于 HTML 文档中的所有段落元素:
```
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="my-style">这是一个红的段落。</p>
<p class="my-style">这是另一个红的段落。</p>
</body>
```
使用外部样式表是最推荐的，因为它可以最大程度地提高 HTML 文档的可读性和可维护性，并且可以轻松地为多个 HTML 文档应用相同的样式。
## CSS 选择器
CSS 选择器是用于选取需要应用样式的 HTML 元素的一种方式，它包括元素选择器、类选择器、ID 选择器、属性选择器等。通过使用选择器，可以精确地选择需要的元素，并为其设置样式。
## 常用 CSS 样式属性
CSS 样式属性包括字体、颜、大小、位置、背景、边框等属性，通过使用这些属性，可以为 HTML 元素设置各种样式。
## 应用 CSS 样式实例
以下是一个简单的应用 CSS 样式的实例，它将创建一个具有蓝背景和白文本的 div 元素，该元素具有 10 像素的内外边距，并居中显示:
```
<!DOCTYPE html>
<html>
<head>
<style>
.blue-box {
background-color:blue;
color:white;
margin:10px;
padding:10px;
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="blue-box">
这是一个蓝的 div 元素。
发表评论