DHTML(Dynamic HTML) 称为动态HTML 它是 HTML CSS JAVASCRIPT的集成
CSS层叠样式表:(cascading style sheet) 将对布局 字体 颜色 背景和其它
图文效果实现更加精确的控制
javascript:它是一种script脚本语言
脚本语言:就是可以和HTML混合在一起使用的语言,可以用来在IE的客户端进行程序编制,从而控制浏览器等对象的操作
CSS层叠样式表 1996.12.17 css1
1998.5.12 css2
样式可以定义在HTML文档的标志(tag)里
也可作为外部附加文档 此是将用于整个页面 甚至整个站点
因此具有更好的易用性和扩展性
CSS功能: 弥补HTML对网页格式化功能的不足 比如段落间距,行间距
字体变化和大小
页面格式的动态更新
排版定位
CSS的类型
1.自定义CSS .bg{background-image:url(bg.gif);} <body class="bg">
2.重定义标记的CSS 即定义的CSS将只用于选择的标记
p{color:#000099;font-size:9pt}
3.CSS选择符 使用id作为属性 以保证文档具有唯一可用的值
它有4种样式 a: link 设定正常状态下连接文字的外观
a: visited 设定访问过的连接外观
a: hover设定鼠标放置在连接文字之上时的文字的外观
a: active 设定鼠标单击时连接的外观
a:link{color:#ff3366;font-family:"宋体"；text-decoration:none;}
a:hover{color:#ff6600;font-family:"宋体"；text- decoration:underline;}
a:visited{color:#339900;font-family:"宋体"；text-decoration:none;}
CSS实现的方式
1.在HEAD内的实现 以<style>开始</style>结束
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{font-size:x-large;color:red}
h2{font-size: large;color:blue}
p{font-size:x-large;color:green}
</style>
</HEAD>
<BODY>
<P>这会是一种很有趣的体验</P>
<h1>你好!!!</h1>
<h2>欢迎你!!!</h2>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
body{
font-family:"黑体"；
font-size:12pt;
line-height:16pt;
color:#ffffff;
background-color:#006699;
}
</style>
</HEAD>
<BODY>
HTML 是一种标记语言
使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件
</BODY>
</HTML>
line-height行的间距
2.在body内的实现
<HTML>
<HEAD><TITLE>设置属性</TITLE></HEAD>
<BODY>
<P style = "color:aqua;font-Style:italic;">
本段应用了内嵌样式<BR>
<P>本段以默认样式显示。<BR>
<P>您能发现本行中的
<SPAN style = "color:red">不同之处</SPAN>吗？
</BODY>
</HTML>
3.在文件外的调用
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<LINK REL=stylesheet HREF="public.css" Type="text/css" >
</HEAD>
<BODY>
HTML 是一种标记语言
使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件
</BODY>
</HTML>
CSS的属性和之值
字体属性：包括 字体族科 font-family
字体风格 font-style
字体加粗 font-weight
字体大小 font-size
1.字体族科 font-family
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{font-family:"隶书"}
.text{font-family:"宋体,仿宋_gb2312"}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
2.字体大小 font－size 单位pt 表示尺寸
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{font-size:14pt}
.text{font-size:9pt}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
3.字体风格 font-style
属性 normal 普通的文字
italic 斜体的文字
oblique 倾斜的文字
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{ font-style:italic}
.text{ font-style:oblique}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
4字体的加粗 font-weight
属性 值100－900
normal 普通的文字
bold 加粗
bolder 特粗
lighter 加细
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{ font-weight:900}
.text{ font-weight:bolder}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
文本属性
Letter-spacing 定义一个附加在字符之间的间隔数量
text-decoration 文本修饰属性
text-align 文本水平的对齐方式 左对齐 右对齐 居中 两端对齐
text-indent 文字的首行缩进
Line-height 行高的属性 行的间距
1.Letter-spacing 字母间隔属性 定义附加在字符之间的间隔数量 允许使用负数
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{ Letter-spacing:-10px}
.text{Letter-spacing:5px}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
2 text-decoration 文本修饰属性
属性 underline 下划线
overline 上划线
line-through 删除线
none 无任何修饰
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
a:link{ font-family:宋体;text-decoration:none}
a:visited{ font-family:宋体;text-decoration:none}
a:hover{ text-decoration:underline}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
<a href="http:www.163.com">网易</a>
</BODY>
</HTML>
3.text-align 文本水平的对齐方式 左对齐 右对齐 居中 两端对齐
left right center justify
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{text-align:center}
.text{text-align:justify}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
4.text-indent 文字的首行缩进
可用于块级元素 p h1等
定义该元素第一行可以接受的缩进的数量
该值必须是一个长度或一个百分比
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{text-indent:100pt}
.text{text-indent:24pt}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
Line-height 行高的属性 行的间距
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{text-indent:100pt}
.text{Line-height:24pt}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
颜色和背景属性
color 定义颜色
background-color 定义一个元素的背景颜色
background-image 定义一个元素的背景图象
background-repeat 决定一个指定的背景图象如何被重复
background-position 设定水平和垂直方向上的位置
1.color 定义颜色
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
h1{color:#336699}
.text{color:#ffcc00}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
2. background-color 定义一个元素的背景颜色
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
body{background-color :#336699}
h1{color:#ffffff}
.text{color:#ffcc00}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
3.background-image 定义一个元素的背景图象
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
body{background-image :url(2008.jpg)}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
4. background-repeat 决定一个指定的背景图象如何被重复
属性 repeat-x 图象横向重复
repeat-y 图象纵向重复
repeat 图象横向纵向重复
no-repeat 图象不重复
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
body{background-image :url(酷吧.gif);background-repeat:repeat-y}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
5. background-position 设定水平和垂直方向上的位置
属性 left 背景图象居左
right 背景图象居右
center 背景图象水平居中 垂直居中
top 背景图象上对齐
bottom 背景图象下对齐
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
body{background-image :url(酷吧.gif);
background-repeat:repeat-y;
background-position:right top}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
边框属性 ： 用于设置一个元素边框的宽度式样和颜色
边框属性 描述
border 边框
border-top 上边框
border-left 左边框
border-right 右边框
border-bottom 下边框
边框样式属性值 描述
none 无边框
dotted 边框由点组成
dash 边框由短线组成
solid 边框是实线
double 边框是双实线
groove 边框是带有立体感的沟槽
ridge 边框成脊形
inset 边框内嵌一个立体边框
outset 边框外嵌一个立体边框
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
p{
border-top:2px solid #990000;
border-right:2px solid #3399ff;
border-bottom:2px solid #00ff33;
border-left:2px solid #cc33ff;
}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
鼠标光标属性
鼠标光标属性 描述
hand 手
cross-hair 交叉十字
text 文本选择符号
wait WINDOWS的沙漏形状
default 默认的鼠标形状
help 带问号的鼠标
e-resize 向东的箭头
ne-resize 向东北的箭头
n-resize 向北的箭头
nw-resize 向西北的箭头
w-resize 向西的箭头
sw-resize 向西南的箭头
s-resize 向南的箭头
se-resize 向东南的箭头
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
body{
cursor:crosshair
}
img{ cursor:help}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<img src="酷吧.gif" align=left>
<p class="text">使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
</BODY>
</HTML>
定位属性 CSS提供两种定位方法
相对定位：是指让操作的元素在相对其它的位置上进行偏移
绝对定位：是指让操作的元素参照原始文档进行偏移
定位属性 描述
position absolute(绝对定位) relative相对定位
top 层距离定点纵坐标的距离
left 层距离定点横坐标的距离
width 层的宽度
height 层的高度
Z-index 决定层的先后顺序和覆盖关系 值高的覆盖值低的元素
Clip 限定只显示剪切出来的区域 为矩形
只要设定两个点即可 top left
bottom right
overflow 当层的内容超出层所能容纳的范围时：
visible 层的 大小 内容会显示出来
hidden 隐藏超出层大小的内容
scrol 不管内容是否超出层的范围 都添加滚动条
auto 只在内容超出层的范围时才显示滚动条
visibility 针对嵌套层的设置
inherit 子层继承父层的可见性
父层可见 子层也可见 父层不可见 子层也不可见
visible 无论父层可见与否子层都可见
hidden 无论父层可见与否子层都隐藏
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
.self{
position:absolute;
top:80px;
left:50px;
300px;
height:100px;
overflow:auto;
background-color:#336699;
color:#ffffff;
z-index:1;
visibility:visible;
}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<div class="self">使用 HTML 标记和元素，可以：
控制页面和内容的外观发布联机文档使用 HTML文档中插入的接检索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件
索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件</div>
</BODY>
</HTML>
区块属性 在格式化页面对象时，CSS将所有的对象都放置在一个容器里面
这个容器成为块
区块属性 描述
width 设定对象的宽度
height 设定对象的高度
float 让文字环绕在一个元素的四周
clear 指定在某一元素的某一边是否允许有环绕的文字
padding 决定了究竟在边框与内容之间应该插入多少空间距离
top bottom left right
设定上下左右的填充距离
margin 设置一个元素在4个方向上与IE窗口边界或上一级元素的边界距离
top bottom left right
设定上下左右的距离
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
.self{
position:absolute;
margin-top:20px;
margin-right:30px;
margin-bottom:20px;
margin-left:30px;
300px;
height:100px;
}
</style>
</HEAD>
<BODY>
<h1>HTML 是一种标记语言</h1>
<div class="self">使用 HTML 标记和元素，可以：
控制页面和内容的外观发布联机文档使用 HTML文档中插入的接检索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件
索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件</div>
</BODY>
</HTML>
列表属性
列表属性 描述
list-style-type 设定引导列表项目的符号类型
bullet 选择图象作为项目的引导符号
position 决定列表项目缩进的程度
outside 列表贴近左侧边框
inside 列表缩进
符号类型属性值
disc 实心圆
circle 空心圆
square 实心方块
decimal 在文本前加普通的阿拉伯数字
lower-roman 在文本前加小写罗马数字
upper-roman 在文本前加大写罗马数字
lower-alpha 在文本前加小写英文字母
upper-alpha 在文本前加大写英文字母
none 不显示任何项目符号和编号
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
ol{
list-style-type:upper-roman;
}
</style>
</HEAD>
<BODY>
<OL>
<LI>简介HTML
<LI>创建列表
</OL>
<LI>星期二
<OL>
<LI>创建表
<LI>插入图像
</OL>
</BODY>
</HTML>
滤镜属性 可以把可视化的滤镜和
转换效果添加到一个标准的HTML元素
1.alpha 滤镜---设置透明层次
{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
alpha:属性是把一个目标元素与背景混合 就是一个元素的透明度
opacity: 代表透明度水准
finishopacity:设置渐变的透明效果 范围1---100
style:指定透明区域的形状特征
0 统一形状
1 线形
2 放射状
3 长方形
startx和starty代表渐变透明效果开始的X和Y坐标
finishx和finishy代表渐变透明效果结束的X和Y坐标
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:alpha(opacity=30);
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
2.blur滤镜---模糊效果
语法：{filter:bur(add=add,direction=direction,strength=strength)}
add:它是一个参数值为 true false
指定图象是否被改变成印象派的模糊效果
derection:用来设置模糊的方向 0表示垂直向上 每45度为一个单位
默认值是向左270度
strength 它代表有多少像素的宽度将受到模糊影响
即模糊的强度 默认是5
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:blur(add=true,strength=30,direction=0);
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
3. flipH flipV滤镜－－－－水平垂直翻转
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:Flipv;
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
4.gray滤镜－－－灰度
作用就是把一张图片变成灰度图
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:gray;
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
5.invert滤镜－－－反转 显示底片的效果
作用是把对象的可视化属性全部翻转
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:invert;
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
6.Xray滤镜---x射线 x光片的效果
是让对象反映它的轮廓并把这些轮廓加亮 就是所谓的X光片
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:xray;
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
7.wave滤镜－－－波纹
语法：{filte:wave(add=add,freq=freq,lightstrength=strength
phase=phase,strength=strength)}
wave :属性把对象垂直的波形样式打乱 默认是TRUE（非0）
add: 表示是否把对象按照波形样式打乱
freq: 是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹
lightstrength:可以增强波纹的光影的效果
phase:设置正线弦波的偏移量
strength:表示振幅的大小
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
<style type="text/css">
img{
filter:wave(freq=2,lightstrength=50,phase=45,strength=10);
}
</style>
</HEAD>
<BODY>
<h2>图像</h2>
<img src=2008.jpg>
</BODY>
</HTML>