web前端应用开发 任务1美化“鲜花介绍”页面 项目三 任务1美化“鲜花介绍”页面.docVIP

《前台页面设计》 PAGE PAGE 1 项目三 CSS层叠样式表 教学班级 课时 4 任课教师 仝素梅 授课课题 任务1美化“鲜花介绍”页面 教学目标： 掌握CSS样式表的基本语法和定义位置 掌握标签样式、类样式、ID样式的定义方法 掌握样式的编辑方法 掌握如何使用CSS样式美化页面 教学重点： 标签样式、类样式、ID样式的定义与应用 教学难点 1．使用CSS样式美化页面 教学环境 机房+电子教室 教学过程 教学内容 上节回顾 1、怎样使用HTML语言中的表格标记插入表格？ 2、当需要嵌套表格时，需要将嵌套的表格标记放置在什么标记内？ 新课讲授 任务1 美化“鲜花介绍”页面 一、“鲜花介绍”页面美化后的效果图 图3-1“鲜花介绍”页面美化后的效果图 二、CSS的概念 CSS是Cascading Style Sheet 的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。 CSS层叠样式表是一系列格式设置的规则，它们控制网页内容的外观。使用CSS设置页面格式时，可以将内容与表现形式分开。网页内容（即HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS规则驻留在另一个文件（外部样式表）或HTML文档的另一部分（通常为文件头部分）中。使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。 CSS允许控制HTML无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过CSS可以用像素为单位来设置字体大小，从而可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外，还可以使用CSS控制网页中块级别元素的格式和定位。例如，可以设置块级别元素的边距和边框，其他文本周围的浮动文本等。 CSS格式设置规则由选择器和声明两部分组成，其中选择器是标识格式元素的术语（如p、h1、类名或id），声明用于定义元素样式。 CSS的主要优点是提供了便利的更新功能。设计网站时，可以创建一个CSS样式表文件，然后将网站中的所有网页都连接到该样式表文件，这样很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。 二、 CSS样式表的基本语法 CSS的定义 是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。 语法：选择符 {属性：值;} // 属性和值要用冒号隔开： 例1: p { font-family: sans serif; //定义段落字体为sans serif text-align：center； //段落居中排列； color： red; //段落中的文字为红色 } 2. CSS样式表的定义形式 定义标签样式 重新定义HTML标记，不需要引用就可以显示效果，如示例1。 定义类样式 用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定义类的名称前面加一个点号；类样式定义好后，可以多次被引用。在HTML标记中需要用id=”类选择符”的方式来引用 例2：定义一个边框样式，边框粗细为1px，线型为双线，颜色为绿色 .img1 { border: 1px double #060; } 引用： img class=img1 src=images/a1.jpg width=290 height=210 / 定义ID样式 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。 例3：用ID样式完成例2的功能。 #img1 { border: 1px double #060; } 引用： img id=img1 src=images/a1.jpg width=290 height=210 / 定义复合样式（下节讲） 3．CSS样式表的定义位置 CSS样式定义在HEAD内 head style type=text/css !-- body{ margin:0; font-size: 12px; } .img1 { border: medium double #060; } #tab { background-color:#E1FCE1; } -- /style /head 说明： style type=text/css……/style 用来说明要定义的样式。“type“表示使用的是“text”中的CSS书写