《韩顺平PHP149讲之div+css.doc》由会员分享，可在线阅读，更多相关《韩顺平PHP149讲之div+css.doc（25页珍藏版）》请在金锄头文库上搜索。
1、韩顺平PHP149讲之完整版本1！Div+css 是什么?Div+css 是一种目前比较流行的网页布局技术Div 来存放需要显示的数据(文字，图表.) , css 就是用来指定怎样显示， 从而做到数据和显示相互的效果原理图如下 ： 有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css 基本语法:选择器 属性: 属性值; 我们可以简单的这样理解div+css:div 是用于存放内容(文字,图片,元素)的容器。css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观. 快速入门案例(体验案例) Demo.htmlcss入门小案例My.css.style1 /*宽
2、度 */ width: 400px; height: 300px; /*一定要写一个分号*/ background-color:silver; border:1px solid red; margin-left:400px; margin-top:250px; padding-top:20px; padding-left:40px; l 网页设计的三个时期 table 网页设计 table+css 网页设计 div+css 网页设计 l css使用必要性1. 可以很好的统一网站的显示风格. css使用的基本语法选择器属性1: 属性值;属性2: 属性值;. Html文件:栏目一栏目二栏目三栏目四
3、栏目五 Css文件 ：/*.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 可以使用滤镜 a:link img filter:gray; a:hover img filter:; l Css中常用的四种选择器
4、1. 类选择器(class选择器) 基本使用.类选择器 属性名: 属性值; . 2. id选择器 基本使用#id选择器 属性名: 属性值; . 案例:/*id选择器的使用*/#id1 background-color:silver; font-size:40px; 3. html元素选择器 某个html元素 属性名:属性值; TableP Button /对html元素样式分类P:cls 需求人员(技术+行业背景)财务软件(php,c+)-用友 4. 通配符选择器 css 文件可以使用在各种文件(php,html,jsp,asp) * 案例: 再比如，我们希望所有的超链接 (1)默认样式是 黑
5、色，24px,没有下划线 (2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成 红色。这又该怎么实现呢? test.htmla: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; l 通配符选
6、取器该选择器可以用到所有的html元素,但是其优先权最低 * 属性名:属性值; . 四个选取器优先权Id选择器 class选择器 html选择器 通配符选则器 了解-细节-深入了解-应用项目 l 选择器的细节问题! 1. 父子选择器使用: /*父子选择器*/#id1 span color:red; font-style:italic; 上面选择器的含义是:在 id选择器为 id1 的子 元素 span的样式就是。xxxxx X xx #id1 span span color:green;#id1 span span a color:blue;通过上面总结: 父子选择器可以有多级(但是在实际开发
7、中不要过三层) 父子选择器有严格的层级关系 父子选择器不局限于什么类型选择器比如#id span span.s1 #id spandiv #id .s2 2. 一个元素可以同时有id选择器和class选择器案例:新闻一 3. 一个元素最多有一个id选择器，但是可以有多个类选择器 使用方法如下: Html部分新闻三 Css部分: /*给新闻三再配置一个class选择器*/.cls1 font-style:italic; text-decoration:underline; color:blue; background-color:silver; .s1 background-color:pink
8、; font-weight:bold; font-size:16px; color:black; 特别注意: 当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准 ！ 4. 我们可以把某个css文件中的 选择器共有的部分，独立出来写一份比如: .ad_stu width: 136px;height: 196px;background-color: #FC7E8C;margin: 5px 0 0 6px;float: left; /*广告2*/.ad_2 background: #7CF574;height: 196px;width: 457px;float: left;mar
9、gin: 5px 0 0 6px; /*房地产广告*/.ad_house background: #7CF574;height: 196px;width: 152px;float: left;margin: 5px 0 0 6px; /上面的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_househeight: 196px;float:left;margin: 5px 0 0 6px; 5. 说明css文件本身也会被
