韩顺平div+css笔记.docxVIP

div+css详解一．div+css的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例： test.html：!DOCTYPE HTML PUBLIC -//w3c//DTD HTML 4.0 Transitional//ENhtmlheadtitle快速入门/titlelink href=my.css type=text/css rel=stylesheet//headbodydiv class=style1tabletrtd1/tdtd2/tdtd3/td/trtrtd1/tdtd2/tdtd3/td/trtrtd1/tdtd2/tdtd3/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元素来编写使用myeclipse来开发，因为myeclipse有提示功能span style=font-size:30px;color: blue;栏目一/spanbr/从使用span元素我们可以看到，css的基本语法元素名 style=”属性名：属性值；属性名：属性值2；”/元素可以是html的任意元素：属性名：属性值要参考 w3c组织给出的参考文档◆使用css可以统一网站的风格css分类：外部css 内部css!-- DOCTYPE文档类型用于指定 DTD(说明当前 这个html的版本)--DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhtml head titlecss1.html/title!-- 这个 keywords是给搜索引擎看-- meta http-equiv=keywords content=keyword1,keyword2,keyword3 meta http-equiv=description content=this is my page !-- 告诉浏览器文件是什么编码 -- meta http-equiv=content-type content=text/html; charset=UTF-8 !-- 引入css文件 -- !--link rel=stylesheet type=text/css href=./styles.css-- style type=text/css .style1{ font-size: 20; color: green; font-style: normal; font-weight: bold; } /style /head body span class=style1栏目一/span/br span class=style1栏目一/span /body/html使用滤镜style type=text/css/*使用滤镜将图片变成黑白色*/img {filter:gray;} /style/*使用滤镜*/a:link img {filter:gray; //默认的是灰色} a:hover img{ //鼠标悬浮，恢复颜色filter:;}/style!--link rel=stylesheet type=text/css href=./styles.css--/headbodya href=#img src=images/1.jpgwidth=170px border=1//a a href=#img src=images/2.jpgwidth=170px border=1//a /body二.css的4种选择器类选择器 id选择器 html元素选择器 通配符选择器1．类选择器的基本语法:.类选择器名{属性名:属性值;…}my.css文件.style1{font-size: 20px;font-weight: bold;background-color: purple;}select1.html文件linkrel=stylesheethref=my.csstype=text/css/link/headbodyspan class=style1栏目一/span span class=style1栏目二/span span class=style1栏目三/span sp