精 簡

個人筆記部落格

0%

CSS 筆記

發表於 更新於 分類於 ，

  • margin、padding、border 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <style>
        .test {
            margin: 0px;
             /** 與其他元素的距離 border之外的範圍**/
            width: 320px;
             /** 元素的寬度 **/
            border: 2px solid rgb(167, 66, 133);
             /** 邊框粗細、種類、顏色 **/
            padding: 20px; /** 邊框與元素內容的距離 **/
            background-color: rgb(128, 230, 81);
             /** 邊框內的背景顏色 **/
            color: #363fbd;
             /** 元素內容顏色 **/
        }
        .aaa {
            margin: 10px;
            width: 320px;
            border: 2px solid rgb(167, 66, 133);
            padding: 20px;
            background-color: rgb(128, 230, 81);
            color: #363fbd;
        }
    </style>

    效果如下

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel harum alias itaque incidunt tenetur nesciunt ducimus ratione eligendi. Totam at omnis nobis dicta nemo neque eaque esse illum laborum possimus.

    this is a aaa.

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel harum alias itaque incidunt tenetur nesciunt ducimus ratione eligendi. Totam at omnis nobis dicta nemo neque eaque esse illum laborum possimus.

  • 文字

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <style>
        .test {
            font-size: 20px;
            /** 文字大小  20像素**/
            line-height: 5;
            /** 行高 3行行高 **/
            white-space: nowrap;
            /* 超過寬度不換行 */
             text-indent: 2em;
            /* 縮排兩字元，如果要凸排，改成負數就可以達成效果 */
            /*  px像素(代表螢幕的pixel)
                em字元(代表每個字的大小，會依照"父元素"font-size而變)
                rem字元 (代表每個字的大小，會依照"Root元素"font-size而變)*/

        }
        .shadow{
        text-shadow: 5px   5px      2px    red;
        /* 文字陰影 向右偏移 向下偏移 淺景深  陰影顏色 */
        }

        .test a {
            text-decoration: none;
            /* 標線 底線消除*/
            color: red;
            /* 文字顏色 */
        }

        .test h1 {
            text-align: left;
            /* 文字對齊*/
            text-decoration: overline;
            /* 上標線 */
        }

        .test h2 {
            text-align: center;
            /* 文字對齊*/
            text-decoration: line-through;
            /* 刪除線*/
        }

        .test h3 {
            text-align: right;
            /* 文字對齊*/
            text-decoration: underline;
            /* 下標線*/
        }

        .uppercase {
            text-transform: uppercase; /* 全大寫*/
        }

        .lowercase {
            text-transform: lowercase; /*全小寫*/
        }

        .capitalize {
            text-transform: capitalize; /*首字都大寫*/
        }
    </style>

    效果如下（有另加一個 border 比較好觀看範圍）

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel harum alias itaque incidunt tenetur nesciunt ducimus ratione eligendi. Totam at omnis nobis dicta nemo neque eaque esse illum laborum possimus.
this is a link

SHADOW

H1 標題

H2 標題

H3 標題

This is some text.

This is some text.

This is some text.

案例樣式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*{ /* 這是為了清空預設格式 */
    margin: 0;
    padding: 0;
}
.container{
    width:960px;
    background-color: rgb(0, 163, 192);
    margin:auto;/* 置中對齊 */
}
.col {
    width:200px;
    height:200px;
    margin:10px;
    background-color: #fff;
    float: right;　/* 靠右對齊 */
}
.container-height-fix{
    clear:both;
}
.col2 {
    width:200px;
    height:200px;
    margin:10px;
    background-color: rgb(129, 35, 35);
    float: left;　/*靠右對齊*/
}

案例１

在這裡會發現，container的背景顏色會消失，是因為他的子元素的CSS樣式有float樣式，擁有float樣式的元素會跳脫原本的父元素，而這裡的.container會因為沒有子元素，且沒有設定height樣式，導致它不會出現在上面． 

1
2
3
4
5
<div class="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

解決方案

1
2
3
4
5
6
7
<div class="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <!-- 這是用來將上面的float樣式消除的方法，請參考上面的樣式表-->
    <div class="container-height-fix"></div>
</div>

案例２

在這裡會發現.col2的元素被擠到下面去了．原因是.col2上面還有一個.container-height-fix的元素．如果要在同一行的話只要把col2換到.container-height-fix上面就行了．但是如果只是要讓.container包覆住.只要在下面再多加一行.container-height-fix的元素就好了．在這裡可以了解到clear:both會有所謂的換行效果．

1
2
3
4
5
6
7
8
<div class="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <!-- 這是用來將上面的float樣式消除的方法，請參考上面的樣式表-->
    <div class="container-height-fix"></div>
    <div class="col2"></div>
</div>

解決方案

1
2
3
4
5
6
7
8
9
10
<!-- 換行效果 -->
<div class="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <!-- 這是用來將上面的float樣式消除的方法，請參考上面的樣式表-->
    <div class="container-height-fix"></div>
    <div class="col2"></div>
    <div class="container-height-fix"></div>
</div>
1
2
3
4
5
6
7
8
9
<!-- 同行效果 -->
<div class="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col2"></div>
    <!-- 這是用來將上面的float樣式消除的方法，請參考上面的樣式表-->
    <div class="container-height-fix"></div>
</div>

案例樣式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {
    /* 這是為了清空預設格式 */
    margin: 0;
    padding: 0;
}

.div {
    margin: 20px;
    border: 1px solid ;
    background-color: #515faf;
}
ol{
    margin: 5px;
    border: 1px solid red;
    text-align: center;
}
li{
    border: 5px solid orange;
    width: 100px;
    margin: 10px ;
    padding: 5px;
    background-color: white;
}
.inline {
    display: inline;
}

.block {
    display: block;
}

.inlineblock {
    display: inline-block;
}

案例１

我們知道div、ol、li都是區塊元素，這時候我們將li標籤display樣式分別顯示inline、block、inline-block會有怎麼樣的情況，注意我們只有li的display標籤不同，其餘的都相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div>
    <p>這是li標籤display樣式為inline</p>
    <ol>
        <li class="inline">item</li>
        <li class="inline">item</li>
        <li class="inline">item</li>
        <li class="inline">item</li>
    </ol>
</div>
<div>
    <p>這是li標籤display樣式為block</p>
    <ol>
        <li class="block">item</li>
        <li class="block">item</li>
        <li class="block">item</li>
        <li class="block">item</li>
    </ol>
</div>
div>
    <p>這是li標籤display樣式為inline-block</p>
    <ol>
        <li class="inlineblock">item</li>
        <li class="inlineblock">item</li>
        <li class="inlineblock">item</li>
        <li class="inlineblock">item</li>
    </ol>
</div>
<div>
    <p>這是li標籤display樣式為none，簡單講就是不給看也不會分配空間．</p>
    <ol>
        <li class="none">item</li>
        <li class="none">item</li>
        <li class="none">item</li>
        <li class="none">item</li>
    </ol>
</div>

案例樣式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.origin,.boxsizing{
    float: right;
    margin: 2px ;
}
div div {
    margin: 5px auto;
    border:5px solid red;
    width: 200px;
    height: 100px;
}
.origin {
    background-color: #351;
}

.boxsizing {
    background-color: #555555;
    /* width為border以內(border也包含)來做計算 */
}
.origin div {
    /* box-sizing: content-box; 預設選項，如果沒有特別設定 */
}

.boxsizing div{
    box-sizing: border-box;
}
.clearfix{
    clear: both;
}
.width200{
    width: 200px;
}
.border20{
    border:20px solid red;
}
p{
    font-size: 20px;
    text-align: center;
    color: silver;
}

案例１

在之前我們了解了margin、border、padding、content這之間的關係，用來計算合適的width．這裡透過一個box-sizing的樣式來讓我們，更方便去計算每個html元素的width．

1
2
3
4
5
6
7
8
9
10
11
12
<div class="origin">
    <p>Origin</p>
    <div class="width200">Width=200px border=5px</div>
    <div class="width200 border20">Width=200px border=20px</div>
</div>

<div class="boxsizing">
    <p>boxsizing</p>
    <div class="width200">Width=200px border=5px</div>
    <div class="width200 border20">Width=200px border=20px</div>
</div>
<div class="clearfix"></div>

  • CSS Reset & CSS Normalize

    CSS Reset：CSS樣式重置，因為各個瀏覽器會原本的預設樣式會有不同的CSS樣式，開發者為了完全的控制樣式，所以會一開始重置CSS樣式．

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    CSS Normalize：CSS正規化，當CSS重置時，樣式都歸０，使得有些有用的css樣式，也必須重新設定，CSS Normalize 就跟著孕育而生．

    • 保留有用的瀏覽器預設值，而非消除它．
    • 替廣泛的HTML元素提供正規化樣式．
    • 修正問題(bugs)及瀏覽器間的不一致．
    • 透過部分的修改來改善可用性．
    • 使用註解以及提供細部文件來說明程式碼．

案例一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 在這裡就會開始引用CSSReset，這裡不另做匯入，
    詳情請參考CSS Reset & CSS Normalize說明 */
.container {
    width: 960px;
    background-color: #be97fd;
    margin: 10px auto;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 300px;
    margin: 10px;
    box-sizing: border-box;
}

.item h2 {
    text-align: center;
    font-size: 36px;
}

.item img {
    width: 100%
}

.item p {
    margin: 10px;
}

.flexItem {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="container flexContainer">
    <div class="flexItem item"><img src="https://fakeimg.pl/300x200/ffffaa/" alt="">
        <h2>Item1</h2>
        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam incidunt similique, voluptatem
            repellat fuga cumque harum laudantium possimus perspiciatis veniam necessitatibus nam, veritatis dolores
            magni ipsam earum et corrupti.</P>
    </div>
    <div class="flexItem item"><img src="https://fakeimg.pl/300x200/ffffaa/" alt="">
        <h2>Item2</h2>
        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam incidunt similique, voluptatem
            repellat fuga cumque harum laudantium possimus perspiciatis veniam necessitatibus nam, veritatis dolores
            magni ipsam earum et corrupti.</P>
    </div>
    <div class="flexItem item"><img src="https://fakeimg.pl/300x200/ffffaa/" alt="">
        <h2>Item3</h2>
        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam incidunt similique, voluptatem
            repellat fuga cumque harum laudantium possimus perspiciatis veniam necessitatibus nam, veritatis dolores
            magni ipsam earum et corrupti.</P>
    </div>
    <div class="flexItem item"><img src="https://fakeimg.pl/300x200/ffffaa/" alt="">
        <h2>Item4</h2>
        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam incidunt similique, voluptatem
            repellat fuga cumque harum laudantium possimus perspiciatis veniam necessitatibus nam, veritatis dolores
            magni ipsam earum et corrupti.</P>
    </div>
    <div class="flexItem item"><img src="https://fakeimg.pl/300x200/ffffaa/" alt="">
        <h2>Item5</h2>
        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam incidunt similique, voluptatem
            repellat fuga cumque harum laudantium possimus perspiciatis veniam necessitatibus nam, veritatis dolores
            magni ipsam earum et corrupti.</P>
    </div>
    <div class="flexItem item"><img src="https://fakeimg.pl/300x200/ffffaa/" alt="">
        <h2>Item6</h2>
        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam incidunt similique, voluptatem
            repellat fuga cumque harum laudantium possimus perspiciatis veniam necessitatibus nam, veritatis dolores
            magni ipsam earum et corrupti.</P>
    </div>
</div>

這裡演示一個簡單的flex案例，flex跟float不同的地方，在於float是單一元素修改，常常要特別的撰寫才能達到內容融入的感覺，例如float案例：一個有包含float的父元素，如果沒有其他內容，會讓父元素不認為有其float樣式子元素的存在，為了解決一個問題，我們需要多撰寫一個子元素，並讓它包含clear的樣式來解決這個問題．

案例樣式表

1

案例１

1
2


案例樣式表

1

案例１

1