笔记(div+css)

Div+Css开山篇Div+css是什么？Div+css是一种目前比较流行的网页布局技术Div存放需要显示的数据（文字，图表），css就是用来指定怎样显示，从而做到数据和显示相互分离的效果原理图如下：我们可以简单的这样理解div+cssDiv是用于存放内容（文字、图片、元素）的容器。Css是用于指定放在Div中的内容如何显示，包括这些内容的位置和外观快速入门案例(体验案例)：Demo1.htmlhtmlheadtitlecss入门小案例/title!--引入我们的css--linkrel=stylesheettype=text/csshref=my.css//headbodydivclass=style1imgsrc=andy.jpg//div/body/htmlMy.css.style1{/*宽度*/width:400px;height:300px;/*一定要写一个分号*/background-color:silver;border:1pxsolidred;margin-left:400px;margin-top:250px;padding-top:20px;padding-left:40px;}♦网页设计的三个时期①table网页设计②table+css网页设计③div+css网页设计♦css使用必要Css使用的基本语法选择器｛属性1:属性值;属性2:属性值;｝Demo2.htmlhtml!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件--linkrel=stylesheettype=text/csshref=demo2.css/body!--span元素通常用于存放小块内容--spanclass=s1栏目一/spanbr/spanclass=s2栏目二/spanbr/spanclass=s3栏目三/spanbr/spanclass=s4栏目四/spanbr/spanclass=s5栏目五/span/body/htmlDemo2.css/*.s1用术语类选择器*/.s1{color:green;font-size:30px;}.s2{color:yellow;font-size:12px;}.s3{color:blue;font-style:italic;}.s4{color:green;font-weight:bold;}.s5{color:#A26161;}字体统一案例Demo2.htmlhtml!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件--linkrel=stylesheettype=text/csshref=demo2.css/body!--span元素通常用于存放小块内容--spanclass=s1栏目一/spanbr/spanclass=s1栏目二/spanbr/spanclass=s1栏目三/spanbr/spanclass=s1栏目四/spanbr/spanclass=s1栏目五/span/body/htmlDemo2.css/*.s1用术语类选择器*/.s1{color:blue;font-size:30px;font-style:italic;text-decoration:underline;}Css必要性2可以使用滤镜滤镜的使用内嵌代码：htmlhead!--如何把css直接嵌入到html文件（内联css）--styletype=text/cssa:linkimg{filter:gray;}a:hoverimg{filter:;}/style/headbodyahref=3imgsrc=jack.gif/aahref=3imgsrc=andy.jpg/aahref=3imgsrc=psue.jpg/a/body/html♦Css中常用的四种选择器：1.类选择器（class选择器）基本使用：类选择器{属性名:属性值;……}2.id选择器基本使用#id选择器{属性名:属性值;……}案例#id1{background-color:silver;font-size:40px;}3.html元素选择器某个html元素{属性名:属性值;……}案例/*html选择器*/body{color:orange;}4.通配符选择器♢css文件可以使用在各种文件（php，html，jsp，asp…）案例再比如，我们希望所有的超链接（1）默认样式是黑色，24px没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色，这有该怎么实现呢？[testhtml]核心代码a:link{color:black;text-decoration:none;font-size:24px;}a:hover{text-decoration:underline;font-size:40px;color:green;}a:visited{color:red;}/*对同一种html元素分类*/p.cls1{color:blue;font-size:30px;}p.cls2{color:red;font-size:20px;}♦通配符选择器该选择器可以用到所有的html元素，但是其优先权最低*{属性名:属性值;……}★四个选择器优先权Id选择器class选择器html选择器通配符选择器选择器的细节问题：1.父子选择器的使用/*父子选择器*/#id1span{color:red;font-style:italic;}#id1spanspan{color:green;}通过上面总结①父子选择器可以有多级（但是在实际开发中建议不要超过3层）②父子选择器有严格的层级关系③父子选择器不局限于什么类型的选择器比如#idspanspan.s1#idspandiv#id.s22.一个元素可以同时有id选择器和class选择器案例spanclass=s1id=news_specail新闻一/span3.一个元素最多有一个id选择器，但是可以有多个类选择器使用方法如下元素class=”类选择器1类选择器2”/案例Html部分代码spanclass=s1cls1新闻三/spanCss部分代码/*给新闻三再配置一个class选择器*/.cls1{font-style:italic;text-decoration:underline;}.s1{background-color:pink;font-weight:bold;font-size:16px;color:black;}特别注意，当两个类选择器发生冲突了，则以写字css文件中的后面那个类选择器为准！4.我们可以把某个css文件中的选择器共有的部分，独立出来写一份比如：/*案例：my.css*//*招生广告*/.ad_stu{width:136px;height:196px;background-color:#FC7E8C;margin:5px006px;float:left;}/*广告2*/.ad_2{background:#7CF574;height:196px;width:457px;float:left;margin:5px006px;}/*房地产广告*/.ad_house{background:#7CF574;height:196px;width:152px;float:left;margin:5px006px;}//上面的css可以写成.ad_stu{width:136px;background-color:#FC7E8C;float:left;}/*广告2*/.ad_2{background:#7CF574;width:457px;float:left;}/*房地产广告*/.ad_house{background:#7CF574;width:152px;float:left;}.ad_stu,.ad_2,.ad_house{height:196px;float:left;margin:5px006px;}5.说明css文件本身也会被浏览器从服务器下载到本地，才能显示效果。练习：♦行内元素和块元素案例：从案例我们看出，行内元素只占能显示自己内容的宽度，而且它不会占据整行。块元素它不管自己的内容有多少，会占据整行，而且会换行显示*常见的行内元素有aspaninputtype=”xxx”*常见块元素有divphtmlheadlinkrel=stylesheettype=text/csshref=element.css//headbodyspanclass=s1span1/spanspanclass=s1span2/spaninputtype=textname=username/spanclass=s1span3/spandivclass=s2div1/divdivclass=s2div2/divinputtype=textname=username/pstyle=background-color:silver这是一个段落/p/body/html♦行内元素和块元素可以转换使用Display:inline表示使用行内元素方式显示；Display:block表示使用块元素方式显示。♦Css文件之间的相互引用指令♦标准流和非标准流流：html元素在网页中显示的顺序.标准流：在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示.非标准流：在html文件中，当某个元素脱离了标准流，那么它就处于非标准流了♦css中的盒子模型盒子模型的示意图：盒子模型的经典案例代码Box1.html文件：!DOCTYPEHTMLPUBLTC-//W3c//DTDHTML4.01Transitional//EN盒子模型案例/titlelinkrel=stylesheettype=text/csshref=box1.css//headbodydivclass=div1imgsrc=mao.jpg//div/body/htmlBox1.css文件：body{/*border取3个值(1px表示边框宽度，solid表示实线，red表示颜色)*/border:1pxsolidred;width:600px;height:500px;/*如何让body自动居中*/margin:0auto;/*第一个用于上-下，第二个用于左-右。auto表示自动居中*/}/*盒子模型的概念：margin，padding，border，conten*/.div1{width:200px;height:200px;border:1pxsolidblue;/*margin-top:10px;margin-left:10px;*/margin:10px0010px;/*padding:10px0010px;*/}.div1img{width:100px;height:100px;border:1pxsolidblack;margin:10px0010px;}盒子模型的综合案例2分析思路基本结构divulliimgsrc=””//li/ul/divHtml文件：!DOCTYPEHTMLPUBLTC-//W3c//DTDHTML4.01Transitional//EN