韩顺平div+css笔记(全).doc

div+css详解 ◆ div+css的介绍 div是用于存放html元素，文字，图片，视频的元素 css 是层叠样式表，用于指定div中的内容的样式 原理图： div+css的快速体验案例： test.html： !DOCTYPE HTML PUBLIC -//w3c//DTD HTML 4.0 Transitional//EN html head titlediv+css入门案例/title link href=my.css type=text/css rel=stylesheet/ /head body div class=style1 table trtd1/tdtd2/tdtd3/tdtd4/tdtd5/td/tr trtd1/tdtd2/tdtd3/tdtd4/tdtd5/td/tr trtd1/tdtd2/tdtd3/tdtd4/tdtd5/td/tr trtd1/tdtd2/tdtd3/tdtd4/tdtd5/td/tr trtd1/tdtd2/tdtd3/tdtd4/tdtd5/td/tr /table /div /body /html my.css中指定： .style1{ width:300px; height:200px; border:1px solid red; margin:100px 0px 0px 200px; } .style1 table{ border:1px solid black; width:298px; height:190px; } .style1 table td{ border: 1px solid black; text-align:center; } span style=font-size:30px;color: blue;栏目一/spanbr/ 从使用span元素我们可以看到，css的基本语法 元素名 style=”属性名：属性值；属性名：属性值2；”/ 元素可以是html的任意元素： 属性名：属性值要参考 w3c组织给出的参考文档 ◆使用css可以统一网站的风格 css分类：外部css 内部css !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head titlecss1.html/title meta http-equiv=keywords content=杨萌,keyword2,keyword3 meta http-equiv=description content=this is my page meta http-equiv=content-type content=text/html; charset=UTF-8 !--link rel=stylesheet type=text/css href=./styles.css-- style type=text/css .style1{ } /style font-size: 20px; color:red; font-weight: bold; font-style: italic; /head body span class=style1栏目一/spanbr/ span class=style1栏目二/spanbr/ span class=style1栏目三/spanbr/ span class=style1栏目二/spanbr/ span class=style1栏目三/spanbr/ /body /html 使用滤镜 style type=text/css /*使用滤镜将图片变成黑白色*/ img { } /style /*使用滤镜*/ a:link img { filter:gray; } filter:gray; a:hover img{ } filter:; /style !--link rel=stylesheet type=text/css href=./styles.css-- /head body a href=#img src=images/1.jpg width=170px border=1//a a href=#img src=images/2.jpg width=170px border=1//a a href=#img src=images/3.jpg width=170px border=1//a a href=#img src=images/4.jpg width=170px border=1//a a href=#img src=images/5.jpg width=170px border=1//a a href=#img src=images/6.jpg width=170