html5 css教案,css教案.doc

css教案

DHTML(Dynamic HTML) 称为动态HTML 它是 HTML CSS JAVASCRIPT的集成

CSS层叠样式表:(cascading style sheet) 将对布局 字体 颜色 背景和其它图文效果实现更加精确的控制

javascript:它是一种script脚本语言

脚本语言:就是可以和HTML混合在一起使用的语言,可以用来在IE的客户端进行程序编制,从而控制浏览器等对象的操作

CSS层叠样式表

样式可以定义在HTML文档的标志(tag)里

也可作为外部附加文档 此是将用于整个页面 甚至整个站点

因此具有更好的易用性和扩展性

CSS功能: 弥补HTML对网页格式化功能的不足 比如段落间距,行间距

字体变化和大小

页面格式的动态更新

排版定位

CSS的类型

1.自定义CSS .bg{background-image:url(bg.gif);}

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内的实现 以结束

欢迎进入 HTML 世界

h1{font-size:x-large;color:red}

h2{font-size: large;color:blue}

p{font-size:x-large;color:green}

这会是一种很有趣的体验

你好!!!

欢迎你!!!

body{

font-family:"黑体"；

font-size:12pt;

line-height:16pt;

color:#ffffff;

background-color:#006699;

}

沈阳民族职业学校

2.在body内的实现

本段应用了内嵌样式

本段以默认样式显示。