1. Intro

1.1

<div style="color:red;">
    contents
</div>

1.2

<head>
    <style>
        .c1{
            color: red;
        }
        #c２{
            color: green;
        }
        li{     /* global */
            color: pink;
        }
        input[type='text']{
            border: 1px solid red;
        }
        .v1[attr='123']{
            ...
        }
        .mylist li{ /* children and grandchildren */
            color: red;
        }
        .mydiv > a{ /* only children */

        }
    </style>
</head>

...

<div class='c1'>contents</div>

<div id='c2'>contents</div>

<ul>
    <li>
        ccc
    </li>
    ...
</ul>

<input type="text" />
<input type="password" />

1.3

/* common.css */
.c1 {
    color: red;
}

<head>
    <link rel="stylesheet" href="common.css" />
</head>

2. Multiple Styles

<style>
    .c0{
        color: gray !important; /* no overwrite */
    }
    .c1{
        color: red;
        border: red;
    }
    .c2{
        font-size: 32;
        color: green;   /* overwrite */
    }
    /* order by presence in style */
</style>

...

<div class="c2 c1">contents</div>

3. Styles

3.1 Height & Width

.c1{
    height: 300px;
    width: 300px;
}
  1. % only for width
  2. ‘inline’ invalid
  3. ‘block’ valid, but right side is forbidden

3.2 Inline & Block

display: inline-block;

<style>
    .c1{
        display: inline-block;
        height: 100px;
        width: 200px;
        border: 1px solid black;
    }
</style>

...

<span class="c1"></span>

4. Font & Alignment

.c1{
    color: red;
    font-size: 30px;
    font-weight: 300;
    font-family: Microsoft Yahei;
}

.c2{
    height: 59px;
    width: 300px;
    border: 1px solid pink;
    text-align: center; /* honrizontal */
    line-height: 59px;  /* vertical for one line */
}

5. Float

Once ‘div’ is float, it only occupies where it is.

<style>
    .c1{
        height: 150px;
        width: 200px;
        border: 1px solid blue;
        float: right;
    }
</style>

...

<div style="">
    <div class='c1'></div>
    <div class='c1'></div>
    <div class='c1'></div>
    <div style="clear: both;"></div>
</div>

6. Padding & Margin

body{
    margin: 0;
}
.c1{
    padding: 20px;
    padding: 20px 20px 20px 20px;
    /* top right left bottom; */
    /* inner padding */
}
.c2{
    margin: 20px;
    /* inter margin */
}
.c3{
    /* container */
    width: 980px;
    height: 1000px;
    margin: 0 auto;
    /* top left-right */
}

7. hover & text-decoration & after

.c1 a:{
    line-height: 38px;
    text-decoration: none;
    opacity: 0.7;
}
.c1 a:hover{
    color: white;
}

.c3{
    display: none;
}
.c2:hover .c3{
    display: block;
}

.c4:after{
    content: "";
    display: block;
    clear: both;
}

8. postion

8.1 fixed

<style>
    .back{
        position: fixed;
        width: 60px;
        height: 60px;
        border: 1px solid black;

        right: 10px;
        bottom: 10px;
        /* left bottom fixed position */
    }
    .dialog{
        position: fixed;
        width: 300px;
        height: 500px;
        border: 1px solid black;

        left: 0;
        right: 0;
        margin: 0 auto;

        top: 200px;

        z-index: 1000;
    }
    .mask{
        background: black;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0.7;
        z-index: 999;
    }
</style>

...

<div class="back">back to top</div>
<div class="mask"></div>
<div class="dialog"></div>

8.2 relative & absolute

<style>
    .c1{
        width: 300px;
        height: 500px;
        border: 1px solid red;
        margin: 100px;

        position: relative;
    }
    .c1:hover .c2{
        display: block;
    }
    .c1 .c2{
        height: 59px;
        width: 59px;
        background: green;

        position: absolute;
        right: 0;
        bottom: 0;
        display: none;
    }
</style>

...

<div class="c1">
    <div　class="c2">
        </div>
</div>

9. border & background

.c1{
    height: 300px;
    width: 200px;
    border: 3px dotted red;
    border-left: 3px solid green;
}

.c2{
    height: 60px;
    width: 60px;
    margin: 100px;

    border-left: 1px solid transparent;
    /* avoid moving around */
}
.c2:hover{
    border-left: 1px solid red;
}