css教案.docVIP

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);} 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 style type=text/css body{ font-family:黑体； font-size:12pt; line-height:16pt; color:#ffffff; background-color:#006699; } /style BODY 沈阳民族职业学校 /BODY 2.在body内的实现 BODY P style = color:aqua;font-Style:italic; 本段应用了内嵌样式BR P本段以默认样式显示。BR P您能发现本行中的 SPAN style = color:red不同之处/SPAN吗？ /BODY 3.在文件外的调用