HTML5入门

小强的HTML5移动开发之路（4）——CSS2和CSS3

字号+ 作者：CodingSnail 来源：CSDN 2014-11-26 17:11 我要评论( )

在上一篇中我们提到学习HTML5要具备CSS的知识，在页面设计的时候HTML5知识页面的布局与结构，要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法，再来看看和css3的关系与区别。 1、css是什么？ cascading stylesheet(级联样式表

在上一篇中我们提到学习HTML5要具备CSS的知识，在页面设计的时候HTML5知识页面的布局与结构，要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法，再来看看和css3的关系与区别。

1、css是什么？

cascading stylesheet(级联样式表)，为网页提供表现形式。按照w3c规范，设计一个网页，应该将网页的数据与结构写在html文件里，网页的外观写在 css文件里，而网页的行为写在.js文件里。这样做的目的是将网页的数据，外观，行为分离，方便代码的维护。

2、css选择器：

（1）标记选择器（简单选择器）

（2）class选择器

  1. .s1{  
  2.     属性名：属性  
  3. }  
还有一种有名字的class选择器，如下：
  1.  div.s1{  
  2.     font-size;120px;  
  3. }  
（3）id选择器
  1. #d1{  
  2.     font-size:italic;  
  3.     font-weight:900;  
  4. }  
（4）选择器分组
  1. h1,h2,h3{   //用逗号隔开  
  2. <span style="white-space:pre">  </span>color:bllue;  
  3.     }  
（5）选择器的派生
  1. #d2 p{  
  2. span style="white-space:pre">   </span>color:red;  
  3. font-size:300;  
  4.     }  
CSS中的注释
  1. /*   */  
样式的优先级：

外部样式，将样式写在.css文件里
内部样式，将样式写在.html文件里
内联样式，将样式写在style=" "里面
发生冲突时：外部样式<内部样式<内联样式。

CSS中的两个关键属性：

（1）display属性

有三个值：
block  按块标记的方式显示该标记
inline  按行内标记的方式显示该标记

none 不显示

  1. <html>  
  2.     <!--display属性-->  
  3.     <head>  
  4.         <style>  
  5.             #d1{  
  6.                 width:200px;  
  7.                 height:100px;  
  8.                 background-color:red;  
  9.                 color:white;  
  10.                 font-size:40px;  
  11.                 display:inline; <!--改为行内标记-->  
  12.             }  
  13.             #d2{  
  14.                 width:200px;  
  15.                 height:100px;  
  16.                 background-color:blue;  
  17.                 color:white;  
  18.                 font-size:40px;  
  19.                 display:inline; <!--改为行内标记-->  
  20.             }  
  21.         </style>  
  22.     </head>  
  23.     <body>  
  24.         <div id="d1">hello1</div>  
  25.     <!--标记d2会另起一行显示-->  
  26.         <div id="d2">hello2</div>  
  27.     </body>  
  28. </html>  

  （2）position属性
有三个值：
 static:缺省值。浏览器会将标记按默认的方式摆放(左－右，上－下)。
 absolute:相对父标记(所在的标记)偏移。
 relative:先按照默认的方式摆放，然后再偏移。

常用属性如下：

  1.      (1)文本相关的属性  
  2. font-size:30px; //字体大小  
  3. font-style:normal(正常)/italic(斜体)  
  4. font-weight:800; //100－900 (粗细)  
  5. font-family:"宋体"; //字体  
  6. text-align:left/center/right;  //文本水平对齐方式  
  7. line-height:30px;  //行高  一般和容器的高值相同放在中间  
  8. cursor:pointer/wait;   //光标的形状  
  9.     (2)背景相关的属性  
  10. background-color:red;  //背景颜色  
  11. background-color:#88eeff;  //RGB格式颜色设置  
  12. background-color:rgb(100,100,100);  //可以用这种格式输入十进制数的颜色值  
  13. background-image:url(images/t1.jpg);  //背景图片  
  14. background-repeat:no-repeat/repeat-x/repeat-y;   //平铺方式  
  15. background-position:30px 20px; //(水平和垂直)背景位置  
  16. background-attachment:scroll(默认)/fixed;  //依附方式    
  17. 也可以同时设置背景的多个特性：  
  18. background:背景颜色 背景图片 平铺方式 依附方式  水平位置 垂直位置；  
  19.     (3)边框  
  20. border-left:1px solid red;  
  21. border-right:2px dotted black;  
  22. border-bottom:  
  23. border-top:  
  24. border:1px solid red;  
  25.     (4)定位  
  26. width:100px;  
  27. height:200px;  
  28. margin  //外边距  
  29. margin-left:20px;  
  30. margin-right:30px;  
  31. margin-top:40px;  
  32. margin-buttom:50px;  
  33. 可以简化为：margin:top right bottom left;  
  34.       margin:40 30 50 20;  
  35. padding  //内边距  
  36. padding-left:  
  37. padding-right:  
  38. padding-top:  
  39. padding-buttom:  
  40. 可以简化为：padding:top right bottom left;  
  41. 内边距会将父标记撑开  
  42.      (5)浮动  
  43. 取消标记独占一行的特性  
  44. float:left/right;  //向左，向右浮动  
  45. clear:both;  //清除浮动的影响  
  46.      (6)其他  
  47. list-style-type:none;除掉列表选项的小圆点。  
  48. text-decoreation:underline;    //给文本加下划线  
  49.      (7)连接的伪样式  
  50. a:link{color:red} 没有访问时  
  51. a:visited{color:blue} 鼠标放上时  
  52. a:action{color:green} 鼠标点击时  
  53. a:hover{color:yellow} 鼠标离开时  

上面是我们以前学的css的基本总结，下面来看一下css3的特点，先打开css3参考手册（下载地址：http://download.csdn.net/detail/lxq_xsyu/6784027）

先看看border-color设置边框

相关属性：border-top-color,border-right-color,border-bottom-color,border-left-color

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <meta http-equiv="Content-Language" content="utf-8" />  
  6. <meta name="robots" content="all" />  
  7. <meta name="author" content="Tencent-ISRD" />  
  8. <meta name="Copyright" content="Tencent" />  
  9. <title>Border-color</title>  
  10. <style>  
  11.     div{  
  12.         border: 8px solid #000;  
  13.         -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
  14.         -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
  15.         -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
  16.         -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
  17.         padding: 5px 5px 5px 15px;  
  18.     }  
  19. </style>  
  20. </head>  
  21. <body>  
  22. <div>在Firefox浏览器里能看到边框颜色渐变效果</div>  
  23. </body>  
  24. </html>  
  25.    

这个设置边框只在火狐浏览器上支持，运行效果

可以从css3.0参考书册中看到css3增加了很多样式属性，我们可以参考该手册进行比css2更加绚丽的界面效果，如果配合js还可以实现页面动画制作。

下面我们再来看看给界面元素创建圆角效果

在css2中为了实现这种效果，我们需要制作两张图片。代码如下：

  1. <html>  
  2.     <head>  
  3.         <style type="text/css">  
  4.             a{  
  5.                 display:block;  
  6.                 height:40px;  
  7.                 float:left;  
  8.                 font-size:1.2em;  
  9.                 padding-right:0.8em;  
  10.                 background:url(images/headerRight.png) no-repeat scroll top right;  
  11.             }  
  12.               
  13.             a span{  
  14.                 background:url(images/headerLeft.png) no-repeat;  
  15.                 display:block;  
  16.                 line-height:40px;  
  17.                 padding-left:0.8em;  
  18.             }  
  19.         </style>  
  20.     </head>  
  21.     <body>  
  22.         <a href="#"><span>Box Title</span></a>  
  23.     </body>  
  24. </html>  
上面的方法虽然解决了问题，但是增加了一个多余的标签，下面我们来看看用css3如何解决：
  1. <html>  
  2.     <head>  
  3.         <style type="text/css">  
  4.             a{  
  5.                 float:left;  
  6.                 height:40px;  
  7.                 line-height:40px;  
  8.                 padding-left:0.8em;  
  9.                 padding-right:0.8em;  
  10.                 border-top-left-radius:8px;  
  11.                 border-top-right-radius:8px;  
  12.                 background-image:url(image/headerTiny.png);  
  13.                 backgrount-repeat:repeat-x;  
  14.             }  
  15.         </style>  
  16.     </head>  
  17.     <body>  
  18.         <a href="#"><span>Box Title</span></a>  
  19.     </body>  
  20. </html> 

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5常用标签总结

    HTML5常用标签总结

    2016-03-23 14:02

  • html5学得好不好，看掌握多少标签

    html5学得好不好，看掌握多少标签

    2015-09-28 12:53

  • 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    2015-06-02 14:32

  • 小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

    小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

    2015-06-02 14:34

网友点评
精彩导读
小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（11）——链接，图片，表格，框架

小强的HTML5移动开发之路（11）——链接，图

小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几

小强的HTML5移动开发之路（40）——jqMobi中

小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

小强的HTML5移动开发之路（35）——jQuery中

小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似

小强的HTML5移动开发之路（41）——jqMobi中S

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案：鲁ICP备17035125号-2
HTML5入门 HTML5技术 canvas教程 专题学习 齐博CMS教程