使用CSS样式表美化和布局网页.ppt
《使用CSS样式表美化和布局网页.ppt》由会员分享,可在线阅读,更多相关《使用CSS样式表美化和布局网页.ppt(41页珍藏版)》请在三一办公上搜索。
1、第6章使用CSS样式表美化和布局网页,教学内容:CSS层叠样式表,是在网页制作过程中普遍用到的技术,现在已经为大多数浏览器所支持,成为网页设计必不可少的工具之一。使用CSS技术,可以更轻松、有效地对页面的整体布局、字体、图像、颜色、背景和链接等元素实现更加精确的控制,完成许多使用HTML无法实现的任务。,学习目标熟悉CSS样式表掌握CSS的基本语法掌握添加CSS的方法掌握CSS属性的设置掌握CSS+DIV布局的四大核心,教学目标和基本要求_教学时间:本章共分_课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件:sample第6章练习文件:exercise第6章,6.1 了解CSS样式表
2、,CSS(Cascading Style Sheet,层叠样式表)是一种制作网页必不可少的技术之一,现在已经为大多数的浏览器所支持。实际上,CSS是一系列格式规格或样式的集合,主要用于控制页面的外观,是目前网页设计中的常用技术与手段。CSS具有强大的页面美化功能。通过CSS,可以控制许多仅使用HTML标记无法控制的属性,并能轻而易举地实现各种特效。,6.2 CSS的使用,在制作网页时,对文本的格式化是一件很烦琐的工作。利用CSS样式不仅可以控制一篇文档中的文本格式,而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字,将会使工作量大大减小。一些好的CSS样式表的建立,使我们可以更进
3、一步地对页面美化及文本格式进行精确定制。,6.2.1 CSS的基本语法CSS是一系列样式的集合,使用CSS可以有效地分离页面的内容与格式,从而减少网页设计的工作量。下面简要介绍CSS样式的基本语法和添加方法。CSS的语法结构仅由3部分组成,分别为选择符、样式属性和值。基本语法如下:选择符样式属性:取值;样式属性:取值;样式属性:取值;。,6.2.2 添加CSS的方法在HTML文档中添加CSS的方法主要有4种,1链接外部样式表2导入外部样式表3内部样式表4内嵌样式表。,6.3 设置CSS属性控制网页元素外观的CSS样式用来定义字体、颜色、边距和字间距等属性,可以使用Dreamweaver来对所有
4、的CSS属性进行设置。CSS属性被分为9大类:类型、背景、区块、方框、边框、列表、定位、扩展和过滤。,6.3.1 设置CSS类型属性在CSS样式定义对话框左侧的【分类】列表框中选择“类型”选项,在右侧可以设置CSS样式的类型参数。,6.3.2 设置CSS背景属性使用【CSS规则定义】对话框的“背景”类别可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。,6.3.3 设置区块样式使用【CSS规则定义】对话框的“区块”类别可以定义标签和属性的间距和对齐设置,对话框中左侧的【分类】列表中选择“区块”选项,在右侧可以设置相应的CSS样式。,6.3.4 设置方框样式使用【CSS规则定义】
5、对话框的“方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边,也可以使用【全部相同】设置将相同的设置应用于元素的所有边。CSS的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。,6.3.5 设置边框样式CSS的“边框”类别可以定义元素周围边框的设置。,6.3.6 设置列表样式CSS的“列表”类别为列表标签定义列表设置。,6.3.7 设置定位样式CSS的“定位”样式属性使用“层”首选参数中定义层的默认标签,将标签或所选文本块更改为新层。,6.3.8 设置扩展样式“扩展”样式属性包含两部分。,6.3.9 设置过渡
6、样式在过去的几年中,大多数都是使用JavaScript来实现过渡效果。使用CSS可以实现同样的过渡效果。过渡效果最明显的表现就是当用户把鼠标悬停在某个元素上时高亮它们,如链接、表格、表单域、按钮等。过渡可以给页面增加一种非常平滑的外观。,6.4使用CSS+Div布局的4大核心,CSSDiv是网站标准中常用的术语之一,CSS和Div的结构被越来越多的人采用,它的好处很多,可以使结构简洁,定位更灵活,CSS布局的最终目的是搭建完善的页面架构。下面介绍使用CSS+DIV布局的核心知识。,6.4.1 盒子模型如果想熟练掌握Div和CSS的布局方法,首先要对盒子模型有足够的了解。盒子模型是CSS布局网页
7、时非常重要的概念,只有很好地掌握了盒子模型以及其中每个元素的使用方法,才能真正的布局网页中各个元素的位置。所有页面中的元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。一个盒子由4个独立部分组成。,6.4.2 标准流标准流就是标签的排列方式,就像流水一样,排在前面的标签内容前面出现,排后面的标签内容后面出现。,6.4.3 浮动 float属性定义元素在哪个方向浮动。以往这个属性应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素会生成一个
8、块级框,而不论它本身是何种元素。float是相对定位的,它会随着浏览器的大小和分辨率的变化而改变。float浮动属性是元素定位中非常重要的属性,常常通过对div元素应用float浮动来进行定位。,6.4.4 定位position的原意为位置、状态或安置。在CSS布局中,position属性非常重要,很多特殊容器的定位必须用position来完成。position属性有4个值,分别是static、absolute、fixed和relative,static是默认值,代表无定位。定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 CSS 样式 美化 布局 网页
链接地址:https://www.31ppt.com/p-4938084.html