一、什么是CSS?
CSS（层叠样式表）是用于设置网页的外观和布局的一种语言。它与HTML或其他标记语言结合使用，通过选择器来选择要应用样式的HTML元素，并定义这些元素的样式规则。
CSS的主要作用是将样式从HTML文档中分离出来，使得样式和内容可以独立管理和修改。通过将样式集中在一个或多个CSS文件中，可以更方便地为整个网站的所有页面定义一致的样式。
二、CSS和HTML区别
HTML（超文本标记语言）是一种标记语言，用于定义网页的结构和内容。它使用标签（例如<p>、<div>、<img>等）来标识不同的元素，并使用这些标签来组织和呈现文本、图像、链接和其他媒体内容。HTML提供了一种描述网页结构和语义的方式。
CSS（层叠样式表）是一种样式语言，用于定义网页的外观和布局。它通过选择器选择HTML元素，并定义这些元素的样式规则，如颜色、字体、边距、背景等。CSS通过将样式与内容分离，使得样式和内容可以独立管理和修改。
以下是HTML和CSS之间的几个关键区别：
1、功能：HTML主要用于定义和组织网页的结构和内容，而CSS用于定义网页的外观和布局。
2、语法：HTML使用标签和属性来描述元素和其属性，而CSS使用选择器、属性和值来定义样式。
3、内容 vs 样式：HTML负责表示内容，而CSS负责表示样式。HTML确定了文本段落、标题、图像等的结构和语义，而CSS确定了这些元素的视觉呈现方式。
4、分离性：HTML和CSS具有分离性，这意味着可以将样式定义放在一个或多个CSS文件中，并通过链接或嵌入到HTML中。这种分离性使得修改样式更加方便，同时也提高了代码的可维护性和可重用性。
三、CSS语法
CSS的基本语法如下：
selector {
property: value;
/* more properties and values */
}
其中，选择器用于选择要应用样式的HTML元素，属性（property）指定要设置的样式属性，值（value）指定该属性的值。
例如，以下CSS代码将使所有段落元素的文字颜色为红色，并设置字体大小为16像素：
p {
color: red;
font-size: 16px;
}
在HTML文件中，可以通过将 <link> 标签放置在 <head> 中来引入外部CSS文件：
<html> <head> <link rel="stylesheet" href="styles.css" rel="external nofollow" rel="external nofollow" > </head> <body> <!-- HTML content --> </body> </html>
上述示例中，<link> 标签的 href 属性指定了外部CSS文件的路径，这里是 styles.css。
有三种方法可以将 CSS 规则添加到网页：
- 内联样式；
- 内部样式表；
- 外部样式表。
在绝大多数情况下，应使用外部样式表。但是，在某些情况下，可能会使用内联样式或内部样式表。
四、内联样式
内联样式应用于特定的 HTML 元素。HTML 属性用于定义仅适用于该特定元素的规则。下面介绍一下编写内联样式的语法：
<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>
以上代码将该标题呈现为带红色下划线的文本和所有边距的 10 像素填充。在极少数情况下，应使用内联样式。在几乎所有情况下，都应该避免使用它们，并将样式添加到样式表中。
五、内部样式表
内部样式表是添加到 HTML 文档元素的 CSS 块。该元素在开始标记和结束标记之间使用，并且所有 CSS 声明都添加到标记之间。
使用此语法在内部样式表中复制上述代码中的内联样式。
<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>
该代码将产生与内联样式相同的结果。但是，使用内部样式表而不是内联样式的好处是页面上的所有元素都将受到样式的影响。
六、外部样式表
外部样式表是只包含 CSS 语句的文档。通过使用 HTML 文档元素中的标记，文档中定义的规则链接到一个或多个 HTML 文档。
要使用外部样式表，首先要创建 CSS 文档。
/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
现在我们有一个带有一些样式的外部样式表，我们可以使用link元素将其链接到 HTML 文档。
<head> <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" rel="external nofollow" > </head> <body> <h1>Example Heading</h1> </body>
加载此 HTML 文档时，link 标记将导致文件 styles.css 中的样式加载到网页中。因此，所有 1 级标题元素都将显示红色文本，带下划线，并在每侧应用 10 像素的填充。
七、背景颜色
背景颜色属性（background-color）定义一个元素的背景颜色：
<html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
八、文本对齐方式
使用text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
注意：文本对齐属性 text-align 删除了旧标签 <center> 。
