项目九 运用Div css样式（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目九 运用Div+CSS样式 > = = 任务一 了解Div+CSS = CSS CSS样式时层叠样式表的缩写，是一种用来表现HTML或XML等文件样式的计算机语言。网页设计最初是由许多的HTML标签来组成的，但是这些标签渐渐的不能满足所有网页的需求，CSS样式就这样诞生，它能弥补HTML的不足，使网页的创建和修改变得方便灵活。 CSS样式是对HTML语言的补充，是真正能做到表现与内容分离的一种样式设计语言，在网页中使用CSS样式，可以为网页上的元素添加许多特殊的效果和属性。 = 3 未使用CSS的网页 。 = 使用CSS的网页 。 = 内部样式表 在HTML网页内的CSS样式表叫做内部样式表，它们统一存放在网页的<head>和</head>标签之间，由<style>标签开始，</style>标签结尾。内部样式表只能对该页面进行CSS样式的设置，不能跨页面执行，因此使用范围较小，在大型网站的开发中很少使用。 = 外部样式表 外部样式表是独立的一个页面，将CSS样式表代码集中存放在一个文档中，当HTML网页中需要使用相应的样式时，只需要调用即可。这种方式能够实现CSS样式的使用最大化，调用时代码写在<head>和</head>标签之间，如下：<link rel="stylesheet" href="xxx.css" type="text/css" />。 = Div Div全称DIVision，它是一个标签，也是一个容器，专门用于存放网页中的元素，让这些元素能够进行布局设计。Div标签能够把一个网页分割成独立的、不同的部分，同一个Div标签中还能够嵌套Div标签，我们称作层次，所以Div我们也称它图层。 = 8 Div+CSS的优势 1．浏览器支持，使用Div+CSS布局的网页在不同的浏览器中显示的效果最为相近。 2．表现与结构分离，便于通过设计代码维护网页。 3．设计功能强大，能够对网页中的每一个元素精确控制。 4．继承性能好，代码的重复率低，利用率高。 = 9 盒子模型 = 10 自主练习 = 利用dreamweaver软件制作如下图所示的网页，使用Div布局方式。 【练习1】 利用dreamweaver软件制作如下图所示的网页，使用CSS样式设置页面。 【练习2】 任务二 Div+css的运用方法与技巧 = 选择器 标签 类 复合 全局 ID = 15 选择器 标签 一个HTML文档中有许多标签，例如<p>，<table>等。如果文档中的所有<p>都要使用同一个CSS样式，这是就要用标签选择器。 ID ID选择器和类选择器相似，不同的是，ID选择器只能运用一次。在网页中，一个ID选择器只能把其CSS样式指定给一个标签。 类 使不同的CSS样式应用于相同的标签就应使用类选择器，编写时要与相应的Div标签配合使用。类选择器是网页中最常用的选择器。 。 = 选择器 全局 作用于网页中的所有元素。 复合 标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。 。 = 自主练习 = 利用dreamweaver软件制作如下图所示的网页。 【练习1】 利用dreamweaver软件制作如下图所示的网页。 【练习2】 利用dreamweaver软件制作如下图所示的网页。 【练习3】 谢谢 = = $