3-0 一叶知秋-从开发者工具认识样式_第1页
3-0 一叶知秋-从开发者工具认识样式_第2页
3-0 一叶知秋-从开发者工具认识样式_第3页
3-0 一叶知秋-从开发者工具认识样式_第4页
3-0 一叶知秋-从开发者工具认识样式_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

零号任务一叶知秋——从开发者工具认识样式汇报人：xxx时间：2026任务说明01本模块需要对模块1、模块2完成的页面进一步优化，在本任务中，需要根据一致性原则首先完成页面结构的优化和基础样式的添加，具体如下。 （1）检查并优化HTML文档结构，确保所有标签使用正确，嵌套合理，符合语义化标准。 （2）为页面中的关键元素添加合适的id和类名。 （3）使用元素选择器、类选择器和id选择器为页面元素添加基础样式。 （4）使用浏览器开发者工具的“元素”视图检查和验证样式是否正确应用。零号任务任务说明知识准备0201层叠样式表CSS02开发者工具目录1.CSS核心原理知识准备CSS是一种用于描述HTML或XML文档呈现方式的样式表语言，“多个样式可以应用到同一个元素上，而且有一定的优先级。CSS的规则主要由两个部分组成：①选择器（Selector）：选择器用于指定你想要设置样式的HTML元素，例如p选择所有段落，.class选择特定类，#id选择特定id的元素。②声明块（DeclarationBlock）：用花括号“{}”包围，包含一个或多个声明。每个声明都是一个“属性:值”对，用来定义元素的具体样式。属性和值之间用冒号“:”分隔，每个声明后面以分号“;”结束。示例：1.CSS核心原理知识准备CSS选择器是CSS规则的一部分，用于“选择”要应用样式的HTML元素。常见的CSS选择器如下：元素选择器：直接使用HTML标签名类选择器：使用点号（.）前缀ID选择器：使用井号(#)前缀属性选择器：根据元素的属性或属性值来选择元素伪类选择器：用于定义元素的特殊状态通用选择器：通用选择器“*”用于匹配页面中所有的元素，朝阳用来进行全局样式的初始化或重置p{ color:blue; }#mainTitle{ color:green; font-size:24px; text-align:center; }.read-more:hover{ background-color:#2c5ea3; }.highlight{ border:2pxsolidred;//添加一个2像素宽的红色实线边框 }[title]{ color:red; }*{box-sizing:border-box; margin:0; padding:0;}1.CSS核心原理知识准备思考浏览器会优先执行哪个选择器的样式？是什么机制决定了这种顺序？CSS继承是指某些样式属性会自动从父元素传递给子元素的机制。这使得我们可以在父元素上定义一些通用样式，而不必为每个子元素重复定义这些样式。【例】继承父级元素的颜色和字体样式这个样式不仅会应用到<div>元素，还会被<div>内的所有文本元素继承，除非这些元素有自己的特定样式覆盖。1.CSS核心原理知识准备层叠规则：当多个规则应用于同一个元素时，浏览器如何决定应用哪个规则1）CSS层叠顺序优先级从最低到最高的4个主要层次：2）当存在多个规则且优先级相同时，浏览器会按照以下顺序来决定应用哪个规则

规则的特异性（Specificity）：选择器越具体，优先级越高。

规则的出现顺序：如果两个规则具有相同的特异性，那么后出现的规则优先级高。浏览器默认样式：浏览器提供的默认样式普通样式表：开发者编写的普通样式表!important声明：带有!important声明的样式用户代理样式表：用户自定义的样式表1.CSS核心原理知识准备CSS优先级规则：用于确定多个可能应用于同一HTML元素的CSS规则中，选择器都有权重值，权重值越大，优先级越高，并且权重值会叠加，决定最终应用的样式。权重的计算是根据选择器的类型和数量来确定的。在同一类型的选择器中，选择器的数量越多，权重值越高。①当权重值相等时，后定义的样式表的优先级要高于先定义的样式表。②在同一组属性设置中标有!important规则的优先级最高。

内联样式表的权重值最高，值为1000id选择器的权重值为100类选择器、属性选择器和伪类的权值为10元素选择器的权重值为1通配符选择器的权重值为02.开发者工具知识准备“元素”面板浏览器开发者工具中的“元素”面板是前端开发中最常用的工具之一，它帮助开发者检查和修改页面的HTML代码和CSS代码DOM是HTML文档的一种表示方式。页面中每个部分（如标签、文本等）都是树的一个节点：

a)根节点：树的顶端是一个根节点，对应于<html>标签。它是整个HTML文档的起点，包含所有其他元素。

b)分支和子节点：从根节点开始，向下延伸出多个分支，每个分支代表一个子元素。

c)叶子节点：指没有任何子元素的节点，处于树结构的最底层。2.开发者工具知识准备“元素”面板浏览器开发者工具中的“元素”面板是前端开发中最常用的工具之一，它帮助开发者检查和修改页面的HTML代码和CSS代码③”元素”面板主要部分a)HTML结构视图：展示当前页面的DOM树结构，即页面上所有HTML元素的层次关系：查看元素、编辑元素、查找元素。b)CSS样式面板：显示选中元素所应用的所有CSS规则及其优先级。包含的功能有：查看样式、编辑样式、添加新样式、调试样式。c)计算样式：显示浏览器最终应用到选中元素上的所有CSS属性和值。包含的功能有：查看计算样式、调试样式冲突。2.开发者工具知识准备“控制台”面板是前端开发者进行调试和测试代码的重要工具。它不仅可以输出错误信息和警告，还允许开发者直接运行代码来测试功能、查询DOM节点、修改页面状态等，下面是该面板常见的用途。①查看错误和警告 “控制台”面板会显示代码执行过程中产生的错误和警告信息，这些信息对于找出代码中的bug非常有用。开发者可以通过错误信息了解问题的具体位置和出现原因，从而更快地解决问题。②DOM操作 DOM操作是指通过编程手段对页面元素进行创建、修改、删除等操作的过程。通过前面的内容我们知道，任何页面元素都可以看作一个节点。在“控制台”面板中，可以通过代码进行DOM操作，比如选择特定的元素、修改元素的内容或属性等。任务实现03任务实现01页面结构调整：打开模块1完成的页面并且在开发者工具中查看页面结构是否合理。此时会发现页面缺乏一些更具有语义性的标签。（1）整体布局控制 ①增加<main>标签包裹主要内容并添加类名main-content。 ②将原来的<h1>、<p>和<hr/>标签移动到<main>标签内部。 ③添加内容块到<main>标签内部。 （2）主要部分的分块 ①对“关于我们”“我们的使命”“加入我们”内容块使用<section>标签进行分块。 ②分别为每个部分添加类名section，便于后续样式化。 （3）页脚内容包裹 ①将<small>标签改为<p>标签，内容不变。 ②使用<footer>标签来包裹页脚内容（包含两个<p>标签）。02类名命名：给元素添加相关的类名便于分组处理，合理的类名设计能够提高代码的可维护性和可扩展性。层级关系标签类名<main>标签下的段落中<p>highlight-text在<main>标签内的第一个<section>标签中<div>gallery<ul>listactivity-list在<main>标签内的第一个<section>标签中的<div>标签内<img>gallery-image在<main>标签内的第一个<section>标签中的<ul>标签的每个<li>元素内每个<span>highlight-text在<main>标签内的第二个<section>标签中<p>highlight-text在<main>标签内的第三个<section>标签中<ul>listbene

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论