CSS 介紹

CSS(Cascading Style Sheets)串接樣式表:一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言,由W3C定義和維護,意指在文件中CSS不會單獨存在,只是輔助結構化文件的樣式呈現。

套用方式

CSS套用在HTML上面的方式有以下三種:

  1. 行內樣式:
    <p style="color:red">文字</p>
  2. 頁面樣式:
    <style>
    .fontRed{
       color:red
    }
    </style>
    
    <p class="fontRed"></p>
    <style>
    #fontRed{
       color:red
    }
    </style>
    
    <p id="fontRed"></p>
  3. 串接樣式:
    .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 新增

樣式名稱 說明 範例值 備註
文字類
數值絕對單位:px, pt , cm;數值相對單位:rem, %
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-top-style
border-right-style
border-bottom-style
border-left-style

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新增