使用div+css已经有一年了,但是一只没有很是系统的去总结一些关于div+css的问题,前些日子在论坛上逛的时候,一位朋友提供的快速div+css的教程,是由现在lamp兄弟连的高洛峰老师主讲的,学习php的时候就学习的高老师的。因为视频不多,只有4个小时多一些,抽些时间看完之后,感觉很多东西恍然大悟。原来脑子里理解的div+css更加条理。下面抽些时间依次总结一下:

1.div+css是一种标准化网页布局;div-division,css就是层叠式样式表

2.css样式有四种:内联式样式表、嵌入式样式表、外部样式表、输入样式表

下面依次对以上四种分析:

(1)内联式样式表:即直接对html写样式。如下:

  1. <p style=“font-size:50px;color:red;backgroud-color:#000000;text-decoration:underline;”>sdfsf</p>  
  • 优点:随意,想对哪修改就修改哪
  • 弊端:如果有很多个就比较繁琐,需要每个都写css样式

(2)嵌入式样式表:直接在网页头中,写一个样式,然后在网页中调用即可。如下test.html文档:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />   
  5. <title>无标题文档</title>   
  6. <style type=“text/css” media=“screen,projection”>   
  7. p   
  8. {   
  9. font-size:50px;   
  10. color:red;   
  11. text-decoration:underline;   
  12. background:#000000;   
  13. }   
  14. </style>   
  15. <!–这样写在网页的head标签之间,body中所有p标签都有此定义–>   
  16. </head>   
  17.   
  18. <body>   
  19. <p>测试文字</p>   
  20. </body>   
  21. </html>  

 (3)外部样式表:在同网页同目录的文件夹中创建一个style.css文件,里面写入样式,然后在需要调用该样式的网页文件中通过link调用。如下:

style.css文件内容为:

  1. p      
  2. {      
  3. font-size:50px;      
  4. color:red;      
  5. text-decoration:underline;      
  6. background:#000000;      
  7. }     

 在test.html文件中通过link调用即可。如下:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />   
  5. <title>无标题文档</title>   
  6. <link rel=“stylesheet” type=“text/css” href=“style.css” />   
  7. <!–这样就将style.css文件导入到所需要调用的网页中–>   
  8. </head>   
  9.   
  10. <body>   
  11. <p>测试文字</p>   
  12. </body>   
  13. </html>  

 这样显示的效果同上面的嵌入式是一样的。

(4)输入样式表:采用@import 将一个css导入到另一个css或则html文档中去。假如我们再创建一个css.css文档,并且在其中写入一些样式,如果我们想在style.css文件中同时加载css.css文件,可以在style.css文件头部写上:

  1. @import url(css.css)  

这样就把当前目录下的css.css文件导入到style.css文件中。这样在网页中调用style.css时相当于调用了style.css和css.css两个css。

在html文档中,我们也可以不用link来进行调用,通过如下方式进行导入css样式:

  1. @import url(style.css)  

这样的效果上述外部样式表的效果是一样的。

3.样式规则的选择器:(以下为方便描述,均以嵌入样式表进行讲解。)

样式选择器共有6种,分别是:

  • html selector
  • class selector
  • id selector
  • 关联式样式选择器
  • 组合样式选择器
  • 伪元素样式选择器

下面我们通过例子来分析这6种样式选择器:

 (1)html selector:即在网页head标签中样式表花括号{}前写的标签,在网页中直接写这样标签就可以进行调用。如下:

 
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />   
  5. <title>无标题文档</title>   
  6. <style type=“text/css” media=“screen,projection”>   
  7. p{   
  8. font-size:50px;   
  9. color:red;   
  10. text-decoration:underline;   
  11. background:#000000;   
  12. }   
  13. div {   
  14. font-size:50px;   
  15. color:red;   
  16. text-decoration:underline;   
  17. background:#000000;   
  18. }   
  19. h1 {   
  20. font-size:50px;   
  21. color:red;   
  22. text-decoration:underline;   
  23. background:#000000;   
  24. }   
  25. </style>   
  26. <!–这样写在网页的head标签之间,body中所有p标签都有此定义–>   
  27. </head>   
  28.   
  29. <body>   
  30. <p>测试文字</p>   
  31. <div>测试文字2</div>   
  32. <h1>测试文字3</h1>   
  33. </body>   
  34. </html>  

 上述的花括号前的标签为 p、div、h1,在body中调用这些标签就是调用其花括号内的样式。这就是html选择器。

(2)class selector:如果同一个个标签的样式不同时,这个时候,我们采用类选择器,把相同的样式归为一类。如下:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />   
  5. <title>无标题文档</title>   
  6. <style type=“text/css” media=“screen,projection”>   
  7. p.one{   
  8. font-size:50px;   
  9. color:red;   
  10. text-decoration:underline;   
  11. background:#000000;   
  12. }   
  13. p.two {   
  14. font-size:40px;   
  15. color:red;   
  16. text-decoration:underline;   
  17. background:#000000;   
  18. }   
  19. p.three {   
  20. font-size:30px;   
  21. color:red;   
  22. text-decoration:underline;   
  23. background:#000000;   
  24. }   
  25. </style>   
  26. <!–这样写在网页的head标签之间,body中所有p标签都有此定义–>   
  27. </head>   
  28.   
  29. <body>   
  30. <!–采用class类来区分同一标签的不同样式–>   
  31. <p class=“one”>测试文字</p>   
  32. <p class=“two”>测试文字2</p>   
  33. <p class=“three”>测试文字3</p>   
  34. </body>   
  35. </html>  

 这样给p标签分了三类,调用时采用class调用类即可。这样就可以让页面上同一个标签显示的类不同。

那么如果div ,h1的类也和此相同 怎么办呢?我们可以采用如下方式来进行定义:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />   
  5. <title>无标题文档</title>   
  6. <style type=“text/css” media=“screen,projection”>   
  7. .one{   
  8. font-size:50px;   
  9. color:red;   
  10. text-decoration:underline;   
  11. background:#000000;   
  12. }   
  13. .two {   
  14. font-size:40px;   
  15. color:red;   
  16. text-decoration:underline;   
  17. background:#000000;   
  18. }   
  19. .three {   
  20. font-size:30px;   
  21. color:red;   
  22. text-decoration:underline;   
  23. background:#000000;   
  24. }   
  25. </style>   
  26. <!–这样写在网页的head标签之间,body中所有p标签都有此定义–>   
  27. </head>   
  28.   
  29. <body>   
  30. <!–采用class类来区分同一标签的不同样式–>   
  31. <p class=“one”>测试文字</p>   
  32. <div class=“two”>测试文字2</div>   
  33. <h1 class=“three”>测试文字3</h1>   
  34. </body>   
  35. </html>  

 把p去掉,直接采用.one .two .three来区分不同类显示的样式,在html中标签调用  采用class来调用类名即可。这样的好处就是可以很多标签都使用同一个类。

(3)id selector:我们知道在一个页面中id是不能重复的,也就是说在页面通过id调用样式表时也是不能重复的,为了实现一个样式只能被一种样式调用,我们采用id选择器,如下定义:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />   
  5. <title>无标题文档</title>   
  6. <style type=“text/css” media=“screen,projection”>   
  7. #one{   
  8. font-size:50px;   
  9. color:red;   
  10. text-decoration:underline;   
  11. background:#000000;   
  12. }   
  13. #two {   
  14. font-size:40px;   
  15. color:red;   
  16. text-decoration:underline;   
  17. background:#000000;   
  18. }   
  19. #three {   
  20. font-size:30px;   
  21. color:red;   
  22. text-decoration:underline;   
  23. background:#000000;   
  24. }   
  25. </style>   
  26. <!–这样写在网页的head标签之间,body中所有p标签都有此定义–>   
  27. </head>   
  28.   
  29. <body>   
  30. <!–采用class类来区分同一标签的不同样式–>   
  31. <p id=“one”>测试文字</p>   
  32. <div id=“two”>测试文字2</div>   
  33. <h1 id=“three”>测试文字3</h1>   
  34. </body>   
  35. </html>  

 采用#号来定义css样式,这样就可以定义该样式只能有一个元素来使用。

id和类的区别:如果这个样式只有一个标签来使用时,做成id,如果这个样式可能有多个标签使用,做成class
在css中尽量少用id,如果和js混用时,用id比较多。因为要和js配合使用。

 (4)关联样式选择器:比如有如下样式:

  1. p em{color:redfont-size:2cm; backgroud:green}  

 那么我们可以考虑一下这个样式是为p还是em写的呢?我们可以验证一下!如果是单独使用p或者em,我们可以发现,这个样式不起任何作用,必须得在p标签内套用em标签,这样的样式才可以生效,如下效果才能生效:

  1. <p>   
  2. <em>测试文字</em>   
  3. </p>  

 反过来也是不能生效的。再比如样式写成:

  1. center p em{color:redfont-size:2cm; backgroud:green}  

 也必须得采用如下嵌套样式才能生效:

  1. <center>   
  2. <p>   
  3. <em>测试文字</em>   
  4. </p>   
  5. </center>  

 再扩展一下,css写成如下样式:

  1. .one  .two em{color:redfont-size:2cm; backgroud:green}  

 这样在调用时,必须写成如下嵌套才能让css生效:

  1. <center class=“one”>   
  2. <p class=“two”>   
  3. <em>测试文字</em>   
  4. </p>   
  5. </center>  

 最后一个例子,css写成如下:

  1. #one  .two em{color:redfont-size:2cm; backgroud:green}  

 调用时得写成如下嵌套:

  1. <center id=“one”>   
  2. <p class=“two”>   
  3. <em>测试文字</em>   
  4. </p>   
  5. </center>  

 (5)组合选择器:把多种标签用逗号分开,这样在调用时,花括号前的这些标签所显示的样式是相同的。如下css:

  1. p,div,a,h1,.one,#two {color:redfont-size:2cm; backgroud:green}  

 这样我们在调用时写成如下,最终显示的效果都是相同的。

  1. <p>4343</p>   
  2. <div> 3434</div>   
  3. <a > 34343</a>   
  4. <div class=“one” > 3434</div>   
  5. <div id=“two”> 3434</two>  

 (6)伪元素选择器:即同一个元素在不同情况下显示的样式不同。比如a标签,当与链接时,显示一种样式,当鼠标移过时,又显示一种样式,当点击之后,又是另外一种样式。如下定义a标签的css:

  1. a:link{   font-size:1cm;color:red} //有链接   
  2. a:hover{  fone-size:5cm; color:green} //鼠标移上去   
  3. a:visited { color:blue;} //访问过  

 调用时写成:

  1. <a herf=“http://www.baidu.com”> 百度</a>  

 这样实现的效果是:鼠标默认为红色   放上去变成5cm的绿色 访问过变成黄色。

css使用拓展:

伪元素和类选择器组合使用:

  1. a.one:link{}   
  2. a.two:hover{}   
  3. a.three:visited {}  

 这样就让a标签和类标签共用一个伪元素选择。

伪元素和组合选择器组合使用:

  1. div a.one:link{}   
  2. a.two:hover{}   
  3. a.three:visited {}  

这样关于css的样式和样式规则选择器就总结完了,接下来会在二中总结css常见的一些样式使用。

DIV+CSS回顾总结(一)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据