韩顺平PHP149讲之div+css

韩顺平PHP149讲之完整版本1！Div+css是什么?Div+css是一种目前比较流行的网页布局技术Div来存放需要显示的数据(文字，图表..),css就是用来指定怎样显示，从而做到数据和显示相互的效果原理图如下：有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css基本语法:style选择器{属性:属性值;…}/style我们可以简单的这样理解div+css:div是用于存放内容(文字,图片,元素)的容器。css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.快速入门案例(体验案例)Demo.htmlhtmlheadtitlecss入门小案例/title!--引入我们的css--linkrel=stylesheettype=text/csshref=my.css//headbodydivclass=style1imgsrc=2.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使用必要性1.可以很好的统一网站的显示风格.css使用的基本语法选择器{属性1:属性值;属性2:属性值;….}Html文件:html!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件--linkrel=stylesheettype=text/csshref=demo2.css/body!--span元素通常用于存放小块内容--spanclass=s1栏目一/spanspanclass=s1栏目二/spanspanclass=s1栏目三/spanspanclass=s1栏目四/spanspanclass=s1栏目五/span/body/htmlCss文件：/*.s1用术语类选择器*/.s1{color:blue;font-size:30px;font-style:italic;text-decoration:underline;}.s2{color:yellow;font-size:12px;}.s3{color:blue;font-style:italic;}.s4{color:green;font-weight:bold;}.s5{color:#9C3131;}Css必要性2可以使用滤镜htmlhead!--如何把css直接嵌入到html文件(内联css)--styletype=text/cssa:linkimg{filter:gray;}a:hoverimg{filter:;}/style/headbodyahref=3imgsrc=2.jpg//aahref=3imgsrc=3.jpg//aahref=3imgsrc=4.jpg//aahref=3imgsrc=cat1.jpg//a/body/htmlCss中常用的四种选择器1.类选择器(class选择器)基本使用.类选择器{属性名:属性值;….}2.id选择器基本使用#id选择器{属性名:属性值;….}案例:/*id选择器的使用*/#id1{background-color:silver;font-size:40px;}3.html元素选择器某个html元素{属性名:属性值;…}Table{}P{}Button{}//对html元素样式分类P:cls{}pclass=”cls”/P需求人员(技术+行业背景)财务软件(php,c++)-用友[]4.通配符选择器☞css文件可以使用在各种文件(php,html,jsp,asp…)*{}案例:再比如，我们希望所有的超链接(1)默认样式是黑色，24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成红色。这又该怎么实现呢?[test.html]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;}☞上面选择器的含义是:在id选择器为id1的子元素span的样式就是。。。。divid=”id1”spanxxxxx/span/divXdivclass=”cls”spanxx/span/div#id1spanspan{color:green;}#id1spanspana{color:blue;}通过上面总结:①父子选择器可以有多级(但是在实际开发中不要过三层)②父子选择器有严格的层级关系③父子选择器不局限于什么类型选择器比如#idspanspan.s1#idspandiv#id.s22.一个元素可以同时有id选择器和class选择器案例:spanclass=s1id=news_specail新闻一/span3.一个元素最多有一个id选择器，但是可以有多个类选择器使用方法如下:元素class=”类选择器1类选择器2”/Html部分spanclass=cls1s1新闻三/spanCss部分:/*给新闻三再配置一个class选择器*/.cls1{font-style:italic;text-decoration:underline;color:blue;background-color:silver;}.s1{background-color:pink;font-weight:bold;font-size:16px;color:black;}特别注意:当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准！4.我们可以把某个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;}/*广告2*/.ad_2{background:#7CF574;width:457px;}/*房地产广告*/.ad_house{background:#7CF574;width:152px;}.ad_stu,.ad_2,.ad_house{height:196px;float:left;margin:5px006px;}5.说明css文件本身也会被浏览器从服务器下载到本地，才能显示效果.行内元素和块元素快速入门案例:从案例我们看出，行内元素它只占能显示自己内容的宽度，而且他不会占据整行块元素它不管自己的内容有多少，会占据整行，而且会换行显示常见的行内元素有aspaninputype=”xxx”常见块元素有divphtmlheadlinkrel=stylesheettype=text/csshref=element.css//headbodyspanclass=s1span1/spanspanclass=s1span2/spaninputtype=textname=username/divclass=s2div1/divdivclass=s2div2/divinputtype=textname=username/pstyle=background-color:silver这是一个段落/p/body/html行内元素和块元素可以转换使用Display:inline表示使用行内元素方式显示Display:block表示使用块元素方式显示Css文件之间的相互引用指令(mvc)标准流和非标准流流:html元素在网页中显示的顺序.标准流:在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示.非标准流：在html文件中，当某个元素脱离的标准流，那么它就处于非标准流Css中的盒子模型盒子模型的示意图:盒子模型的经典案例:Html文件:!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN盒子模型案例/titlelinkrel=stylesheettype=text/csshref=box1.css//headbodydivclass=div1imgsrc=aa.bmp//div/body/htmlCss文件：body{border:1pxsolidred;/*1px表示边框的宽度solid实线red表示颜色*/width:500px;height:500px;/*如果让body自动居中*/margin:0auto;/*第一个用于上－下，第二个用于左－右。auto表示自动居中*/}/*盒子模型的概念:margin,padding,bordercontent*/.div1{width:50px;height:52px;border:1pxsolidblue;/*margin-top:5px;margin-left:5px;*/margin:5px0px0px5px;/*padding-top:35px;*/}.div1img{width:40px;height:40px;margin-top:5px;margin-left:5px;}盒子模型的综合案例2分析:思路基本结构divulliimgsrc=””//li/ul/divHtml文件:!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN=stylesheettype=text/csshref=box2.css//headbody!--div在布局起到一个控制整个内容显示的位置--divclass=div1!--ul在布局中作用是可以控制显示内容多少--ulclas