第八章CSS和框架应用讲解.ppt

第八章 CSS应用 框架应用 一、CSS介绍 CSS (Cascading Style Sheet，层叠样式表), 也叫级联样式表, 简称为样式表。 CSS的功能： 弥补HTML对网页格式化功能的不足，如段落间距，行距等。 字体的变化和大小 页面格式的动态改变 排版定位 CSS简单示例 常用的样式属性 行内样式 内部样式-1 内部样式-2 选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 内嵌样式-3 选择器示例 HEAD STYLE type=text/css P { font-family: System; font-size: 18px; color: blue; } .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } #info { color:red; font-size: 24px; } /STYLE /HEAD FORM P用户名INPUT name=“user type=text class=myinput/P P密 nbsp;码INPUT name=“pass type=password class=myinput /P PINPUT type=submit name=Submit value=登陆/P label id=info请输入用户名密码！/label /FORM 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 使用外部样式表 样式的混合使用 行内样式表、内部样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内部样式 某张网页内，部分内容”与众不同“，采用行内样式 CSS应用 1、新建css文件 定义Table的格式 2、引用CSS文件 3、部署、运行 二、框架介绍 HTML 框架集文档可在 Web 浏览器窗口中显示多个独立的可滚动区域，这些区域称为框架。框架集中的每个框架在 Web 浏览器窗口中它自己那部分区域内显示一个 HTML 文档。 使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。 使用将大大方便用户的操作方式以及形成清晰的页面风格。 使用框架能减轻服务器的负载。 框架应用展示 框架标签 框架应用 1、新建框架页面 Logo图片 2、新建各个子页面（top） 新建各个子页面（left） 新建各个子页面（left1） 3、部署、运行 点击“登陆1” 点击“注册1” 功能树效果展示（1） 功能树效果展示（2） * * HTML HEAD TITLE设置属性/TITLE /HEAD BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P这个段落按默认样式显示 /BODY /HTML 指定显示样式 样式规则 宽度 width z 轴索引号，用于层 z-index 高度 height 左边距 left 顶部边距（上边距） top 定位属性(position) 边框颜色 border-color 边框宽度 border-width 边框样式 border-style 边框属性 (用于表 单元素) 文本对齐 text-align 文本属性 字体 font-family 字体大小 font-size color 颜色 说 明 CSS名称 属 性 根据样式代码的位置，分为三类： 行内样式(Inline Style) 内部样式(Internal Style) 外部样式(External Style) 调用样式表 /*－－关键代码--*/ p剩余时间：成交结束BR 新旧程度：全新 BR 所 在 地：北京 BR 宝贝数量：5 件 BR 浏 览 量：220 次/p p style=color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 /p HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css P { font-size:20px; color:blue; text-align:center } /STY