React Native我爱编程

HTML快速入门（二）—— CSS简介

2016-06-14  本文已影响664人  珍此良辰

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等

CSS简介

CSS的3种使用形式

效果：


行内样式.png

效果：

业内样式.png

效果：


外部样式.png

注意：开发中，一般都使用外部样式,结构比较清晰

CSS常用选择器

CSS不常用选择器

div + p{

}

注意条件：相邻，且同一级

div[name]{

}

div[name="Tom"]{

}

div[name][age]{

}


*{
    
}

选择器的优先级与权值的关系

选择器类型 权值
通配选择符 0
标签选择器 1
类选择器 10
属性选择器 10
伪类 10
伪元素 1
id选择器 100
important 1000

HTML标签类型

![Uploading Snip20160614_7_103697.png . . .]

```
<style>
     /* input标签选择器 */
    input{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <input type="text">
    <input type="date">
    <input type="text">
    <input type="date">

</body>

```
效果：
行内-块级标签.png

修改标签的显示类型 —— display/visibility

CSS属性分类

盒子模型

CSS3新特性

    <style>
        div{
            /*设置宽高*/
            width: 200px;
            height: 50px;
        }

        .test1{
            background-color: rgba(123,0,0,1.0);
        }
        .test2{
            background-color: rgba(123,0,0,0.8);
        }
        .test3{
            background-color: rgba(123,0,0,0.0);
        }
        .test4{
            background-color: rgba(123,0,0,0.6);
        }
        .test5{
            background-color: rgba(123,0,0,0.4);
        }
        .test6{
            background-color: rgba(123,0,0,0.2);
        }
    </style>
    
    <body>
        <div class="test1">div1.0</div>
        <div class="test2">div0.8</div>
        <div class="test3">div0.0</div>
        <div class="test4">div0.6</div>
        <div class="test5">div0.4</div>
        <div class="test6">div0.2</div>
    </body>

效果：


CSS3.0透明度新特征.png

补充：既然有透明度，那么就有不透明度（最简单的蒙版效果）

    <style>
        div {
            /*设置宽高*/
            width: 200px;
            height: 50px;
            /*设置背景色*/
            background-color: red;
            /*设置不透明度*/
            opacity:0.35;
        }
    </style>
    
    <body>
        <div>div1.0</div>
    </body>

效果：


不透明度设置.png 
    <style>
        div {
            /*设置宽高*/
            width: 200px;
            height: 50px;
            /*设置背景色*/
            background-color: red;
            
            /*设置外边距*/
            margin: 20px;

            /*设置块阴影
             参数一:水平偏移
             参数二:垂直偏移
             参数三:模糊距离
             参数四:阴影颜色
            */
            box-shadow: 10px 10px 10px blue;
        }
    </style>
    
    <body>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
    </body>

效果：


块阴影效果.png 
    <style>
        div {
            /*设置宽高*/
            width: 200px;
            height: 50px;
            /*设置背景色*/
            background-color: red;
            /*设置外边距*/
            margin: 20px;
        }
        .test1{
            /*底部左边*/
            border-bottom-left-radius: 30px;
        }
        .test2{
            /*顶部右边*/
            border-top-right-radius: 30px;
        }
        .test3{
            /*底部右边*/
            border-bottom-right-radius: 30px;
        }
        .test4{
            /*顶部左边*/
            border-top-left-radius: 30px;
        }
        .test5{
            /*四个角*/
            border-radius: 10px;
        }
    </style>

    <body>
        <div class="test1">div</div>
        <div class="test2">div</div>
        <div class="test3">div</div>
        <div class="test4">div</div>
        <div class="test5">div</div>
    </body>

效果：


圆角的使用.png

CSS布局

居中

昨晚的文章不完整，这个才是第二篇的完整版，对造成的不便感到抱歉，综合实例单独做一篇吧！

上一篇下一篇

猜你喜欢

热点阅读