在前端开发中，CSS（层叠样式表）是控制网页样式和布局的核心技术。整理了关于 CSS 基础样式、文本样式、盒模型以及形状绘制的一些心得。以下是详细的学习笔记。
一、基础样式设置
1. 字体样式
字体样式是网页视觉呈现的重要组成部分，常用的 CSS 属性包括：
- font-size: 设置字体大小（如 20px）。
- font-weight: 设置字体粗细（如 bold 或数值 100-900）。
- font-family: 设置字体类型（如 “楷体”）。
- font-style: 设置字体样式（如 italic 斜体）。
- font-variant: 设置字母大小写（如 small-caps 小型大写字母）。
- color: 设置字体颜色（如 red 或 rgba(100, 85, 15, 0.877)）。
示例代码：
<style>#font {font-weight: bold;font-family: "楷体";font: bold italic 30px "楷体";color: red;}
</style>
<p id="font">示例文本</p>
2. 文本样式
文本样式可以进一步美化文字内容，常用的 CSS 属性包括：
- text-align: 文本对齐方式（如 center 居中）。
- text-indent: 首行缩进（如 2em）。
- text-decoration: 文本修饰（如 underline 下划线）。
- text-shadow: 文本阴影（如 5px 0px 1px gold）。
- text-transform: 文本大小写转换（如 capitalize 首字母大写）。
- word-spacing: 单词间距（如 10px）。
- letter-spacing: 字母间距（如 10px）。
- line-height: 行高（如 50px）。
示例代码：
<style>p {text-align: center;text-indent: 2em;text-decoration: underline;text-shadow: 5px 0px 1px gold;text-transform: capitalize;word-spacing: 10px;letter-spacing: 10px;line-height: 50px;}
</style>
<p>示例文本</p>
二、盒模型
盒模型是 CSS 布局的核心概念，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。
1. 边框设置
边框样式可以通过 border 属性或单独设置每一边的样式：
- border: 统一设置四边样式（如 10px solid rgb(202, 12, 12)）。
- border-top / border-bottom / border-left / border-right: 单独设置每一边的样式。
示例代码：
<style>.box {width: 100px;height: 100px;background-color: gold;border-top: 10px solid rgb(202, 12, 12);border-bottom: 5px dotted black;border-left: 30px double green;border-right: 50px groove blue;}
</style>
<div class="box">盒模型示例</div>
2. 内边距与外边距
内边距和外边距用于控制元素内部和外部的空间：
- padding: 设置内边距（如 50px 40px 30px）。
- margin: 设置外边距（如 100px auto 用于块元素居中）。
示例代码：
<style>.box {width: 100px;height: 100px;background-color: gold;padding: 50px 40px 30px;margin: 100px auto;}
</style>
<div class="box">盒模型示例</div>
3. 外边距合并与穿透
外边距合并是指相邻元素的外边距会合并为一个较大的值。子元素的外边距可能会穿透父元素，导致父元素也位移。
示例代码：
<style>.big {background-color: red;border: 1px solid #000;height: 200px;}.small {background-color: yellow;width: 50px;height: 50px;margin-top: 100px; /* 可能导致父元素位移 */}
</style>
<div class="big"><div class="small"></div>
</div>
三、形状绘制
CSS 可以通过边框和圆角属性绘制简单的几何形状。
1. 圆形与切角
- border-radius: 设置圆角（如 50% 创建圆形）。
- 单独设置某一边的圆角（如 border-top-left-radius）。
示例代码：
<style>.circle {height: 100px;width: 100px;background-color: red;border: 10px solid #000;border-top-left-radius: 50px;border-bottom-right-radius: 50px;}
</style>
<div class="circle"></div>
2. 三角形
通过设置边框的宽度和透明度，可以创建三角形：
示例代码：
<style>.tri {height: 0px;width: 0px;border-top: 100px solid black;border-right: 100px solid transparent;border-bottom: 100px solid transparent;border-left: 100px solid transparent;}
</style>
<div class="tri"></div>
四、外部样式表
外部样式表通过 标签引入，便于维护和复用样式：
示例代码：
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="styles.css">
外部样式表示例 (styles.css)：
/* 全局样式 */
* {color: aquamarine;
}/* 特定元素样式 */
#author {color: brown;
}
