AI 时代，快速学习是必备的能力。
CSS 其实没那么难，我将通过三节课让大家对CSS有大概的了解，我将其分为：
入门-熟练-精通。
这一节课是入门。
简介
在这节课中，我们将探索CSS的基本原则，了解如何使用它来美化网页。我们会从最基础的语法和属性开始，然后逐步学习如何使用CSS来控制文本格式、颜色、布局和介绍盒模型的概念。
CSS的作用和重要性
CSS，即Cascading Style Sheets，是定义网页外观和格式的语言。CSS使开发者能够控制网页的布局、颜色、字体和更多元素，而不需要改动HTML代码。这意味着可以轻松更改网站的设计而不影响其内容。
作用：CSS提升了网站的可维护性，并允许网站在不同的设备和屏幕尺寸上保持一致性和可访问性。
CSS语法结构
CSS的基本组成包括选择器（Selector）和一组声明（Declaration）。选择器指定了我们想要样式化的HTML元素，而声明则定义了如何样式化这些元素。声明又由属性（Property）和值（Value）组成。
选择器
选择器是CSS规则的一部分，它定义了哪些HTML元素会被你写的CSS样式所影响。它们可以是HTML标签名、类名、ID，或者更复杂的选择器。
/* 标签选择器 */ h1 { color: red; } /* 类选择器 */ .box { border: 1px solid black; } /* ID选择器 */ #unique-element { background-color: blue; }
属性和值
属性是你想要设置的样式的名称，例如字体大小、宽度、背景颜色等，而值就是你想要应用到属性上的具体设置。
/* 属性：值 */ p { font-size: 16px; /* 文字大小属性设置为16像素 */ color: green; /* 文字颜色属性设置为绿色 */ }
实现简单的文本格式化
对文本进行格式化是CSS的基本应用之一，主要包括字体、颜色、大小、行高等。
字体
font-family属性定义了文本采用的字体。你可以指定一个或多个字体，以逗号分隔。
作用：选择合适的字体可以提高网站的可读性，同时也能够传达品牌风格。
/* 设置字体 */ p { font-family: 'Helvetica', 'Arial', sans-serif; }
颜色
color属性用来定义文本的颜色。颜色可以用名称、十六进制代码、RGB、RGBA、HSL或HSLA值来指定。
作用：颜色不仅能增强网站的美观，还能用于突出重要内容或分类信息。
/* 设置文本颜色为深蓝色 */ p { color: #00008b; /* 十六进制颜色 */ }
大小
font-size属性用于改变文本的大小。可以使用不同的单位，如像素(px)、点(pt)、百分比(%)、em或rem等。
作用：通过调整不同元素的字号，你可以创建一个清晰的信息层次结构。
/* 设置字号为18像素 */ p { font-size: 18px; }
行高
line-height属性可以改变文本的行高，这对于改善文本的可读性和页面的美观度非常重要。
作用：适当的行高让文本更易阅读，尤其是在大段落或报道式文章中。
/* 设置行高为字体大小的1.5倍 */ p { line-height: 1.5; }
盒模型的基础
CSS盒模型是网页布局的基础，描述了如何将元素渲染成盒子，并围绕其中的内容排列空间。
边距（Margin）
边距是元素与其他元素的外部空间，它可以是固定的或者相对的大小。
作用：边距用来创建元素之间的空间，避免元素挤在一起。
/* 设置元素的上下左右边距 */ .box { margin: 10px 15px 10px 15px; /* 顺时针从顶部开始 */ }
边框（Border）
边框是元素内容周围的线，它可以有不同的宽度、样式和颜色。
作用：边框可以用来高亮信息，如表格、图片或界面中的互动元素。
/* 设置黑色实线边框 */ .box { border: 1px solid black; }
填充（Padding）
填充是内容与边框之间的空间，通过它可以控制元素内部的空间感。
作用：合适的填充可以增强内容的呈现，使得设计看起来更加舒适和专业。
/* 设置上下左右的填充 */ .box { padding: 20px; /* 四面均为20像素 */ }
内容（Content）
内容区域是包含实际HTML内容的部分，如文本、图片或其他媒体。
作用：盒模型的其余部分（边距、边框、填充）都是围绕内容区域来设计的。
简单布局技术
了解盒模型是创建布局的第一步。HTML元素基于它们的盒子属性如何显示，这会影响布局。
内联元素和块级元素
内联元素（如<span>）不会开始新的行并且只需要必要的宽度。块级元素（如<div>、<p>）会占据整行，即使内容没有填充满。
作用：理解内联和块级元素如何影响网页布局是CSS布局的基础。
/* 设置元素显示为内联或块级 */ .inline-element { display: inline; } .block-element { display: block; }
CSS的引入方式
CSS可以通过不同的方式添加到HTML中，包括内联、内部和外部。
内联样式
内联样式直接在HTML标签内使用style属性定义，通常用于快速测试。
作用：尽管内联样式用于特定情况，但它不利于样式的复用和维护。
<p style="color: red;">这是内联样式的示例。</p>
内部样式表
内部样式表位于HTML文档的<head>部分，使用<style>标签。
作用：适用于单个页面的独特样式，但如果样式需要在多个页面共享，则不是最佳选择。
<style> p { color: green; } </style>
外部样式表
外部样式表是将CSS样式保存在单独的.css文件中，并通过<link>标签引入HTML文档。
作用：这是最常用且最推荐的做法，因为它支持样式的复用，使得网站的维护变得更加简单。
<link rel="stylesheet" type="text/css" href="styles.css">
实践：创建一个简单的静态页面
通过创建一个简单的静态页面并添加基础的CSS样式，我们将练习所学的CSS知识。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS基础实践</title> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: white; text-align: center; padding: 10px 0; } .content { margin: 15px; } .box { border: 1px solid #333; padding: 10px; margin-top: 20px; } </style> </head> <body> <header> 欢迎来到CSS的世界 </header> <div class="content"> <p>CSS是网页设计的重要组成部分。</p> <div class="box"> 这是一个简单的盒子，展示了盒模型的使用。 </div> </div> </body> </html>
在这个实践中，我们设置了页面的基础样式，定义了一个页眉和内容区域，并使用了一个盒子来展示边框和内边距。这些步骤构成了使用CSS创建网页布局的基础，并对你理解CSS如何工作提供了直观的帮助。随着你继续学习，你将能够创建更复杂和响应式的布局。
