CSS（Cascading Style Sheets）串接樣式表：一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護，意指在文件中CSS不會單獨存在，只是輔助結構化文件的樣式呈現。
套用方式
CSS套用在HTML上面的方式有以下三種：
- 行內樣式：
<p style="color:red">文字</p>
- 頁面樣式：
<style> .fontRed{ color:red } </style> <p class="fontRed"></p><style> #fontRed{ color:red } </style> <p id="fontRed"></p> - 串接樣式：
.fontRed{ color:red; }<link href="style.css" rel="stylesheet"> <p class="fontRed">文字</p>
階層選取
CSS在撰寫時需注意HTML階層上面的應用：
套用到所有符合的元素：
[full_width]
[four_fifth padding=”0 10px 0 0px”]
<style>
p{
color:red;
}
</style>
<div class="box">
<p>第1段</p>
<p>第2段</p>
<div>
<p>第3段</p>
<p>第4段</p>
</div>
<p>第5段</p>
</div>
<p>第6段</p>
<p>第7段</p>
[/four_fifth]
[one_fifth_last padding=”10px 0px 0 10px”]
結果：
第1段
第2段
第3段
第4段
第5段
第6段
第7段
[/one_fifth_last]
[/full_width]
套用到某元素內所有符合的元素：
[full_width]
[four_fifth padding=”0 10px 0 0px”]
<style>
.box p{
color:red;
}
</style>
<div class="box">
<p>第1段</p>
<p>第2段</p>
<div>
<p>第3段</p>
<p>第4段</p>
</div>
<p>第5段</p>
</div>
<p>第6段</p>
<p>第7段</p>
[/four_fifth]
[one_fifth_last padding=”10px 0px 0 10px”]
結果：
第1段
第2段
第3段
第4段
第5段
第6段
第7段
[/one_fifth_last]
[/full_width]
套用到某元素內第一層符合的元素
[full_width]
[four_fifth padding=”0 10px 0 0px”]
<style>
.box > p{
color:red;
}
</style>
<div class="box">
<p>第1段</p>
<p>第2段</p>
<div>
<p>第3段</p>
<p>第4段</p>
</div>
<p>第5段</p>
</div>
<p>第6段</p>
<p>第7段</p>
[/four_fifth]
[one_fifth_last padding=”10px 0px 0 10px”]
結果：
第1段
第2段
第3段
第4段
第5段
第6段
第7段
[/one_fifth_last]
[/full_width]
套用到該元素同階層的下一個符合的元素：
[full_width]
[four_fifth padding=”0 10px 0 0px”]
<style>
.box + p{
color:red;
}
</style>
<div class="box">
<p>第1段</p>
<p>第2段</p>
<div>
<p>第3段</p>
<p>第4段</p>
</div>
<p>第5段</p>
</div>
<p>第6段</p>
<p>第7段</p>
[/four_fifth]
[one_fifth_last padding=”10px 0px 0 10px”]
結果：
第1段
第2段
第3段
第4段
第5段
第6段
第7段
[/one_fifth_last]
[/full_width]
套用到該元素同階層後所有符合的元素：
[full_width]
[four_fifth padding=”0 10px 0 0px”]
<style>
.box ~ p{
color:red;
}
</style>
<div class="box">
<p>第1段</p>
<p>第2段</p>
<div>
<p>第3段</p>
<p>第4段</p>
</div>
<p>第5段</p>
</div>
<p>第6段</p>
<p>第7段</p>
[/four_fifth]
[one_fifth_last padding=”10px 0px 0 10px”]
結果：
第1段
第2段
第3段
第4段
第5段
第6段
第7段
[/one_fifth_last]
[/full_width]
常用樣式列表
需因應不同的需求與狀況選擇使用的方式，另外也需注意套用時疊加與取代的狀況，以下為各位整理出大多數的CSS樣式清單：
| 樣式名稱 | 說明 | 範例值 | 備註 |
|---|---|---|---|
| background-color | 背景顏色 | background-color : #EEEEEE background-color : rgb(200,200,200) |
|
| background-image | 背景圖 | background-image : url(檔案路徑) | |
| background-repeat | 背景圖片重複方式 | background-repeat : repeat background-repeat : repeat-x background-repeat : repeat-y background-repeat : no-repeat |
預設：repeat |
| background-attachment | 背景是否跟隨捲動 | background-attachment : scroll background-attachment : fixed |
預設：scroll |
| background-position | 背景位置 | background-position : center center background-position : 50% 50% background-position : 50px 50px |
|
| background-size | 背景尺寸 | background-size : 80px 100px background-size : 80% 100% |
CSS3 新增 |
| background-origin | 背景定位 | background-origin : content-box background-origin : padding-box background-origin : border-box |
CSS3 新增 |
| 樣式名稱 | 說明 | 範例值 | 備註 |
|---|---|---|---|
| color | 字體顏色 | color : #000000 color : rgb(0,0,0) |
|
| font-family | 字體 | font-family : “微軟正黑體” | 用戶端若沒有安裝該字體則無法呈現效果 |
| font-size | 字體大小 | font-size : 12px | |
| font-weight | 字體粗細 | font-weight : 100(Max:900) font-weight : bold font-weight : normal |
|
| font-style | 字體樣式 | font-style : italic font-style : oblique font-style : normal |
|
| direction | 文字方向 | direction : ltr direction : rtl |
|
| word-spacing | 單字間距 | word-spacing : 5px | |
| letter-spacing | 字母間距 | letter-spacing : 5px | |
| line-height | 行距 | line-height : 24px | |
| text-align | 對齊方式 | text-align : left text-align : center text-align : right text-align : justify |
|
| text-decoration | 文字裝飾 | text-decoration : underline text-decoration : line-through |
|
| text-indent | 縮排 | text-indent : 24px | |
| text-transform | 大小寫轉換 | text-transform : capitalize text-transform : uppercase text-transform : lowercase text-transform : none |
|
| text-shadow | 文字陰影 | text-shadow: 2px 2px 10px #000000 (橫向距離 縱向距離 模糊程度 顏色) |
CSS3新增 |
| @font-face | 自訂字體 | @font-face{ font-family: myFont; src: url(fonts/DFPiPiStd-W5.otf), url(fonts/DFPiPiStd-W5.eot);/* IE9+ */ } |
CSS3新增 |
| word-wrap | 文字換行 | word-wrap : break-word word-wrap : normal |
CSS3新增 |
| text-overflow | 文字溢位處理 | text-overflow : clip text-overflow : ellipsis |
CSS3新增 |
| 樣式名稱 | 說明 | 範例值 | 備註 |
|---|---|---|---|
| box-sizing | 區塊單位基準 | box-sizing : content-box box-sizing : border-box |
預設：content-box 尺寸計算基準點以內容為準 新增內距、間距都會增加區塊尺寸 |
| width | 寬度 | width : 500px | |
| min-width | 最小寬度 | min-width : 200px | CSS3新增 |
| max-width | 最大寬度 | max-width : 700px | CSS3新增 |
| height | 高度 | height : 300px | |
| min-height | 最小高度 | min-height : 100px | CSS3新增 |
| max-height | 最大高度 | max-height : 500px | CSS3新增 |
| margin | 間距 | margin : auto（區塊置中） margin : 1px 2px 3px 4px（上、右、下、左） margin : 1px 2px（上下、左右） margin-top : 1px（上） margin-right : 1px（右） margin-bottom : 1px（下） margin-left : 1px（左） |
|
| padding | 內距 | padding :1px 2px 3px 4px（上、右、下、左） padding :1px 2px（上下、左右） padding-top : 1px（上） padding-right : 1px（右） padding-bottom : 1px（下） padding-left : 1px（左） |
|
| border-style | 邊框樣式 | border-style : solid border-style : dashed border-style : double border-style : dotted border-style : groove border-style : ridge border-style : inset border-style : outset |
相關樣式： |
| border-width | 邊框寬度 | border-width : 1px | 相關樣式： border-top-width border-right-width border-bottom-width border-left-width |
| border-color | 邊框顏色 | border-color : #CFCFCF | 相關樣式： border-top-color border-right-color border-bottom-color border-left-color |
| border | 邊框 | border : 1px soid black （寬度 樣式 顏色） |
|
| border-radius | 邊框圓角 | border-radius: 25px | CSS3新增 |
| border-collapse | 邊框摺疊 | border-collapse : separate border-collapse : collapse |
|
| border-image-outset | 邊框圖起點 | border-image-outset : 10px | CSS3新增 |
| border-image-repeat | 邊框圖重複模式 | border-image-repeat : stretch border-image-repeat : round border-image-repeat : space border-image-repeat : repeat |
CSS3新增 |
| border-image-source | 邊框圖來源 | border-image-source : url(border.png) | CSS3新增 |
| border-image-width | 邊框圖寬度 | border-image-width : 10px | CSS3新增 |
| border-image-slice | 邊框圖裁切 | border-image-slice : 30% | CSS3新增 |
| border-image | 邊框圖 | border-image : url(border.png) 30 round | CSS3新增 |
| box-shadow | 區塊陰影 | box-shadow : 5px 5px 10px #003 | CSS3新增 |
| box-decoration-break | 區塊裝飾斷點 | box-decoration-break : clone box-decoration-break : slice |
CSS3新增 |
| overflow | 溢位處理 | overflow : scroll overflow : hidden overflow : auto |
相關樣式： overflow-x overflow-y |
| float | 浮動 | float : left float : right float : none |
|
| clear | 清除浮動 | clear: left clear: right clear: both |
|
| display | 顯示方式 | display : inline display : block display : contents display : flex display : grid display : inline-block display : inline-flex display : inline-grid display : inline-table display : list-item display : run-in display : table display : table-caption display : table-column-group display : table-header-group display : table-footer-group display : table-row-group display : table-cell display : table-column display : table-row display : none |
|
| position | 定位 | position : static position : absolute position : fixed position : relative position : sticky |
相關樣式： top : 100 right : 100 bottom : 100 left : 100 |
| z-index | Z軸順序 | z-index : 1 | 越大順序越高 |
| outline-color | 外框顏色 | outline-color : black | |
| outline-offset | 外框錯位 | outline-offset : 15px | |
| outline-style | 外框樣式 | outline-style : dotted | 樣式可參考border-style |
| outline-width | 外框寬度 | outline-width : 5px; | |
| outline | 外框 | outline : 5px dotted green （寬度 樣式 顏色） |
| 樣式名稱 | 說明 | 範例值 | 備註 |
|---|---|---|---|
| list-style-type | 清單符號類型 | list-style-type : circle list-style-type : square list-style-type : upper-roman list-style-type : lower-alpha list-style-type : none |
|
| list-style-position | 清單符號位置 | list-style-position : outside list-style-position : inside |
|
| list-style-image | 清單符號圖片 | list-style-image : url(“sqpurple.gif”); | |
| list-style | 項目符號 | list-style : square inside url(“sqpurple.gif”); |
| 樣式名稱 | 說明 | 範例值 | 備註 |
|---|---|---|---|
| cursor | 滑鼠指標 | cursor : default cursor : auto cursor : pointer |
|
| opacity | 透明度 | opacity : 0.5 | 數值介於0~1之間 |
| @media | 裝置樣式 | @media screen and (min-width: 600px) {
/* CSS將套用在螢幕寬度600px（含）以上 */ } @media screen and (min-width: 300px) and (max-width: 599px) { /* CSS將套用螢幕寬度在 300px ~ 599px 之間 */ } @media screen and (max-width: 299px) { /* CSS將套用在螢幕寬度299px（含）以下 */ } |
CSS3新增 |