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

p{
    /*選擇<p>標籤屬性*/
}

*{
    /*對所有標籤進行樣式設定*/
}

.box{
    /*選擇<div class="box">標籤屬性*/
}

.box a{
    /*選擇<div class="box">標籤屬性裡面的<a>*/
}

.box1, .box2{
    /*選擇<div class="box1">標籤和<div class="box2">標籤*/
}

#box{
    /*選擇<div id="box">標籤屬性*/
}
/*
1.後面的樣式會覆蓋前面的樣式
2.加入『!important』樣式優先
*/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul>
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
    <li>9</li>
    <p>10</p>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

li:nth-child(4){
    /*選取第4個(null)*/
}
li:nth-child(odd){
    /*選取單數(1、3、5、7、9)*/
}
li:nth-child(even){
    /*選取偶數(null)*/
}
li:nth-child(2n+3){
    /*從第3個開始，每次間隔2(3、5、7、9)*/
}
li:nth-child(3n+1){
    /*從第1個開始，每次間隔3(1、7)*/
}
li:not(:first-child){
    /*選取li第一個以外的(3、5、7、9)*/
}
li:nth-of-type(3){
    /*選取li的第三個(5)*/
}

  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
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

.text{
    font-family: verdana;
    font-family: "微軟正黑體","import"; /*優先使用前者字體，後者順位*/
    font-family: "Microsoft JhengHei"; /*window中文字體*/
    font-family: "Segoe UI";  /*window英文字體*/
    font-family: "Droidsanfallback";  /*andriod中文字體*/
    font-family: "Roboto";  /*andriod英文字體*/
    font-family: "Ping Fang HeitiTC";  /*ios中文字體*/
    font-family: "Helvetica Neue";  /*ios英文字體*/

    font-weight: 100~900; /*字體粗度*/
    font-weight: lighter; /*字體粗度100*/
    font-weight: light; /*字體粗度400*/
    font-weight: normal; /*字體粗度400(預設值)*/
    font-weight: bold; /*字體粗度700*/
    font-weight: bolder; /*字體粗度700*/

    font-style: normal; /*正常(預設值)*/
    font-style: italic; /*斜體*/
    font-style: oblique; /*斜體*/

    font-size: xx-small; /*超級小(12px)*/
    font-size: x-small; /*超小(12px)*/
    font-size: small; /*小(13px)*/ 
    font-size: medium; /*中(16px)(預設值)*/
    font-size: large; /*大(18px)*/
    font-size: x-large; /*超大(24px)*/
    font-size: xx-large; /*超級大(32px)*/
    font-size: smaller; /*超級大(13.3333px)*/
    font-size: larger; /*超級大(19.2px)*/
    font-size: 16px; /*文字16px(1rem)*/
    font-size: 1rem; /*文字1em(16px)*/
    font-size: 1em; /*文字1em*/
    
    font-variant: normal; /*正常(預設值)*/
    font-variant: no-common-ligatures; /*不連字*/
    font-variant: common-ligatures; /*普通連字*/
    font-variant: small-caps; /*小型的大寫字體*/

    /*須看字型本身有無支援*/
    font-stretch: normal; /*正常(預設值)*/
    font-stretch: ultra-condensed; /*將字體壓縮(50%)*/
    font-stretch: extra-condensed; /*將字體壓縮(62.5%)*/
    font-stretch: condensed; /*將字體壓縮(75%)*/
    font-stretch: semi-condensed; /*將字體壓縮(75%)*/
    font-stretch: expanded; /*將字體擴張(112.5%)*/
    font-stretch: semi-expanded; /*將字體擴張(125%)*/
    font-stretch: extra-expanded; /*將字體擴張(150%)*/
    font-stretch: ultra-expanded; /*將字體擴張(200%)*/

    font: font-style|font-weight|font-variant|font-size/line-height|font-family; 

    color: red; /*顏色名稱*/
    color: #333333; /*色票*/
    color: rgba(3,3,3,0); /*R,G,B,透明度*/

    text-decoration: none; /*無裝飾(預設值)*/
    text-decoration: underline; /*上線條*/
    text-decoration: underline dotted; /*上線條 點線*/
    text-decoration: underline dotted red; /*上線條 點線 紅色*/
    text-decoration: overline; /*下線條*/
    text-decoration: line-through; /*刪除線*/

    text-indent: 0em; /*(預設值)*/
    text-indent: 2em; /*縮排2個字*/
    text-indent: 10%; /*縮排10%*/
    text-indent: -5em; /*突出5個字*/

    letter-spacing: normal; /*(預設值)*/
    letter-spacing: 8px; /*文字間距*/

    word-spacing: normal; /*(預設值)*/
    word-spacing: 5px; /*每個單字間的距離*/
    word-spacing: 120%; /*每個單字間的距離120%*/
    word-spacing: 1rem; /*每個單字間的多一個字的距離*/

    line-height: normal; /*(預設值)*/
    line-height: 40px; /*段落行距40px*/
    line-height: 120%; /*段落行距1.2倍*/
    line-height: 1.5; /*段落行距1.5倍*/

    text-align: left; /*靠左(預設值)*/
    text-align: right; /*靠右*/
    text-align: center; /*置中*/
    text-align: justify; /*左右對齊*/

    text-transform: none; /*(預設值)*/
    text-transform: capitalize; /*每個單字開頭大寫*/
    text-transform: uppercase; /*所有字母大寫*/
    text-transform: lowercase; /*所有字母小寫*/

    -webkit-text-stroke: 5px #333333; /*文字外框*/

    text-justify: auto; /*齊行均分方式(預設值)*/
    text-justify: inter-word;
    text-justify: inter-ideograph;
    text-justify: inter-cluster;
    text-justify: distribute;
    text-justify: kashida;
    text-justify: trim;

    text-overflow: clip; /*裁剪文字(預設值)*/
    text-overflow: ellipsis; /*省略號*/
    
    text-shadow: none; /*(預設值)*/
    text-shadow: 30px 40px; /*X軸 Y軸*/
    text-shadow: 30px 40px red; /*X軸 Y軸 陰影顏色*/
    text-shadow: 30px 40px 20px red; /*X軸 Y軸 模糊 陰影顏色*/
    text-shadow: 30px 40px red,10px 50px blue; /*前者在上層，後者在下層*/

    word-break: normal; /*只有英文，換行時單詞不會被切(預設值)*/
    word-break: keep-all; /*中英日韓，換行時單詞不會被切*/
    word-break: break-all; /*中英日韓，換行時單詞會被切*/

    word-wrap: normal; /*(預設值)*/
    word-wrap: break-word; /*允許文字在任意位置斷行*/

    white-space: nowrap; /*不換行*/
    white-space: normal; /*自動換行*/

    unicode-bidi: bidi-override; /*文字相反顯示*/

    writing-mode: horizontal-tb; /*文字水平*/
    writing-mode: vertical-rl; /*文字垂直*/
}

1
2
3
4
5

.box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

1
2
3
4
5
6
7

.box {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /*限制幾行*/
    -webkit-box-orient: vertical;
}

1
2
3
4
5

@font-face{
    font-family: verdana;
    src: url(http://example.com/fonts/Gentium.woff),
         url(/fonts/simple.woff);
}

 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

.box{
    background-color: transparent; /*透明(預設值)*/
    background-color: red; /*顏色名稱*/
    background-color: #333333; /*色票*/
    background-color: rgba(3,3,3,0); /*R,G,B,透明度*/
    
    background-position: 0% 0%; /*在左上方(預設值)*/
    background-position: right top; /*在右上方*/
    background-position: center bottom; /*在中間下方*/
    background-position: 20px 30px; /*X軸 Y軸*/

    background-size: auto; /*(預設值)*/
    background-size: 200px 300px; /*寬200px，高300px*/
    background-size: 50%; /*縮小50%*/
    background-size: cover; /*填滿元素*/
    background-size: contain; /*圖片大於元素時能完整呈現*/

    background-repeat: repeat; /*重複(預設值)*/
    background-repeat: no-repeat; /*不重複*/
    background-repeat: repeat-x; /*X軸重複*/
    background-repeat: repeat-y; /*Y軸重複*/

    background-origin: padding-box; /*圖片空間從border內開始(預設值)*/
    background-origin: border-box; /*圖片空間從border外框開始*/
    background-origin: content-box; /*圖片空間從padding內開始*/

    background-clip: border-box; /*border線在圖片內(預設值)*/
    background-clip: padding-box; /*border線在圖片外*/
    background-clip: content-box; /*border線會被padding在圖片外*/

    background-attachment: scroll; /*背景捲動時跟著移動(預設值)*/
    background-attachment: fixed; /*背景固定不動(滾動視差效果)*/

    background-image: none; /*(預設值)*/
    background-image: url("連結網址"); /*崁入圖片*/
    background-image: url(/images); /*根目錄*/
    background-image: url(./images); /*所在目錄*/
    background-image: url(../images); /*上層目錄*/

    background: color|position|size|repeat|origin|clip|attachment|image;

    box-shadow: 30px 40px; /*X軸 Y軸*/
    box-shadow: 30px 40px red; /*X軸 Y軸 陰影顏色*/
    box-shadow: 30px 40px 20px red; /*X軸 Y軸 模糊 陰影顏色*/
    box-shadow: 30px 40px 20px 10px red; /*X軸 Y軸 模糊 擴散 陰影顏色*/
    box-shadow: 30px 40px 20px 10px red inset; /*X軸 Y軸 模糊 擴散 陰影顏色 內部*/
    box-shadow: 30px 40px red,10px 50px blue; /*前者在上層，後者在下層*/

    opacity: 0; /*完全透明*/
    opacity: 0.5; /*半透明*/
    opacity: 1; /*完全不透明*/
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.box{
    background: linear-gradient(red, orange); /*從上到下(預設)，紅到橘*/
    background: linear-gradient(red,yellow); /*上到下，紅到黃*/
    background: linear-gradient(45deg,red,yellow); /*右上到左下，紅到黃*/
    background: linear-gradient(90deg,red,transparent); /*右到左，紅到透明*/
    background: radial-gradient(red,blue); /*由內到外，紅到藍*/
    background: radial-gradient(red 5%,blue 10%); /*由內到外，紅5%到藍10%*/
    background: radial-gradient(circle,red,blue); /*由內到外(正圓)，紅到藍*/
    background: repeating-radial-gradient(circle,red,blue); /*重複，由內到外(正圓)，紅到藍*/
}

1
2
3
4
5
6

.box{
    background-image: url("...");
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.box{
    padding: 0; /*(預設值)*/
    padding: 20px; /*四邊同時調整*/
    padding: 20px 30px; /*上下 左右調整*/
    padding: 20px 30px 50px; /*上 左右 下調整*/
    padding: 20px 30px 50px 100px; /*上 右 下 左調整*/

    padding-top: 20px; /*上調整*/
    padding-right: 30px; /*右調整*/
    padding-bottom: 50px; /*下調整*/
    padding-left: 100px; /*左調整*/

    box-sizing: content-box; /*padding向外擴(預設)*/
    box-sizing: border-box; /*padding向內壓縮*/
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.box{
    margin: 0; /*(預設值)*/
    margin: 20px; /*四邊同時調整*/
    margin: 20px 30px; /*上下 左右調整*/
    margin: 20px 30px 50px; /*上 左右 下調整*/
    margin: 20px 30px 50px 100px; /*上 右 下 左調整*/

    margin-top: 20px; /*上調整*/
    margin-right: 30px; /*右調整*/
    margin-bottom: 50px; /*下調整*/
    margin-left: 100px; /*左調整*/
}

 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

.box{
    border-width: 5px; /*邊框線條寬度5px*/
    border-width: thin; /*薄(1px)*/
    border-width: medium; /*中(3px)*/
    border-width: thick; /*厚(5px)*/

    border-style: none; /*沒有線條*/
    border-style: dotted; /*短虛線*/
    border-style: dashed; /*長虛線*/
    border-style: solid; /*實線(預設值)*/
    border-style: double; /*雙實線*/
    border-style: groove; /*雙實線*/
    border-style: ridge; 
    border-style: inset; /*3D凹*/
    border-style: outset; /*3D凸*/

    border-color: none; /*(預設值)*/
    border-color: red; /*顏色名稱*/
    border-color: #333333; /*色票*/
    border-color: rgba(3,3,3,0); /*最後的值調整透明度*/

    border: solid 1px red; /*四邊框線樣式 框線寬度 框線顏色*/

    border-top: solid 1px red; /*上邊框線樣式/框線寬度/框線顏色*/
    border-right: solid 1px red; /*右邊框線樣式/框線寬度/框線顏色*/
    border-bottom: solid 1px red; /*下邊框線樣式/框線寬度/框線顏色*/
    border-left: solid 1px red; /*左邊框線樣式/框線寬度/框線顏色*/

    border-radius: 30px; /*邊框圓角*/
    border-radius: 100%; /*圓型*/

    border-image-source: url(); /*崁入圖片*/
    border-image-source: url(/images); /*根目錄*/
    border-image-source: url(./images); /*所在目錄*/
    border-image-source: url(../images); /*上層目錄*/
}

1
2
3
4
5
6
7
8

.box{
    width: 400px;
    height: 200px;
    border-image: url(https://photo.minwt.com/file/sampleView/css/border-image/bdic.png);
    border-image-slice: 20;
    border-image-width: 1em;
    border-image-repeat: round;
}

1
2
3
4
5
6
7
8

.box{
    width: 400px;
    height: 200px;
    border-image: url(https://photo.minwt.com/file/sampleView/css/border-image/bdic.png);
    border-image-slice: 20;
    border-image-width: 1em;
    border-image-repeat: stretch;
}

1
2
3
4
5
6
7
8
9

.box{
    position: static; /*靜態：自動排列下來，不能偏移位置(預設值)*/
    position: relative; /*相對定位：自動排列下來，可以偏移位置*/
    position: absolute; /*絕對定位：對上層物件作做偏移定位(但上層一定要是relative)*/
    position: fixed; /*固定：固定在某個位置，不會隨著視窗滾動*/
    position: sticky; /*凍結在上方：視窗向下滾動，仍停留在上方*/
    position: inherit; /*跟隨父元素的position*/
    position: initial; /*將position設為其初始值(static)*/
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.box{
    display: block; /*區塊元素：div、p、form、hr、dl、dt、dd、ol、ul、h1~h6*/

    /*沒有width和height，只要沒有br會一直同行直到空間不足才會換行*/
    display: inline; /*行內元素：span、a、small、label*/

    /*有width和height，只要沒有br會一直同行直到空間不足才會換行*/
    display: inline-block; /*行內元素並包覆：img、input、select、button*/

    display: list-item; /*以清單方式顯示*/
    display: flex; /*彈性自由排列*/
    display: none; /*不顯示*/

    display: table; /*等於<table>*/
    display: table-row; /*等於<tr>*/
    display: table-cell; /*等於<td>、<th>*/
    display: table-header-group; /*等於<thead>*/
    display: table-row-group; /*等於<tbody>*/
    display: table-footer-group; /*等於<tfoot>*/
    display: table-column-group; /*等於<colgroup>*/
    display: table-column; /*等於<col>*/
    display: table-caption; /*等於<caption>*/
}

1
2
3

<div class="table-wrap">
    <div class="table-cell">垂直置中</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.table-wrap{
    display: table;
    width: 300px;
    height: 300px;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

 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

.box{
    transform: none; /*(預設值)*/
    transform: translate(30px,20px); /*偏移X軸30px Y軸20px*/
    transform: translateX(30px); /*偏移X軸30px*/
    transform: translateY(20px); /*偏移Y軸20px*/

    transform-style: flat; /*2D(預設值)*/
    transform-style: preserve-3d; /*3D*/

    perspective: none; /*無3D透視距離(預設值)*/
    perspective: 30px; /*3D透視距離30px*/

    perspective-origin: 30px top; /*3D透視原點位置X軸30px，Y軸最上方*/

    backface-visibility: visible; /*3D透視可看到後面的物件(預設值)*/
    backface-visibility: hidden; /*3D透視不能看到後面的物件*/

    appearance: auto; /*原本的樣式(預設值)*/
    appearance: none; /*去除原本的樣式*/

    transform: scale(1.5,2); /*縮放X軸1.5 Y軸2*/
    transform: scaleX(1.5); /*縮放X軸1.5*/
    transform: scaleY(2); /*縮放Y軸2*/

    transform: skew(30deg,20deg); /*傾斜X軸30deg*/
    transform: skewX(30deg); /*傾斜X軸30deg*/
    transform: skewY(20deg); /*傾斜Y軸20deg*/

    transform: rotate(30deg); /*旋轉30度，正值為順時針，負值為逆時針*/

    transform-origin: center; /*原點在中心*/
    transform-origin: 50px 20px; /*從原點離上方50px 離左方20px*/
}

1
2
3
4
5
6
7

ul{
    display: flex;
}
ul li{
    justify-content: center;
    align-items: center;
}

 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

.box{
    column-count: auto; /*(預設值)*/
    column-count: 3; /*分3欄*/

    column-width: auto; /*(預設值)*/
    column-width: 200px; /*用200px去分欄*/

    /*column-count及column-width只能二擇一*/

    column-gap: auto; /*(預設值)*/
    column-gap: 20px; /*欄與欄間距20px*/

    column-rule-width: auto; /*分隔線寬度(1.5px)(預設值)*/
    column-rule-width: 2px; /*分隔線寬度*/
    column-rule-width: thin; /*分隔線寬度(1px)*/
    column-rule-width: medium; /*分隔線寬度(3px)*/
    column-rule-width: thick; /*分隔線寬度(5px)*/

    column-rule-style: none; /*(預設值)*/
    column-rule-style: hidden; /*隱藏*/
    column-rule-style: dotted; /*點點線*/
    column-rule-style: dashed; /*虛線*/
    column-rule-style: solid; /*實線*/
    column-rule-style: double; /*雙實線*/
    column-rule-style: groove; /*凸起實線*/
    column-rule-style: ridge; /*更加凸起實線*/
    column-rule-style: inset; /*3D凹*/
    column-rule-style: outset; /*3D凸*/

    column-rule-color: black; /*分隔線黑色(預設值)*/
    column-rule-color: #333333; /*分隔線顏色*/

    column-span: none; /*在重要的字上使用時，會被分欄(預設值)*/
    column-span: all; /*在重要的字上使用時，不會被分欄*/

    column-rule: style | width | color;
}

1
2
3
4
5
6

.box{
    position: relative | absolute;
    z-index: auto; /*自動(預設值)*/
    z-index: 999; /*順序排列在上層999*/
    z-index: -30; /*順序排列在下層30*/
}