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》"
我的内容管理
展开
