css介绍
CSS（Cascading Style Sheets）是一种用于描述HTML文档外观和格式的样式表语言。CSS允许开发者和设计师将网页的呈现（布局、颜色、字体等）与内容（HTML）分离开来，从而使得网页的设计更加灵活和可维护。
HTML代码演示使用CSS样式的多种方法
css1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#css1{
background-color: aqua;
}/* 使用id选择器设置所有id属性为css1的背景颜色 */
.css2{
color: red;
}/* 使用类选择器设置具有类的元素文本颜色为红色 */
p{
font-size: 30px;
}/* 使用标签选择器设置所有p标签字体大小为30像素 */
</style>
<link rel="stylesheet" href="css2.css">
</head>
<body>
<p style="background-color: pink;">使用[内联]方式</p>
<p id="css1">使用id选择器的[内嵌]方式</p>
<p class="css2">使用类选择器的[内嵌]方式</p>
<p>使用标签选择器的[内嵌]方式</p>
<!-- 引入外部css文件设置所有p标签的边框 -->
</body>
</html>
css2.css
p{
border: 1px solid;
}
/* 设置p标签边框的宽度和样式 */
页面样式
CSS内联、内嵌与外链方法详解
内联样式
内联样式是直接在HTML元素的style属性中定义的CSS规则。适用于单个元素的样式定义。
<p style="background-color: pink;">使用[内联]方式</p>
<p>标签使用了内联样式来设置背景颜色为粉红色。
内嵌样式
内嵌样式在HTML文档的<head>部分的<style>标签内定义的CSS规则。用于整个页面的样式定义。
<style>
#css1{ background-color: aqua; }
.css2{ color: red; }
p{ font-size: 30px; }
</style>
在这个例子中，定义了三种样式规则：
#css1：ID选择器，用于选择ID为css1的元素，并设置其背景颜色为浅蓝色（aqua）。
.css2：类选择器，用于选择所有具有css2类的元素，并设置其文本颜色为红色。
p：标签选择器，用于选择所有的<p>标签，并设置其字体大小为30像素。
外链样式
外链样式是在一个单独的CSS文件中定义的样式规则，然后通过<link>标签引入到HTML文档中。这种方法的优点是样式和内容分离，便于维护和重用样式。
<link rel="stylesheet" href="css2.css">
在这个例子中，我们引入了一个名为css2.css的外部CSS文件。用于设置p标签的边框的样式。
应用示例
在<body>中，有四个<p>标签，每个标签都以不同的方式应用了css样式：
<p style="background-color: pink;">使用[内联]方式</p>
<p id="css1">使用id选择器的[内嵌]方式</p>
<p class="css2">使用类选择器的[内嵌]方式</p>
<p>使用标签选择器的[内嵌]方式</p>
第一个<p>标签使用了内联样式，背景颜色被设置为粉红色。
第二个<p>标签通过ID选择器`#css1`应用了内嵌样式，背景颜色为浅蓝色。
第三个<p>标签通过类选择器`.css2`应用了内嵌样式，文本颜色为红色。
第四个<p>标签没有显式地应用任何样式，但会继承内嵌样式中为所有<p>标签设置的字体大小（30像素）。
css外链文件分析
p：这是一个标签选择器，选择了页面上的所有 <p> 标签。任何直接应用到 <p> 标签的样式都会影响页面中所有段落的外观。
border：这是一个属性，用于设置元素的边框。
1px：这是 border 属性的第一个值，定义了边框的宽度为1像素。
solid：这是 border 属性的第二个值，定义了边框的样式。solid 表示边框是实线。其他可能的值包括 dashed（虚线）、dotted（点线）。
