专题三：css.ppt

四、CSS的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护 总结 DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 DIV和SPAN都是容器标签，DIV是块级标签，可包含段落、标题等，SPAN是行级标签，不能包含段落、标题等，只能包含部分文字 01 专题三：层叠样式表 【本章内容】 3.1 回顾 3.2 DHTML 3.3 样式及其属性 3.4 样式分类 3.5 样式的混合使用 3.1节 回顾 代码阅读 TABLE width=200 border=1 align=center CAPTION align=bottom我的表格/CAPTION TR bgcolor=yellow TH1/TH TH2/TH /TR TR align=center TD rowspan=23/TD TD align=right4/TD /TR TR TD align=right5/TD /TR /TABLE 一、回顾2-2 要求密码文本框不超过10个字符，请补全HTML代码。 密码 INPUT type=“?” ?=“10” 下面有关单选按钮的HTML代码正确吗？INPUT type=radio name=radio1 value=FINPUT type=“radio” name=“radio2” value=“M”女 按钮分为哪三类，类型(type)分别是？ 下拉列表框中显示的超级女生是？ 最佳超级女生是 SELECT NAME =“myselect OPTION 1号/OPTION OPTION2号/OPTION OPTION selected3号/OPTION /SELECT 3.2节 DHTML 【本节内容】 一. DHTML 简介 二. DHTML 示例 一、 DHTML简介 DHTML 是制作动态 HTML 页面的技术！ DHTML = HTML 脚本语言 JavaScript + + 层叠样式表 CSS 指定一个网页的元素 决定元素的大小 颜色和位置 操纵网页的元素 一、 DHTML示例 闪烁文本 移动文本 消隐文本 3.3节 样式以及属性 【本节内容】 一. 什么是样式 二. 常用的样式属性 一、什么是样式 HTML HEAD TITLE设置属性/TITLE /HEAD BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P这个段落按默认样式显示 /BODY /HTML 样式规则 一、常用的样式属性 属 性 CSS名称 说 明 颜色 color 文本属性 font-size 字体大小 font-family 字体 text-align 文本对齐 边框属性 (用于表 单元素) border-style 边框样式 border-width 边框宽度 border-color 边框颜色 定位属性(position) top 顶部边距（上边距） left 左边距 width 宽度 height 高度 z-index z 轴索引号，用于层 3.4节 样式的分类 【本节内容】 一. 行内样式 二. 内嵌样式 三. 外部样式 一、行内样式 您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。 /*－－关键代码--*/ p剩余时间：成交结束BR 新旧程度：全新 BR 所 在 地：北京 BR 宝贝数量：5 件 BR 浏 览 量：220 次/p p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 /p 二、内嵌样式 内嵌样式-1 HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css P { font-size:20px; color:blue; text-align:center } /STYLE /HEAD BODY P我是段落 1/P P我是段落 2/P P我是段落 3/P P我们的样式绝对统一/P /BODY /HTML 选择器 用分号隔开 样式规则 样式表 所有的段落都采用