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

    来自：http://blog.csdn.net/dawanganban/article/details/17653149

    在上一篇中我们提到学习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.                 200px;  
    7.                 height:100px;  
    8.                 background-color:red;  
    9.                 color:white;  
    10.                 font-size:40px;  
    11.                 display:inline; <!--改为行内标记-->  
    12.             }  
    13.             #d2{  
    14.                 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. 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>  
  • 相关阅读:
    通过ida dump Uinity3D的加密dll
    apk文件签名绕过
    防止apk反编译的技术分析浅谈--内存修改器篇
    OD脚本指令集
    RHEL6.4 xclock安装小记
    PyCharm配置SFTP远程调试Django应用
    git常用命令
    centos7下yum安装mysql
    慢吞吞的pip切换源
    Linux常用软件安装与配置——目录
  • 原文地址：https://www.cnblogs.com/wanghang/p/6298977.html
Copyright © 2020-2023  润新知