目录一. 实验目的二. 实验环境三. 核心知识点总结四. 案例一CSS三种引入方式完整代码逐行解释五. 案例二CSS三大基本选择器完整代码逐行解释六. 运行效果图七. 实验心得一. 实验目的1.掌握CSS三种引入方式行内式、内嵌式、外链式的写法与区别2.掌握CSS三大基础选择器标签选择器、ID选择器、类选择器的语法3.搞懂CSS优先级规则 后来居上覆盖原则4.能独立写代码、精准控制页面元素样式二. 实验环境- 操作系统Windows- 代码编辑器VS Code- 运行浏览器华为浏览器- 开发技术HTML CSS三. 核心知识点总结1.引入方式行内式单标签生效、内嵌式当前页面生效、外链式多页面复用2.基础选择器标签选择器、ID选择器、类选择器3.优先级行内样式 ID选择器 类选择器 标签选择器4.覆盖规则同优先级样式后写覆盖先写后来居上四. 案例一CSS三种引入方式完整代码如下:​ !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS基础三种引入方式/title !-- 第二种内嵌式 -- style /* 标签选择器直接用标签名选中某个元素 */ h3 { color: aqua; font-size: 15rpx; } /style !-- 第三种外链式允许相对路径绝对路径和URL-- link relstylesheet href./css/style.css /head body h2CSS基础/h2 !-- 第一种行内式 -- p stylecolor: red; font-size: 10rpx;第一种通过style属性直接在元素里配置样式/p h3第二种通过style标签和选择器里配置样式/h3 h4第三种外链式/h4 /body /html ​代码详细解释1. !DOCTYPE html 声明是HTML5网页2. html langen 网页开始语言英文3. meta charsetUTF-8 设置编码防止乱码4. meta nameviewport 适配手机显示5. title 网页标题6. style 写CSS样式作用整个页面7. h3 { color: aqua; } 所有h3文字变青色8. link 引入外部CSS文件9. p style... 给当前p标签单独设置样式10. 行内式通过标签 style 属性设置样式优先级最高、11. 内嵌式通过 style 标签统一样式作用当前页面12. 外链式通过 link 引入外部CSS文件适合项目开发五. 案例二CSS三大基本选择器完整代码如下​ !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style /* 1. 浏览器渲染css样式时先根据优先级渲染然后对相同优先级的样式按照“后来居上”原则渲染 2. 优先级 行内样式 id选择器样式 类选择器样式 标签选择器样式 无需遵循“后来居上”原则 */ /* 1.标签选择器选中所有标签名一样的元素 */ /* p { color: red; } */ /* 2.ID选择器根据元素唯一的id选中元素 */ /* #p1 { color: red; } */ /* #p3 { color: green; } */ /* 3.类选择器根据元素所属的类选中元素 */ /* 注意相同优先级的样式表遵从“后来居上”原则 */ #p1 { color: red; } .fruit { color: yellow; } .p3 { color: black; } /style /head body !-- 搜索引擎优化要求尽可能为每个元素配置合适的id和class -- p idp1 classfruit苹果/p p idp2 classfruit香蕉/p p idp3 classanimal猫咪/p /body /html ​代码详细解释1. 注释CSS优先级 后写覆盖先写2. 注释代码之前测试用的3. #p1 苹果变红ID优先级最高4. .fruit 香蕉变黄5. #p3 猫咪变黑6. 标签苹果同时设id/classid优先生效7. ID选择器优先级高于类选择器8. 类选择器统一控制一组元素9. 严格遵循优先级规则实现苹果红、香蕉黄、猫咪黑的效果六. 运行效果图1.案例一2.案例二打开网页后最终效果- 苹果红色ID选择器生效- 香蕉黄色类选择器生效- 猫咪黑色ID选择器生效七. 实验心得通过这次实验我掌握了相同优先级的样式写在后面的会覆盖前面的写代码要注意顺序以后写网页推荐用「外链式CSS」代码结构更清晰方便后期维护。