lor: blue; }• 在HTML中,使用<link>标签引入CSS文件: <link rel="stylesheet" type="text/css" href="mystyle.css">• 在HTML中,使用<style>标签定义CSS样式: <style> body { background-color: blue; } </style>8引入CSS• 在外部样式表中定义CSS样式: body { background-color: blue; }• 在内部样式表中定义CSS样式: <style> body { background-color: blue; } </style>• 在内联样式中定义CSS样式: <body style="background-color:blue;">9CSS层叠规则• 当元素有多个样式定义时,会按照一定的规则进行层叠。• 优先级:内联样式>内部样式>外部样式>浏览器默认样式• 权重:ID选择符>类选择符>元素选择符• 继承:子元素会继承父元素的样式10CSS层叠规则• CSS的层叠规则确保了最终的样式结果是可预测的。• 但是,当样式冲突时,需要通过优先级和权重来决定最终生效的样式。11CSS基本语法• CSS由选择符和声明块组成。• 选择符用于指定HTML元素,声明块包含了要应用的样式规则。• 例如:h1 { color: red; }12CSS基本语法• 属性和属性值之间用冒号分隔,每个声明用分号结束。• 可以同时为一个元素指定多个样式:h1 { color: red; font-size: 24px; }13颜色和背景• CSS可以改变元素的文字颜色,背景颜色和背景图像。• 可以使用预定义的颜色名称,RGB值,十六进制值或者HSL值。• 例如: h1 { color: red; background-color: #f4f4f4; }14颜色和背景• 表示背景图片: body { background-image: url('background.jpg'); }• 可以控制背景图片的平铺方式,定位方式,是否固定等属性。15字体• CSS可以改变文字的字体,大小,样式和间距等属性。• 可以使用web安全字体,也可以使用@font-face来引入自定义字体。• 例如: body { font-family: Arial, sans-serif; font-size: 16px; }16字体• 还可以控制文字的粗细,斜体,下划线,删除线等属性。• 例如: h1 { font-weight: bold; text-decoration: underline; }17文本• CSS可以控制文字的对齐方式,行高,段落间距和文本装饰等属性。• 可以控制文本的溢出方式,截断方式和换行方式。• 例如: p { text-align: center; line-height: 1.5; }18文本• 还可以控制文字的大小写转换,转换方式和文字的阴影等属性。• 例如: h1 { text-transform: uppercase; text-shadow: 2px 2px 2px #000; }19总结• 本单元主要介绍了CSS的基础知识,包括CSS的引入方式,层叠规则,基本语法,颜色和背景,字体,文本等属性的使用。• 通过学习本单元,可以掌握CSS的基础知识,为进一步学习前端开发奠定基础。• 在实际开发中,CSS的应用非常广泛,掌握这些基础知识对于成为一名优秀的前端工程师至关重要。20课后作业• 理解并掌握CSS的基本语法• 尝试使用不同的颜色和背景样式装饰网页• 调整文字的字体,大小和样式,美化网页的文字效果• 尝试控制文本的对齐方式,行高和段落间距,调整网页的版面布局。21参考资料• 《CSS禅意花园》 • 《精通CSS》• 《CSS禅意花园2》 • 《CSS世界》• 《CSS禅意花园3》 • 《CSS揭秘》• 《CSS权威指南》 • 《CSS权威指南2》• 《CSS设计指南》 • 《CSS设计指南2》"