第六章
层叠样式表
回顾 2-1
<TABLE width="200" border="1" align="center" >
<CAPTION align="bottom">我的表格</CAPTION>
<TR bgcolor="yellow">
<TH>1</TH>
<TH>2</TH>
</TR>
<TR align="center">
<TD rowspan="2">3</TD>
<TD align="right">4</TD>
</TR>
<TR>
<TD align="right">5</TD>
</TR>
</TABLE>
回顾 2-2
要求密码文本框不超过10个字符,请补全HTML代码。 密码 <INPUT type=“?” ?=“10” >
下面有关单选按钮的HTML代码正确吗? <INPUT type="radio" name="radio1" value="F"> <INPUT type=“radio” name=“radio2” value=“M”>女
按钮分为哪三类,类型(type)分别是?
下拉列表框中显示的超级女生是?
最佳超级女生是
<SELECT NAME =“myselect">
<OPTION >1号</OPTION>
<OPTION>2号</OPTION>
<OPTION selected>3号</OPTION>
</SELECT>
目标
掌握样式表的语法规则
样式表的分类:
行内样式表
内嵌样式表
外部样式表
掌握常用的样式
了解层<DIV>和<SPAN>标签
DHTML 简介
DHTML 的功能
DHTML 示例
什么是样式?
常用的样式属性
行内样式
内嵌样式-1
内嵌样式-2 选择器
根据选择器的不同,内嵌样式又分为:
HTML 选择器
CLASS 类选择器
ID 选择器
外部样式
根据样式文件与网页的关联方式又分为:
链接(LINK )外部样式表
导入(import)外部样式表
链接外部样式表
使用LINK(链接)标签 ,语法:
<HEAD>
<LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” >
</HEAD>
导入外部样式表
使用@import导入 ,语法:
<HEAD>
<STYLE TYPE="text/css">
@ import 样式表文件.css;
</STYLE>
</HEAD>
样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常
需要混合使用:
有关整个网站统一风格的样式代码,放置在独立的样式文件*.css
某些样式不同的页面,除了链接外部样式文件,还需定义内嵌样式
某张网页内,部分内容”与众不同“,采用行内样式
<DIV> 层标签
<SPAN> 标签
CSS 的优点
改变浏览器的默认显示风格
页面内容和显示样式分离
可以重用样式表
方便网站维护
总结
DHTML 是网页中 HTML、样式表和脚本的组合应用程序,增强网页的交互性
样式分为行内样式、内嵌样式、外部样式
样式表包括选择器和样式规则,选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类
<DIV>和<SPAN>都是容器标签,<DIV>是块级标签,可包含段落、标题等,<SPAN>是行级标签,不能包含段落、标题等,只能包含部分文字
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |