div+css入门与实战演练
div+css入门与实战演练
韩顺平PHP课程之Lesson2
参考站点:蝉翼花园 开源之祖 php开源大全
参考书籍：别具光芒
参考资料:css2.0.chm
本节要点:div+css基本特点、css使用的必要性、选择器使用与探讨、块元素和行内元素、css中的盒子模型、浮动float、定位
详细内容:
传统页面采用table来布局，有一些缺点，表现在：
a.显示样式和数据绑定在一起
b.布局的时候，灵活度不高.
c.一个页面可能有大量的table元素，本来很简单的工作，可能很费劲,出现代码冗余。
d.增加带宽,比如减少新浪网一个页面的200字节,1个月可以减少200字节*2000000(访问量)*30(时间)带宽.
e.搜索引擎不喜欢表格布局
优点:
a.理解比较简单
b.不同的浏览器看到的效果一般是相同
c.显示数据还是很好的
为了解决table的以上缺点，引入了div+css.
div+css的基本思想:数据和样式分离。div用来存放需要显示的数据(文字、图表),css用来指定怎样显示,从而做到数据和显示相互的效果.css可以使用在各种文件如php、jsp、aps.
div+css页面布局体验用例代码及效果如下:
//my.css
- .style1
- {
- width:300px;/*指定宽度*/
- height:400px;/*要写分号*/
- background-color:silver;
- border:1px solid red;
- margin-left:200px;
- margin-top:100px;
- padding-left:20px;
- padding-top:10px;
- }
- .style1 table
- {
- border:1px solid blue;
- background-color:pink;
- }
.style1
{
width:300px;/*指定宽度*/
height:400px;/*要写分号*/
background-color:silver;
border:1px solid red;
margin-left:200px;
margin-top:100px;
padding-left:20px;
padding-top:10px;
}
.style1 table
{
border:1px solid blue;
background-color:pink;
}
- >
- <html>
- <head>
- <title> css体验 title>
- head>
- <link rel=stylesheet href="my.css" type="text/css"/>
- <body>
- <div class="style1">
- <img src="images/cartoon.gif"/>
- <table>
- <tr>
- <td>div中表格td>
- <td>div中表格td>
- tr>
- <tr>
- <td>div中表格td>
- <td>div中表格td>
- tr>
- table>
- div>
- body>
- html>
css体验
div中表格
div中表格
div中表格
div中表格
要深刻理解div+css的优越性，不得不提网页设计的三个时期table(内容和样式),table+css(table布局，css指定外观),div+css(div放内容,css指定样式).
3.css使用的必要性
(1)css使用的基本语法
选择器{
属性1:属性值;
属性2:属性值;
...
}
(2)滤镜技术 filter
滤镜技术应用实例的代码及效果如下:
//demo3.html
- >
- <html>
- <head>
- <style type="text/css">
- a:link img{
- filter:gray;//
- }
- a:hover img{
- filter:"";
- }
- style>
- <title> 滤镜技术title>
- head>
- <body>
- <a href="#"> <img src="images/cartoon2.gif" />a>
- <a href="#"><img src="images/cartoon3.gif"/>a>
- <a href="#"><img src="images/cartoon4.gif"/>a>
- <a href="#"><img src="images/cartoon5.gif"/>a>
- body>
- html>
滤镜技术
运行效果如下图所示:
a.类选择器 class
.类选择器{ /*注意前面的这个点 不可少*/
属性1:属性值;
属性2:属性值;
...
}
b.id选择器
#id选择器{
属性1:属性值;
属性2:属性值;
...
}
c.html元素选择器
某个html元素{
属性1:属性值;
属性2:属性值;
...
}
只要是html元素的一种即可以。
css解决p段落两种样式:
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:green;
font-size:20px;
}
其他的元素应用两种样式也可以此类推。
d.通配符选择器
*{
/*margin-top:0px;
margin-left:0px;*/
margin:10px 30px 40px 1px;
}
margin提供四个值，则将按上右下左的顺时针赋值。
margin提供一个值代表上右下左；如果是两个值(上下、左右)
四个选择器的优先级:id选择器>class选择器>html选择器>通配符选择器
ID选择器和class选择器的使用:ID选择器的复用性较低而优先级高，所以如果某个样式只是给某个指定html元素使用，则选择id选择器。如果一个样式是给多个html元素使用，则应当class选择器.
选择器理解对应用例的代码及效果如下:
//selector.html
- >
- <html>
- <head>
- <title>选择器使用title>
- head>
- <link rel="stylesheet" type="text/css" href="selector.css">
- <body>选择器的使用
- <span class="s1" id="news_special">新闻一span>
- <span class="s1">新闻二span>
- <span class="s1 cls1">新闻三span>
- <span class="s1">新闻四span>
- <span class="s1">新闻五span><br/><br/>
- <span id="id1">这是一则<span>非常<span><a href="http://www.baidu.com">连接到百度a>重要span>span>的新闻span><br/>
- <a href="http://www.baidu.com">连接到百度a>
- <p class="cls1">Hello world!p>
- <p class="cls2">Hello world!p>
- body>
- html>
选择器使用
选择器的使用
新闻一
新闻二
新闻三
新闻四
新闻五
这是一则非常连接到百度重要的新闻
连接到百度
Hello world!
Hello world!
- /*class类选择器*/
- .s1{
- background-color:pink;
- font-weight:bold;
- font-size:16px;
- color:black;
- }
- /*id 选择器使用*/
- #id1{
- background-color:silver;
- font-size:40px;
- color:black;
- }
- /*html选择器使用 优先级低*/
- body{
- color:orange;
- }
- /*通配符选择器使用*/
- /*
- margin提供四个值，则将按上右下左的顺时针赋值。
- margin提供一个值代表上右下左；如果是两个值(上下、左右)*/
- *{
- /*margin-top:0px;
- margin-left:0px;*/
- margin:0px;
- padding:opx;
- color:red;
- }
- a:link
- {
- color:black;
- text-decoration:none;
- font-size:20px;
- }
- a:hover{
- color:blue;
- text-decoration:underline;
- font-size:30px;
- }
- a:visited{
- color:red;
- }
- p.cls1{
- color:blue;
- font-size:30px;
- }
- p.cls2{
- color:green;
- font-size:20px;
- }
- /*父子选择器*/
- #id1 span{
- color:red;
- text-decoration:italic;
- }
- #id1 span span{
- color:green;
- }
- #id1 span span a{
- color:blue;
- }
- #news_special{
- color:red;
- font-style:italic;
- }
- /*给新闻三再配置一个选择器*/
- .cls1{
- font-style:italic;
- text-decoration:underline;
- color:purple;
- background-color:gray;
- }
/*class类选择器*/
.s1{
background-color:pink;
font-weight:bold;
font-size:16px;
color:black;
}
/*id 选择器使用*/
#id1{
background-color:silver;
font-size:40px;
color:black;
}
/*html选择器使用 优先级低*/
body{
color:orange;
}
/*通配符选择器使用*/
/*
margin提供四个值，则将按上右下左的顺时针赋值。
margin提供一个值代表上右下左；如果是两个值(上下、左右)*/
*{
/*margin-top:0px;
margin-left:0px;*/
margin:0px;
padding:opx;
color:red;
}
a:link
{
color:black;
text-decoration:none;
font-size:20px;
}
a:hover{
color:blue;
text-decoration:underline;
font-size:30px;
}
a:visited{
color:red;
}
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:green;
font-size:20px;
}
/*父子选择器*/
#id1 span{
color:red;
text-decoration:italic;
}
#id1 span span{
color:green;
}
#id1 span span a{
color:blue;
}
#news_special{
color:red;
font-style:italic;
}
/*给新闻三再配置一个选择器*/
.cls1{
font-style:italic;
text-decoration:underline;
color:purple;
background-color:gray;
}(1)父子选择器:
a.父子选择器可以有多级，但是在实际开发中不要超过三层。
b.负责选择器有严格的层级要求。
c.选择器中用于分级的标记，必须使用已有的html元素标记.
d.父子选择器不局限于什么类型的选择器。可以形如#id1 span span,也可以是其他形式的组合，但要注意层级关系.
(2)一个元素可以同时拥有ID选择器和class选择器
(3)一个元素最多有一个id选择器，但是可以有多个类选择器。
多个class选择器用法:
<元素 class="类选择器1，类选择器2">
多个class选择器以在css文件中出现的顺序为准，应用样式时总是应用后出现的class选择器。
(4) 合并css文件 将多个css文件的公共部分单独写一份。css文件在用户浏览网页时也会由客户端向服务器请求css文件。例如:
.ad_stu,.ad_house,.ad_2{
height:196px;
float:left;
margin:5px 0px 0px 6px;
}
6.块元素和行内元素
行内元素它只占据能显示自身内容的宽度，而且他不会占据整行，而块元素不管自己的内容多少，会占据整行，会换行显示。
常见的行内元素有
常见的块元素有
块元素和行内元素的区别:
a.行内元素只占据内容的的宽度，块元素不管内容多少要占全行。
b.行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素。(和浏览器版本有关)
c.一些css属性对行内元素不生效，比如margin.left,right,width.建议尽可能使用块元素定位.(和浏览器版本有关)
注意：行内元素和块元素可以互换。使用dispaly:block/inline.
行内元素和块级元素对应用例的代码及效果如下:
//element.html
- >
- <html>
- <head>
- <title> New Document title>
- head>
- <link rel="stylesheet" type="text/css" href="element.css">
- <body>
- <span class="s1">span1span>
- <span class="s1">span2span><input type="text"/>
- <div class="s2">div1div>
- <div class="s2">div2div><input type="text"/>
- <p style="background-color:green">这是一个人段落p>
- body>
- html>
New Document
span1
span2
div1
div2
这是一个人段落
- .s1{
- background-color:pink;
- display:block;/*希望使用s1的样式的当成块来显示*/
- }
- .s2{
- background-color:gray;
- width:100px;
- display:inline;/*希望使用s1的样式的当成行来显示*/
- }
.s1{
background-color:pink;
display:block;/*希望使用s1的样式的当成块来显示*/
}
.s2{
background-color:gray;
width:100px;
display:inline;/*希望使用s1的样式的当成行来显示*/
}运行效果如下图所示:
流:html元素在网页中显示的顺序；
标准流:在html文件中，写在前面的元素在前面显示，写在后面的元素后面显示.
非标准流:在html文件中，当某个元素脱离标准流，就处于非标准流.
8.css中的盒子模型
盒子模型的效果如下图优酷盒子模型所示:
盒子模型解剖图:
盒子模型对应的用例1及效果如下:
//box1.html
- >
- <html>
- <head>
- <title> 盒子模型title>
- <link rel="stylesheet" type="text/css" href="box1.css">
- <body>
- <div class="div1">
- <img src="images/singer.jpg"/>
- <a href="#">孟庭苇a>
- div>
- body>
- html>
盒子模型
- body{
- border:1px solid red;
- width:300px;
- height:200px;
- /*自动居中 auto表示自动居中 不随浏览器大小而压缩*/
- margin:30px auto;
- }
- .div1{
- font-size:12px;
- text-align:center;
- border:1px solid blue;
- width:70px;
- height:80px;
- /*margin-left:5px;
- margin-top:5px;*/
- margin:5px 0px 0px 5px;
- /*padding:5px 0px 0px 5px;*/
- /*padding-top:35px;*//*会破坏盒子大小*/
- }
- /*img 本身可以作为盒子 margin太大会偏离div*/
- .div1 img{
- width:60px;
- height:60px;
- margin-top:5px;
- margin-left:5px;
- margin-bottom:1px;
- }
body{
border:1px solid red;
width:300px;
height:200px;
/*自动居中 auto表示自动居中 不随浏览器大小而压缩*/
margin:30px auto;
}
.div1{
font-size:12px;
text-align:center;
border:1px solid blue;
width:70px;
height:80px;
/*margin-left:5px;
margin-top:5px;*/
margin:5px 0px 0px 5px;
/*padding:5px 0px 0px 5px;*/
/*padding-top:35px;*//*会破坏盒子大小*/
}
/*img 本身可以作为盒子 margin太大会偏离div*/
.div1 img{
width:60px;
height:60px;
margin-top:5px;
margin-left:5px;
margin-bottom:1px;
}
盒子模型示例2对应的代码及效果如下: