css字体文本和背景实训记录

在进行CSS（层叠样式表）字体文本和背景实训时，目标是掌握如何使用CSS来控制网页元素中的文本显示效果和背景样式。以下是一份详细的实训记录： ### 前期准备 1. **环境搭建**：确保使用的电脑已安装代码编辑器（如VS Code、Sublime Text等）和浏览器（Chrome、Firefox等），并掌握基本的HTML和CSS知识。 2. **基础HTML文件**：创建一个HTML文件，包含基本的结构用来放置CSS样式练习内容。 ### 实训目标 3. **字体样式**：练习设置字体族、大小、粗细、颜色、变体等属性。 4. **文本对齐与装饰**：学习如何在不同方向上对齐文本以及如何添加下划线、删除线等装饰。 5. **背景样式**：掌握如何设置背景颜色、图片、尺寸、位置和滚动行为。 ### 具体实践操作 #### 字体样式 1. **字体族**： ```css p { font-family: 'Arial', sans-serif; } ``` 2. **字体大小**： ```css h1 { font-size: 24px; } ``` 3. **字体粗细**： ```css strong { font-weight: bold; } ``` 4. **字体颜色**： ```css .highlight { color: #FF5733; } ``` 5. **文字阴影**： ```css .text-shadow { text-shadow: 2px 2px 4px #000000; } ``` #### 文本对齐与装饰 1. **文本对齐**：可以对齐文本到left, right, center和justify。 ```css .left-align { text-align: left; } ``` 2. **文本转换**：将文本转换为大写或小写。 ```css .uppercase { text-transform: uppercase; } ``` 3. **文本装饰**：添加装饰线条。 ```css .line-through { text-decoration: line-through; } ``` #### 背景样式 1. **背景颜色**： ```css .section { background-color: #f0f8ff; } ``` 2. **背景图片**： ```css .background-image { background-image: url('background.jpg'); } ``` 3. **背景尺寸，位置**： ```css .cover-background { background-size: cover; background-position: center; } ``` 4. **背景不随滚动移动**： ```css .fixed-background { background-attachment: fixed; } ``` ### 实训总结 1. **检索并修正错误**：在实践中不断检查浏览器预览的效果，并调整代码以修正任何问题或不符合预期的效果。 2. **文档化**：记录每一步的效果和取得的成果，这有助于之后回溯和改进。 3. **讨论评价**：与同学或同行讨论实训结果，以获取反馈和进一步建议。 这个实训记录旨在帮助你系统地学习和应用CSS字体文本和背景样式的相关知识，并在实践中增强技能。