一、CSS 是什么CSS层叠样式表是一种用来美化 HTML 内容的样式表语言。简单来说HTML 负责网页的结构CSS 负责网页的“颜值”。htmlstyle p { color: red; } /style小贴士CSS 代码通常写在style标签内放在title标签下方。二、三种引入方式方式说明使用场景内部样式表写在style标签中学习或小项目外部样式表写在.css文件中用link引入实际开发行内样式写在标签的style属性中配合 JavaScripthtmllink relstylesheet hrefstyle.css div stylecolor: red;行内样式/div三、基础选择器选择器的作用是“找到要设置样式的标签”。选择器示例特点标签选择器p {}选中所有同名标签类选择器.red {}可多次复用最常用ID 选择器#header {}一个页面只能用一个通配符选择器* {}选中所有标签常用于清除默认样式css/* 类选择器示例 */ .red { color: red; }htmldiv classred红色文字/div推荐类名用英文多个单词用-连接如news-detail。四、画盒子宽高与背景色css.box { width: 100px; height: 100px; background-color: skyblue; }这是学习布局的基础帮你理解“盒子模型”的雏形。五、文字控制属性全览属性作用示例font-size字体大小16pxfont-weight字体粗细bold/700font-style是否倾斜italic/normalline-height行高1.5/30pxfont-family字体族微软雅黑, sans-seriftext-indent首行缩进2emtext-align水平对齐centertext-decoration修饰线underlinecolor文字颜色#ff0000 常用技巧行高垂直居中设置line-height等于盒子高度可实现单行文字垂直居中。复合属性fontcssfont: italic 700 30px/2 楷体;注意必须包含字号和字体否则不生效。六、颜色表示法方式示例场景关键字red测试十六进制#ff0000开发常用rgb/rgbargba(255,0,0,0.5)透明效果七、调试工具Chrome DevTools打开方式右键 → 检查 / 按F12作用实时查看和调试 CSS快速定位问题八、综合案例新闻详情页通过一个新闻详情页的案例练习使用类选择器设置字体、颜色、行高使用text-align控制内容对齐使用text-indent实现首行缩进总结今天的学习内容包括CSS 的三种引入方式四种基础选择器常用的文字控制属性颜色表示与调试工具使用掌握了这些你已经可以写出一个简单但美观的网页了下一节课我们将继续深入布局与盒模型。