第章 使用CSS美化网页.ppt

认识CSS。 掌握CSS基本语法和用法。 熟悉CSS选择符、CSS属性使用。 操作Dreamweaver可视化操作CSS的方法。 使用CSS设计网页样式。 8.1 CSS基础 可以将网页样式和内容分离。 能以前所未有的能力控制页面的布局。 可以制作出体积更小、下载更快的网页。 可以更快、更容易地维护及更新大量的网页。 浏览器成为更友好的界面。 。 html style !-- p{ color:blue; font-size:12px; } -- /style body p文本信息/p /bdoy /html。 在网页中有四种方式可以把CSS样式应用到网页中： 在HTML标签中，把样式作为属性值直接定义在style属性中。 在style标记中集中定义样式，即定义内部样式表。 通过link标记导入外部CSS文件，即导入外部样式表。 通过@import命令导入外部CSS文件，即导入外部样式表。 1．CSS盒模型 2．CSS定位 position：定义对象定位的类型。 float和clear：float属性可设置对象浮动显示。 top、right、bottom和left：精确定义元素位置。 z-index：描述了元素的前后位置。 width 和height：定义盒模型对象的宽度高度。 min-height和max-height：定义盒模型对象的高度在最小高度和最大高度。 overflow：使用overflow属性剪切多余的区域。 clip：可以把元素区域剪切成各种形状。 line-height和vertical-align：可以定义元素行距、垂直对齐。 visibility:：控制元素的显示或隐藏。 1．长度单位 2．百分比单位 3．颜色单位 4．URL单位 1．环境 2．应用方式 3．选择符 @import用法 @import命令 + 样式表文件的URL地址 + 设备类型 可以多个设备共用一个样式表，设备类型之间用,分割符分开。 @media用法 把设备类型放在前面，后面跟该设备专用的样式，CSS基本语法一样。也可以在link标记中声明一个设备类型，语法格式如下： link rel=stylesheet type=text/css media=print href=style.css 8.2 用Dreamweaver定义CSS样式