引入CSS
外部样式：
将CSS代码保存在独立的.css文件中，通过<link>标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>
<!-- styles.css文件内容 -->
.my-class {
color: green;
font-size: 22px;
padding: 20px;
}
内部样式：
在HTML文档的<head>中使用<style>标签包裹CSS代码。
<head>
<style>
.my-class {
color: blue;
font-size: 20px;
padding: 15px;
}
</style>
</head>
<body>
<div class="my-class">这是一个使用内部样式表的元素</div>
</body>
行内样式/内联样式：
CSS写在HTML标签的style属性里（配合JS使用）
<div style="color: red; font-size: 18px; padding: 10px;"> 这是一个使用内联样式的元素 </div>
优点
优先级最高，可覆盖其他样式
适合快速测试和调试
不需要额外的文件或标签
缺点
难以维护和更新
代码冗余，重复性高
不符合内容与表现分离的原则
选择器
基础选择器
<style>
<!--标签选择器,标签名-->
h1 { font-size: 2em; }
div { margin: 10px; }
<!--类选择器,.class属性值,实际开发中优先使用-->
.card { border-radius: 5px; }
<!--id选择器,#id-->
#footer { text-align: center; }
<!--通用选择器,通用选择器选择所有元素，以星号(*)表示。-->
* { margin: 0; padding: 0; }
* { box-sizing: border-box; }
<!--属性选择器,属性选择器根据元素的属性及属性值来选择元素。-->
[data-category] { border: 1px solid gray; }
[data-category="primary"] { border-left: 4px solid blue; }
[type="text"] { width: 100%; }
</style>
复合选择器
<!--后代选择器(空格),选择指定元素内部的所有后代元素（不限于直接子元素）。-->
.demo-area-1 p { color: #e74c3c; }
<!--这会将.demo-area-1内的所有p元素变为红色，无论嵌套多深。-->
<!--子元素选择器 (>),只选择指定元素的直接子元素（不包括更深层的后代）。-->
.demo-area-2 > p { background-color: #d4edda; }
<!--这只会将直接位于.demo-area-2内部的p元素添加背景色，不会影响更深层的p元素。-->
<!--相邻兄弟选择器 (+),选择紧接在另一元素后的元素，且二者有相同的父元素。-->
.demo-area-3 h3 + p { background-color: #cce5ff; }
这只会将紧跟在h3元素后面的第一个p元素添加背景色。
<!--通用兄弟选择器 (~),选择指定元素后的所有兄弟元素（不一定是紧邻的）。-->
.demo-area-4 h3 ~ p { background-color: #f8d7da; }
这会将h3元素后面的所有p元素添加背景色。
<!--交集选择器 (无符号连接),选择同时满足多个条件的元素。-->
p.special { background-color: #e2e3e5; }
<!--这只会选择同时是p元素且具有special类的元素。-->
<!--并集选择器 (,),同时选择多个元素，将样式应用于所有匹配的选择器。-->
.demo-area-6 h3, .demo-area-6 .highlight { color: #d35400; }
<!--这会将所有.demo-area-6内的h3元素和.highlight类元素的文字颜色设置为橙色。-->
<!--属性选择器组合,将属性选择器与其他选择器组合使用。-->
input[type="text"] { /* 选择type="text"的input元素 */ }
a[href^="https"] { /* 选择href以"https"开头的a元素 */ }
img[alt~="logo"] { /* 选择alt属性包含"logo"的img元素 */ }
<!--属性选择器可以与其他选择器组合，实现更精确的选择。-->
伪类选择器
<!--用于设置链接在不同状态下的样式，必须按照LVHA顺序定义（:link, :visited, :hover, :active）。-->
a:link { color: #3498db; } <!--点击前-->
a:visited { color: #9b59b6; } <!--点击后-->
a:hover { color: #e74c3c; text-decoration: underline; } <!--鼠标悬停在链接上时-->
a:active { color: #e67e22; font-weight: bold; } <!--鼠标点击时-->
结构化伪类选择器
p:first-child { }<!--查找第一个p元素-->
p:last-child { }<!--查找最后一个p元素-->
p:nth-child(3) { }<!--查找第3个p元素-->
伪元素选择器
<head>
<style>
h1::before {
content: "✦ ";
color: #e74c3c;
}
h1::after {
content: " ✦";
color: #e74c3c;
}
</style>
</head>
<body>
<h1>穗月</h1>
</body>
<!--最终显示效果"✦穗月✦"-->
文字控制属性
字体大小font-size
字体粗细font-weight
字体倾斜font-style
行高line-height
字体族font-family
字体复合属性font
文字缩进text-indent
文本对齐text-align
修饰线text-decoration
颜色color
Comments NOTHING