HTML5+CSS3从入门到精通之移动开发之路（4）CSS2和CSS3-职坐标

HTML5+CSS3从入门到精通之移动开发之路（4）CSS2和CSS3

沉沙 2018-11-23 来源：阅读 1179 评论 0

摘要：本篇教程探讨了HTML5+CSS3从入门到精通之移动开发之路（4）CSS2和CSS3，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5+CSS3从入门到精通之移动开发之路（4）CSS2和CSS3，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

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

1、css是什么？

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

2、css选择器：

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

（2）class选择器

    .s1{
        属性名：属性
    }

还有一种有名字的class选择器，如下：

     div.s1{
        font-size;120px;
    }

（3）id选择器

    #d1{
        font-size:italic;
        font-weight:900;
    }

（4）选择器分组

    h1,h2,h3{   //用逗号隔开
    <span style="white-space:pre">  </span>color:bllue;
        }

（5）选择器的派生

    #d2 p{
    span style="white-space:pre">   </span>color:red;
    font-size:300;
        }

CSS中的注释

    /*   */

样式的优先级：

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

CSS中的两个关键属性：

（1）display属性

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

none 不显示

    <html>
        
        <head>
            <style>
                #d1{
                    width:200px;
                    height:100px;
                    background-color:red;
                    color:white;
                    font-size:40px;
                    display:inline; 
                }
                #d2{
                    width:200px;
                    height:100px;
                    background-color:blue;
                    color:white;
                    font-size:40px;
                    display:inline; 
                }
            </style>
        </head>
        <body>
            <div id="d1">hello1</div>
        
            <div id="d2">hello2</div>
        </body>
    </html>

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

常用属性如下：

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

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

先看看border-color设置边框

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

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


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

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

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

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

    <html>
        <head>
            <style type="text/css">
                a{
                    display:block;
                    height:40px;
                    float:left;
                    font-size:1.2em;
                    padding-right:0.8em;
                    background:url(images/headerRight.png) no-repeat scroll top right;
                }

                a span{
                    background:url(images/headerLeft.png) no-repeat;
                    display:block;
                    line-height:40px;
                    padding-left:0.8em;
                }
            </style>
        </head>
        <body>
            <a href="#"><span>Box Title</span></a>
        </body>
    </html>

上面的方法虽然解决了问题，但是增加了一个多余的标签，下面我们来看看用css3如何解决：

    <html>
        <head>
            <style type="text/css">
                a{
                    float:left;
                    height:40px;
                    line-height:40px;
                    padding-left:0.8em;
                    padding-right:0.8em;
                    border-top-left-radius:8px;
                    border-top-right-radius:8px;
                    background-image:url(image/headerTiny.png);
                    backgrount-repeat:repeat-x;
                }
            </style>
        </head>
        <body>
            <a href="#"><span>Box Title</span></a>
        </body>
    </html>