第五单元 任务3 修饰页面元素（课件）-《计算机网络基础》（高等教育出版社）同步精品课堂

第五单元 任务3 修饰页面元素 计算机网络基础 同步精品课堂 高等教育出版社 任务一 CSS常见选择器及其特性 任务二 CSS基本属性 任务三 用Hbuilder制作舌尖上的杭州(实操) 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 一 1、学生能够理解并熟练运用 CSS 常见选择器（标签选择器、类选择器、ID 选择器、后代选择器等） 2、掌握 CSS 基本属性，如字体属性、文本属性、背景属性，并能根据需求灵活应用。 3、能够使用 Hbuilder 工具，综合运用 CSS 选择器和基本属性，完成 “舌尖上的杭州” 页面的制作。 教学重难点 二 教学重点： 各类 CSS 常见选择器的语法、特性及应用场景； CSS 基本属性的含义、取值及实际应用。 教学难点： 理解并正确处理 CSS 选择器的优先级，避免样式冲突 提问：“同学们，这些计算机在网络中是如何准确找到对方进行通信的呢？” 导入新课 三 哪张网页更好看？ 任务一 CSS常见选择器及其特性 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 问题一：什么是CSS选择器？ CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。 一般有5类基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 后代选择器：用于匹配所有指定元素的后代元素，根据父元素选择其后代元素，两者之间用空格分隔 伪类选择器：用于选择元素的特定状态或位置 新知讲授 一 📢 标签选择器 p { font-size: 12px; color: blue; } 属性 标签选择器 值 新知讲授 一 📢 类选择器 .intro { font-size: 12px; color: blue; } 属性 类名称 值 新知讲授 一 📢 ID选择器 #id { font-size: 12px; color: blue; } 属性 ID名称 值 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 提问：如何区分类选择器和ID选择器呢？ 新知讲授 一 📢 后代选择器 .food img { border-radius: 50px; color: blue; } 属性 父元素 后代元素 值 新知讲授 一 📢 后代选择器 新知讲授 一 📢 伪类选择器 a:link { font-size: 12px; color: blue; } 属性 选择器：伪类 值 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 选择器名称 格式 作用 标签选择器 ID 选择器 类选择器 后代选择器 伪类选择器 活动一：以小组为单位，填写表格各选择器的格式 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 选择器名称 格式 作用 标签选择器 直接使用 HTML 标签名，例如p、h1等 选中页面中所有该标签类型的元素，用于对某一类标签元素进行统一的样式设置。 ID 选择器 #id名称，例如#header 用于选中 HTML 文档中具有特定 id 属性值的唯一元素。 类选择器 .类名称，例如.highlight 通过为 HTML 元素定义 class 属性来选中一组元素。 后代选择器 选择器之间用空格分隔，例如div p 选择某元素的后代元素，即选择器中前面元素内部的所有符合后面选择器的元素。 伪类选择器 冒号（:）后跟伪类名称，例如a:hover、:first - child等 用于选择处于特定状态的元素，如链接的不同状态 活动一：以小组为单位，填写表格各选择器的格式 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 提问：这些选择器同时出现，谁的优先级更高呢？ 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 ID选择器＞标签选择器 内联样式>ID选择器>伪类选择器>类选择器>标签选择器 敲黑板（选择器优先级） 任务二 CSS基本属性 代码初体验：简单的标签如何构建出丰富的网页内容 代码初体验 二 图2在图1的基础上加了什么样式呢？ 文本样式、边框样式、背景样式等 1.7.2013 ‹#› 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 1.字体属性 ①font-family：设置文本的字体。可以指定多个字体名称. 例：font-family:"楷体"; /*定义字体为楷体*/ ②font-size：设置文本的字体大小。可以使用相对长度单位（如 px、em）或绝对长度单位（如 cm、mm）。 例：font-size: 60px; /*定义字体大小为60像素*/ ③font-weight：设置文本的字体粗细。常用值有 normal（正常）、bold（粗体）等。 例：font-weight: bold; /*定义字体粗细为加粗*/ ④ font-style：设置文本的字体样式。常用值有 normal（正常）、italic（斜体）等。 例：font-style: italic; /*定义字体样式为斜体*/ 文本样式 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 文本颜色 （2）文本颜色 color：设置文本的颜色，可以使用颜色名称、十六进制值、RGB 值或 RGBA 值等表示方法。 例 1：color: red; /*使用颜色名称定义字体颜色为红色*/ 例 2：color: #ff0000; /*使用十六进制定义字体颜色为红色*/ 例 3：color: rgb(/255, 0, 0); /*使用 RGB 值定义字体颜色为红色*/ 例 4：color：rgba(255, 0, 0, 0.5)/*使用 RGBA 值定义字体颜色，代表 50%不透明度的红色 表示形式 （3）文本装饰 text-decoration：设置文本的装饰效果，如 underline(下划线)、overline(上划线)、linethrough(删除线)等。 （4） 文本对齐 text-align：设置文本的水平对齐方式，如左对齐、右对齐、居中对齐、两端对齐等。 文本修饰 （5） 行高和间距 ① line-height：设置行高，可以使用无单位值、像素值、em 或百分比值。 ② letter-spacing：设置字符间距，用于调整字符之间的间距。 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 2.边框样式 （1） 边框样式 border-style：设置元素边框的样式，如 solid（实线）、double（双实线）、dashed（虚线）、dotted（点线）、none（无边框）等。 （2） 边框宽度 border-width：设置元素边框的宽度。可以使用预定义的关键字（如 thin、medium、thick）或具体的长度值。 （3） 边框颜色 border-color：设置元素边框的颜色。可以使用颜色名称、十六进制值、RGB 值或 RGBA值等表示方法。 （4） 圆角边框 border-radius：设置圆角边框，通过该属性可以轻松地在网页中实现圆角边框效果。 （5） 边框缩写属性 border：是 border-width、border-style 和 border-color 的缩写属性，可以同时设置边框的宽度、样式和颜色。 边框样式 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 3.背景样式 （1）background-color：设置元素的背景颜色。可以使用颜色名称、十六进制值、RGB值或 RGBA 值等表示方法。 （2）background-image：设置元素的背景图像。可以使用 URL 指定图像的位置。 （3）background-size：设置背景图像的大小，可以使用长度值、百分比或关键字来指定 背景图像的大小， 背景样式 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 3.背景样式 （4）background-repeat：设置背景图像平铺方式。 （5）background-position：设置背景图像在元素中的位置。可以使用方位名词或精确单位来指定背景图像的位置。 （6）background：是背景复合属性，可以同时设置 background-color、background-image、background-position 等多个背景属性。 属性值 说明 不同数值的单位 cm、mm、px（最常用） 预定义的关键字 水平方向：left、center、right 垂直方向：top、center、bottom 百分比 按背景图像与元素的指定点对齐 任务三 用Hbuilder制作舌尖上的杭州(实操) 新知讲授 三 活动四：制作主页 “舌尖上的杭州”index.html 实操练习 三 活动四：制作主页 “舌尖上的杭州” 步骤一：创建并引用外部样式表。将本节资源包“修饰页面元素”拷贝至“D:\”。打开 HBuilder，点击【文件】→【导入】→【从本地目录导入】，选择路径“D:\修饰页面元素”。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤二：在 HBuilder 中文件目录列表中单击选择项目“修饰页面元素”，在右键菜单中点击【新建】→【2.目录】，在弹出的对话框中输入目录名“CSS”。 步骤三：选择新创建的“CSS”目录，在右键菜单中点击【新建】→【7.css 文件】，命名“style.css”， 邮局员工只需学业务，不用学开车 新知讲授 三 步骤四：打开 index.html，在<head>标签中输入外部样式链接代码<link href="css/style.css" type="text/css" rel="stylesheet">，其中 href 属性设置了外部样式文件为“style.css”。 <head> <meta charset="utf-8"> <title>舌尖上的杭州</title> <link rel="stylesheet" href="css/style.css"> </head> 代码 邮局员工只需学业务，不用学开车 新知讲授 三 步骤五：在外部样式表中定义 CSS 样式。首页背景颜色为#eee，网页主体结构标签为<body>，且此标签只有一个，因此打开 style.css 文件，使用标签选择器设置背景颜色为#eee。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤六：使用标题 1 标签作为页头标题，因此可以在 style.css 中使用标签选择器，选择<h1>标签设置高度为 70px，文字居中，文字颜色为白色，文字大小为40px，行高为 70px，背景颜色为#f4af14， 邮局员工只需学业务，不用学开车 新知讲授 三 步骤七：葱包烩和定胜糕的内容为两个整体且具有相同的样式，因此可以为两段内容添加<p>标签，只需要为两个<p>标签定义相同的 CSS 规则即可。在 style.css 中以“.food”类选择器定义样式，然后在 index.html 中设置这两个<p>标签的 class属性值为“food”，即可共用这个 CSS 样式。设置 food 类文字居中，行高为 48px，边框大小 4px，边框类型为点状线，边框颜色#ffb389，圆角大小 50px，文字大小 24px 邮局员工只需学业务，不用学开车 新知讲授 三 步骤七代码展示 <p class="food"> <br> <img src="img/1.jpg" width="300" height="300"><br> 葱包烩:春饼包裹油条、葱和甜面酱烤制而成<br> <a href="files/cbhgs.html">葱包烩的故事</a><br> <a href="files/cbhzz.html">葱包烩的制作</a><br> </p> <p class="food"> <br> <img src="img/2.jpg" width="300" height="300"><br> 定胜糕：始于宋代，寓意高中<br> <a href="#">定胜糕的故事</a><br> <a href="#">定胜糕的制作</a><br> </p> index.html .food{ text-align: center; line-height: 48px; border-radius: 50px; font-size: 24px; } style.css 邮局员工只需学业务，不用学开车 新知讲授 三 步骤八：由于这两段 p 元素内结构完全相同，且父元素 p 元素已设置 class 属性值为“food”，因此使用后代选择器选择其中的 img 元素。在 style.css 中使用后代选择器定义图片圆角半径为 50 像素 步骤九：需要定义超链接样式。由于所有<a>标签都具有相同的样式，因此可以直接使用标签选择器对<a>标签进行 CSS 样式定义。在 style.css 中定义 CSS 样式，设置颜色为深灰色，字体加粗，取消下划线。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤十：为增强交互效果，当鼠标悬停在超链接上时，文字颜色变化为#1399d3，因此在style.css 中对超链接<a>标签使用“:hover”伪类选择器定义文字颜色 步骤十一：由于 style.css 将用于定义 index.html、cbhzz.html 和 cbhgs.html 三张网页的样式，这三张网页的页脚相同。因此在 index.html 以及其余两张网页中将页脚<p>标签的 class 属性值设置为“footer”，在 style.css 中以类名“footer”的类选择器定义CSS 样式为设置高度 50px，文字居中，行高 50px，背景颜色#f4af14，文字颜色白色，文字大小 20px。 新知讲授 三 活动五：制作“葱包烩的制作”页面 cbhzz.html 实操练习 三 活动五：制作“葱包烩的制作”页面 步骤一：在 cbhzz.html 中同样使用外部样式表“css/style.css”，因此和 index.html 一样，以<body>标签选择器定义的 CSS 样式，和以<h1>标签选择器定义的 CSS样式将应用于 cbhzz.html中的<body>标签和<h1>标签。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤二：在 cbhzz.html 中的<head>„„</head>中添加<style></style>，并在<style>标签中添加 type属性，属性值为 text/css。type="text/css"用于明确资源类型为 CSS，确保浏览器能够正确解析和应用这些样式信息。接着在<style></style>之间添加如下代码，使用标签选择器设置背景图像为 bg.png、背景图像不重复、位置居中和背景颜色#f7f6f2。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤三：cbhzz.html 中<video>标签设置了圆角边框，且<video>标签只有一处，因此可直接使用标签选择器进行属性设置。设置视频圆角半径为 20 像素， 步骤四：由于 video 元素没有对齐属性，因此需要在<video>标签外嵌套<p>标签，借助<p>标签的属性实现水平居中。且由于网页中<p>标签不止一处，因此为<p>标签设置 id 属性，属性值为 vid，在内部样式中设置水平居中。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤五：cbhzz.html 的<h3>标签有多个，但具有相同的 CSS 规则，因此可以在<head> 标签中使用内部样式对标签选择器 h3 定义 CSS 规则，设置文字颜色为#f4af14，文字大小 30px 步骤四：在 cbhzz.html 中，准备食材和操作步骤两段内容具有相同的样式。因此可以为两段内容添加<p>标签定义样式，对<p>标签设置相同的类名 step，在<head>标签中使用内部样式对 step 类设置文字大小为 18 像素，文字行高为 34 像素， 新知讲授 三 活动六：制作葱包烩故事分页 cbhgs.html 按以下要求完成。 （1）链接外部样式表 style.css，使得相同元素具有相同的样式定义。 （2）添加与 cbhzz.html 相同的背景颜色与背景图像。 （3）使用合适的选择器设置图片居中，并设置图片边框宽度 5 像素，实线，边框颜色#eee，圆角边框半径为 50 像素。 （4）对页面中的 7 个标题三应用与 cbhzz.html 相同的标题三样式。 （5）对历史故事中的所有<p>标签设置首行缩进 2 字符，文字大小 18 像素，行高 30像素。 （6）对底部返回链接段落设置与 cbhzz.html 相同的链接样式。 （7）对页脚部分段落设置与 cbhzz.html 和 index.html 相同的样式。 随堂练习 五 1、（单选）在CSS中，用于定义HTML元素样式的规则，其基本结构包含的两个核心部分的是（ ） A. 标签和属性 B. 选择器和声明块 C. 属性和值 D. 类和ID 答案：B 解析： 本题考查CSS规则的基本结构。CSS规则由选择器（Selector）和声明块（Declaration Block）两部分组成。选择器用于指定要应用样式的HTML元素；声明块则包含一个或多个声明，每个声明由属性和值组成。 随堂练习 五 2. （单选）以下CSS代码中，使用border缩写属性同时设置了边框的属性是（ ） border: 2px solid #333; A. 边框宽度（border-width） B. 边框样式（border-style） C. 边框颜色（border-color） D. 圆角半径（border-radius） 答案：ABC 解析： 本题考查border缩写属性的组成。border: 2px solid #333;是border-width、border-style和border-color三个属性的缩写，一次性设置了边框的宽度（2px）、样式（solid实线）和颜色（#333）。border-radius需要单独设置。 随堂练习 五 3、（判断）在CSS中，text-align: center;可以将元素中的文字水平居中对齐。( ) 答案：√ 解析：本题考查text-align属性的作用。text-align属性用于设置文本的水平对齐方式，其值center表示居中对齐。在参考资料中的CSS规则中就有使用text-align: center;来实现文字居中的示例。 课堂小结 六 谢谢 $