一、概述
CSS（层叠样式表）是一种用于控制网页外观和布局的样式语言。它可以独立于 HTML 或 XHTML 文档，以及任何标记语言使用，因此可以用于设计不同类型的文档，如 XML、SVG、XUL 等。CSS 提供了广泛的样式选择器，包括元素类型、类别、id、属性和伪类别等，还可以针对不同媒体类型和响应视口大小自适应调整样式。
使用 CSS 的好处包括以下几个方面：
-
分离内容和样式：CSS 可以将网页的样式代码与 HTML 文档分离开来，使得修改样式更加灵活、可维护，同时也能提高文件复用率和网站性能。
-
页面加载更快：将样式表从 HTML 文档中移除，可以减少 HTML 文件的大小，从而缩短页面的加载时间，提升用户体验。
-
样式统一性：使用 CSS 可以定义全局样式，实现网页内样式风格统一，提高视觉效果和品牌识别度。
-
响应式设计：CSS 提供了响应式设计的功能，可以根据不同的设备屏幕尺寸和方向调整布局和显示效果，从而提高网站的可访问性和用户体验。
-
可扩展性：CSS 语言具有很高的可扩展性，新的 CSS 特性和模块被持续提出和更新，可以用于解决目前网页设计中遇到的新问题和需求。
二、CSS与HTML的结合方式
1、内联样式：内联样式是直接在 HTML 元素的样式style属性中设置样式值，仅对该元素生效。
内联样式具有以下特点：
-
简单易懂：无需独立的 CSS 文档或额外的引用代码，直接在元素上设置样式属性，简单明了。
-
专注性强：由于样式代码直接写在标签之内，所以只对当前标签有效，可以精确控制该标签的样式特征，适合进行快速排版。
-
覆盖性强：内联样式会覆盖外部样式表定义的相同样式，因此可以快速地改变与其余页面不同的样式属性。
-
可维护性差：内联样式不利于代码管理和维护，在多个标签上重复设置样式时容易出现错误和冲突。
在样式复杂或需要重复使用时建议通过外部样式表进行定义和管理。
2、内部样式：CSS 内部样式是将 CSS 样式代码直接写入 HTML 文档的 <head> 元素中的 <style> 标签内，用于控制整个文档或特定区域的外观和布局。
内部样式有以下特点：
-
简单明了：无需额外的 CSS 文件，将样式代码集中在文档头部的 <style> 标签中。
-
可维护性好：样式代码易于修改、组织、维护，每个 HTML 文档可以拥有自己不同的样式表，更便于管理。
-
覆盖性适中：内部样式对全局有效，并可覆盖外部样式表，适合需要统一一部分页面样式，但部分元素需要特别设置时使用。
3、外部样式：CSS 外部样式是将 CSS 样式代码定义在独立的 CSS 文件中，然后在 HTML 文档头部使用 <link> 标签引用该文件。与内联和内部样式相比，外部样式具有以下特点：
-
可维护性强：CSS 文件可以被多个 HTML 文档共用，统一维护和更新，便于样式重复利用。
-
适应性强：当需要修改某种样式时，只需修改一个 CSS 文件即可同时改变所有使用该样式的页面。
-
可读性好：我们可以将 CSS 代码写成易懂的、结构清晰的方式，方便阅读和理解，提高代码质量。
-
加载速度快：因为样式代码是独立成一个文件的，所以浏览器可以缓存它，当用户访问其他同样使用该文件内的样式的页面时，不必重新下载。
在一个名为 "style.css" 的 CSS 文件中定义了页面的背景颜色和所有段落字体大小。在 HTML 页面中通过 <link> 标签引用该 CSS 文件：
/*
style.css
*/
body {
background-color: #eee;
}
p {
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一段使用外部样式表设置的文本。</p>
</body>
</html>
