《网页设计与制作教学课件》6bCSS样式表应用.pptVIP

2.5 div标签 CSS 布局的基本构造块是 div 标签，它是一个 HTML 标签，表示文档结构块。它可以把文档划分为多个有意义的区域或者块。因此，使用div可以实现网页的总体布局，并且是网页总体布局的首选。定义下图布局。 实例 课堂实验 完成实验work11，上传至FTP作业中相应教学班的work11文件夹 修饰网页元素样式 * 掌握一些常用的使用CSS样式的方法 掌握Div标签 本章学习要点： 主要内容 2.1　构造CSS规则　　2.2　基本CSS选择器　　　　2.3　在HTML中使用CSS的方法　　 2.4　复合选择器 2.5　div标签　　 2.2.1 标记选择器 2.2.2　类别选择器2.2.3　ID选择器 2.3.1　行内式　　2.3.2　内嵌式　　2.3.3　链接式　　2.3.4　导入式 2.4.1　交集选择器　2.4.2　并集选择器2.4.3　后代选择器 重难点 重点 CSS选择器的几种类型。 难点 在HTML中使用CSS，实现网页结构内容和表现形式的分离。 2.1　构造CSS规则 在介绍CSS之前，我们先思考生活中的一个例子： 张飞{ 身高 ：185cm; 体重 ：105kg; 性别 ：男; 性格 ：暴躁; 民族 ：汉; } 这个表实际上由三个要素组成的：姓名、属性和属性值。 2.1　构造CSS规则 CSS的作用：设置各个组成部分的表现形式 如果把上述表格换成描述网页上一个标题的属性表，可以设想应该大致如下： 2号标题{ 字体：“宋体”; 大小：15px; 颜色：红色; 装饰：下划线; } 2.1　构造CSS规则 在进一步，如果把上面的表格用英文写出来： h2{ font-family: “宋体”; font-size: 24px; color: red; text-decoration：underline; } 2.1　构造CSS规则 CSS的思想：首先指定对什么“对象”进行设置，然后指定对该对象的哪方面的“属性”进行设置，最后给出该值的“值”。 因此概括来说，CSS就是由三个基本部分：“对象”、“属性”和“值”组成 2.2　基本CSS选择器　 在CSS的三个组成部分中，“对象”是很重要的，它指定了 对哪些网页元素进行设置。 “对象”有一个专门的名字——选择器（seletor） 基本CSS选择器有三种：标签选择器、类别选择器、 ID选择器 2.2.1 标签选择器 实例 style h2{ font-size: 24px; /*字体大小*/ color: red; /*颜色*/ } / style 2.2.2　类别选择器 html head titleclass选择器/title style type=“text/css” .red{ font-size: 24px; /*字体大小*/ color: red; /*颜色*/ } .green{ font-size: 20px; /*字体大小*/ color: green; /*颜色*/ } /style /head body p class=“red”class选择器1/p p class=“green” class选择器2 /p h3 class=“green”h3同样适用/p /body /html 2.2.3　ID选择器 html head titleID选择器/title style