5CSS定义网页样式.ppt

软件工程系——郑丽姣 网页设计基础与工具 CSS定义网页样式 主讲：郑丽姣 软件工程系 复习 创建基本表格(table、tr、td、th) 表格的边框和背景 合并表格单元格(rowspan、colspan) 表格的间距与边距(cellpadding、cellspacing) 框架结构标签frameset 框架集frameset的属性(rows、cols) 框架frame的属性(src、noresize、scrolling) 使用noframes标签 复习 表单标签form HTML表单控件 Input表单输入控件 文本域 密码框 单选按钮 多选按钮 教学导航 CSS概述 CSS选择器 格式化文本 列表样式 1CSS概述 CSS Cascading Style Sheets 层叠样式表 现在，很多HTML的属性已经被CSS取代，即不建议在HTML中使用格式化属性。 CSS的应用，将HTML中的格式化指令提取到一个独立的文件(CSS文件)，实现HTML的内容与HTML格式分离 1.1CSS的作用 CSS将网页的内容与格式化分离，其好处有： 网站开发人员可以轻松地更改网页的外观 网站的用户可以根据偏好选择喜欢的样式 便于开发，便于维护... 实现方式： 可以把css代码编写到HTML中 也可以创建一个CSS文件编写网页的样式，HTML中通过链接引用该CSS文件 应用：时下非常流行的DIV+CSS布局 例3.1 标签中含css代码 body h1关于是否在HTML网站中应用CSS的通知/h1 hr noshade=noshade / p 由于本公司网站规模扩大，HTML格式化难以维护又不够精准，公司经过商议，决定使用CSS控制网站的格式化内容，不懂CSS的可以参考如下的CSS教程： br / a href=/css/css_intro.asp target=_blankW3学院CSS教程/a /p h4 style=text-decoration:underline;font-style: italic 公司管理部br / xxxx年xx月xx日 /h4 /body 例3.2 含CSS的HTML网页 /*body和p元素的字体和字号的设置*/ body,p { font-family: Verdana, Geneva, sans-serif; font-size: 9pt; } /*标题h1元素的样式*/ h1 { font-family: 黑体, 微软雅黑; font-size: 18pt; font-style: italic; text-decoration: underline; } ………… 1.1CSS的作用 编写CSS文件的好处： 在HTML增加的新标签，可以自动应用CSS样式，避免了重复定义页面样式的设置 CSS文件可以应用于网站的所有文件，为整个网站提供一致的样式和外观 修改样式时，仅修改CSS文件的样式定义，一次性修改就能将所有引用到这个CSS文件的网页统一进行更新，提高了网站建设、维护效率 1.2CSS样式表的类型 外部样式表：使用Link标签引用CSS文件 仅在需要使用时，才会被浏览器加载并应用，减少对资源的占用，提高网页的性能，推荐使用 内嵌样式表：head标签直接使用Style标签定义一个页面内容样式表 行内样式表：在HTML元素内部(如h1、p、body等)使用style属性定义样式表 引用样式表：在样式表内部使用@import语句引用其他的样式表文件 例3.3 css类型演示 head titleCSS使用示例/title link href=Code3_2.css rel=stylesheet type=text/css / style type=text/css @import url(Code3_2.css); /*导入一个外部样式表文件*/ h1 { font-family: 黑体, 微软雅黑; font-size: 16pt; color: #090; font-style: normal; text-decoration:none; } /style /head 1.3CSS语句的语法 CSS语法简单，如下所示： 1.4使用Dreamweaver创建CSS CSS属性及属性值太多，无论是初学者还是经验丰富的网站开发人员都记住是有难度的，因此使用Dreamweaver创建CSS是有必要的 总结 CSS概述 全称：Cascading Style Sheets，层叠样式表 CSS作用 将HTML的内容与格式分离，便于维护、便于开发...