单元六 任务4 运用CSS（课件）-《计算机网络应用基础》（高教版）同步精品课堂

6.4 运用CSS 计算机网络应用基础 同步精品课堂 高等教育出版社 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 一 理解CSS样式的概念和作用，掌握CSS基本语法 掌握CSS样式的基本应用，能够对文本、背景等进行美化 了解DIV标记的概念、属性，掌握 DIV 常见的布局方式 教学重难点 二 CSS基本语法及在网页中插入CSS的三种方式 CSS样式的基本应用及DIV标记的使用及常见布局方式 三种插入CSS方式的区别及灵活运用 DIV布局中元素的定位和排列 上网查资料、和朋友视频聊天、玩网络游戏 导入新课 三 同学们对比这两个网页，发现它们有什么不同？哪个更吸引你？为什么？” 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 Cascading Style Sheet 级联样式表，表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定（定义网页各元素的样式）。 一、CSS样式 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 CSS由3个部分构成：选择器、属性和属性值。 ①选择器指定CSS作用于页面的对象，通常为标记选择器、类选择器和D选择器。 ②属性和属性值构成样式的声明。 ③多条声明之间用分号隔开，选择器的最后一条声明的分号可省略。 ④将相同的声明指定给多个选择器。 ⑤CSS中的注释文本放在“/*”和“*/”之间。 二、CSS基本语法 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 选择器：用于选择要应用样式的 HTML 元素。 1. 元素选择器：选择特定 HTML 元素 p { color: blue; /* 所有段落文本颜色为蓝色 */ } 2. 类选择器：选择具有特定类的元素，前面加点（.） .button { background-color: green; /* 类名为 button 的元素背景为绿色 */ } 3. ID 选择器：选择具有特定 ID 的元素，前面加井号（#） #header { font-size: 24px; /* ID 为 header 的元素字体大小为 24px */ } 优先级：ID 选择器>类选择器>元素选择器 二、CSS基本语法 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 1. 内嵌样式表 使用style属性引入CSS样式： <h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p> 2. 内部样式表 CSS代码写在 <head> 的 <style> 标签中： <style> h1{color: green; } </style> 3. 外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式： 三、在网页中插入CSS 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 1. 链接式（使用的最多） 　　    使用<link>标签链接外部样式表，并讲解各参数的含义，<link>标签必须放在<head>标签中： 2. 导入式 　　    使用@import导入外部样式表： 三、在网页中插入CSS 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 常见的字体与文本样式： 四、CSS样式的应用 设置字体大小： h1 { font-size: 32px; /* 一级标题字体大小为 32px */ } 设置文本颜色： p { color: red; /* 段落文本颜色为红色 */ } 设置文本对齐方式： h1 { text-align: center; /* 一级标题文本居中对齐 */ } 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 背景属性用于设置元素的背景样式： 1. 设置背景颜色 body { background-color: lightblue; /* 背景颜色为浅蓝色 */ } 四、CSS样式的应用 2. 设置背景图像 .header { background-image: url('header.jpg'); /* 背景图像 */ } 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 链接的四种状态： • a:link - 普通的、未被访问的链接 • a:visited - 用户已访问的链接 • a:hover - 鼠标指针位于链接的上方 • a:active - 链接被点击的时刻 四、CSS样式的应用 使用CSS，列表可以用图像可作列表项标记。 其中一种方法是使用​list-style-type​属性，具体设置如下： 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 四、CSS样式的应用 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 五、DIV标签 div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。 <!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title></title><style> .d1{ width:100px; height: 80px; border: #77ff00 3px solid; } #d2{ width: 300px; height: 140px; border: #77ff00 3px solid; } </style></head><body> <div class="d1">设置宽高</div> <div id="d2">百分比设置宽高</div> </body></html> 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 五、DIV标签 1、流式布局 标准流是默认的布局方式。元素会自上而下，自左而右排列，行内元素在一行显示，块级元素独占一行，碰到父级元素的边框换行。 2. 浮动布局 这类布局会使元素 "浮动" 起来。因此，使用这个属性的元素可以超脱标准流 的限制进行布局，而且浮动的元素不会再占据原来的位置。 float: left | right ; 3. 定位布局 可以利用坐标将元素精准的放在页面的某处。 position:static; 师生互动 五 实操1：运用所学的 CSS 知识，对一个简单的 HTML 网页中的文本（如字体、颜色、大小、对齐方式等）和背景（如背景颜色、背景图片等）进行美化。 实操2：每个小组合作制作一个简单的网页布局，包含页头、导航栏、主要内容区、侧边栏和页脚，要求运用 DIV 标记和所学的布局方式。 随堂练习 六 1.关于 CSS 基本语法的说法，正确的是（ ）​ A. 选择器和样式内容之间用逗号分隔​ B. 属性和值之间用分号分隔​ C. 多个属性之间用冒号分隔​ D. 基本格式为选择器 {属性：值；} 答案：D 解析：CSS 基本语法格式为选择器 {属性：值；}，其中选择器和样式内容之间用大括号分隔，属性和值之间用冒号连接，多个属性之间用分号分隔。 随堂练习 六 2.在网页中插入 CSS 的方式中，哪一种可以被多个网页共享，便于维护多个网页的统一样式（ ）​ A. 内联样式​ B. 内部样式表​ C. 外部样式表​ D. 以上三种都可以 答案：C 解析：内联样式仅对当前标签有效，内部样式表对当前网页的对应元素有效，而外部样式表可以被多个网页共享，便于维护多个网页的统一样式，所以答案选 C。 随堂练习 六 3. 请使用内联样式将段落文本 “这是一个内联样式测试” 设置为红色、20px 大小、居中对齐。 答案：<p style="color:red;font-size:20px;text-align:center;">这是一个内联样式测试</p>​ 解析：内联样式是在 HTML 标签中使用 style 属性来设置样式，这里通过 color 属性设置颜色为红色，font-size 属性设置字体大小为 20px，text-align 属性设置文本居中对齐，符合内联样式的使用方法。 随堂练习 六 4. 请写出一个外部样式表的引入代码，该外部样式表文件名为 “myStyle.css”。 答案：<link rel="stylesheet" href="myStyle.css">​ 解析：引入外部样式表使用<link>标签，其中 rel 属性指定当前文档与被链接文档之间的关系，这里设置为 “stylesheet” 表示是样式表，href 属性指定外部样式表文件的路径，此处文件名为 “myStyle.css”，所以引入代码如上。 课堂小结 七 谢谢 $$