div+css入门与实战演练

最新推荐文章于 2021-06-20 12:34:20 发布

ORACLE_FANS

最新推荐文章于 2021-06-20 12:34:20 发布

阅读量879

点赞数

分类专栏： HTML学习文章标签： JAVA

HTML学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

div+css入门与实战演练

韩顺平PHP课程之Lesson2

参考站点:蝉翼花园开源之祖 php开源大全

参考书籍：别具光芒

参考资料:css2.0.chm

本节要点:div+css基本特点、css使用的必要性、选择器使用与探讨、块元素和行内元素、css中的盒子模型、浮动float、定位

详细内容:

1.div+css引入(css Cascading Style Sheets 层叠样式表)
传统页面采用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

[css] view plain copy print ?

.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;
}

//demo1.html

[html] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> css体验 </title>
 </head>
 <!--引入css 可以使用url指定css-->
<link rel=stylesheet href="my.css" type="text/css"/>
 <body>
 <div class="style1"><!--class指定关联的css文件-->
  <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>

运行效果如下图所示:

2.网页设计的三个时期
要深刻理解div+css的优越性，不得不提网页设计的三个时期table(内容和样式),table+css(table布局，css指定外观),div+css(div放内容,css指定样式).
3.css使用的必要性
(1)css使用的基本语法
选择器{
属性1:属性值;
属性2:属性值;
...
}

(2)滤镜技术 filter

滤镜技术应用实例的代码及效果如下:

//demo3.html

[html] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <!--直接嵌入css文件(内联css文件)-->
 <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>

运行效果如下图所示:

4.css常用的四种选择器
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] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

//selector.css

[html] view plain copy print ?

/*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;
}

运行效果如下图所示:

5.选择器深入探讨
(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><span><input type="XXX">
常见的块元素有 <div><p>
块元素和行内元素的区别:
a.行内元素只占据内容的的宽度，块元素不管内容多少要占全行。
b.行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素。(和浏览器版本有关)
c.一些css属性对行内元素不生效，比如margin.left,right,width.建议尽可能使用块元素定位.(和浏览器版本有关)

注意：行内元素和块元素可以互换。使用dispaly:block/inline.

行内元素和块级元素对应用例的代码及效果如下:

//element.html

[html] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<link rel="stylesheet" type="text/css" href="element.css">
<body>
<span class="s1">span1</span>
<span class="s1">span2</span><input type="text"/>
<div class="s2">div1</div>
<div class="s2">div2</div><input type="text"/>
<p style="background-color:green">这是一个人段落</p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>
<link rel="stylesheet" type="text/css" href="element.css">
 <body>
  <span class="s1">span1</span>
  <span class="s1">span2</span><input type="text"/>
  <div class="s2">div1</div>
  <div class="s2">div2</div><input type="text"/>
  <p style="background-color:green">这是一个人段落</p>
 </body>
</html>

//element.css

[css] view plain copy print ?

.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的样式的当成行来显示*/
}

运行效果如下图所示:

7.标准流/非标准流
流:html元素在网页中显示的顺序；
标准流:在html文件中，写在前面的元素在前面显示，写在后面的元素后面显示.
非标准流:在html文件中，当某个元素脱离标准流，就处于非标准流.

8.css中的盒子模型

盒子模型的效果如下图优酷盒子模型所示:

盒子模型解剖图:

盒子模型对应的用例1及效果如下:

//box1.html

[html] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

//box1.css

[css] view plain copy print ?

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对应的代码及效果如下:

ORACLE_FANS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css入门与实战演练

div+css入门与实战演练韩顺平PHP课程之Lesson2参考站点:蝉翼花园开源之祖 php开源大全参考书籍：别具光芒参考资料:css2.0.chm本节要点:div+css基本特点、css使用的必要性、选择器使用与探讨、块元素和行内元素、css中的盒子模型、浮动float、定位详细内容:1.div+css引入(css Cascading Styl
复制链接

扫一扫