CSS

出自六年制學程
在2015年8月23日 (日) 19:25由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

Cascading Style Sheets(串接樣式表)

語法

特殊字元

  1.  :空格,但不是值爲32(十六進制20),是值160(十六進制A0)
  2. &#9;:TAB,只在<PRE>...</PRE>之間有效
  3. &#10;:換行,只在<PRE>...</PRE>之間有效

顏色

(一)十六進位顏色

這是最常用的一種顏色表現形式。十六進位顏色值的規定格式是:

#RRGGBB

RR表示紅色;GG表示綠色;BB表示藍色。它們的取值範圍都介於00~FF之間。

例如:

  1. 紅色的十六進位顏色表現形式為:#FF0000
    RR為FF,GG為00,BB為00。
  2. 綠色的十六進位顏色表現形式為:#00FF00
    RR為00,GG為FF,BB為00。
  3. 藍色的十六進位顏色表現形式為:#0000FF
    RR為00,GG為00,BB為FF。

(二)RGB顏色

RGB顏色值的規定格式是:

RGB(x,x,x)

第一個x表示紅色;第二個x表示綠色;第三個x表示藍色。它們都可以定義為0~255之間的整數,或者百分比為0%~100%之間的整數。

例如:

  1. 紅色的RGB顏色值的表現形式為:RGB(255,0,0) 或者 RGB(100%,0%,0%)
  2. 綠色的RGB顏色值的表現形式為:RGB(0,255,0) 或者 RGB(0%,100%,0%)
  3. 藍色的RGB顏色值的表現形式為:RGB(0,0,255) 或者 RGB(0%,0%,100%)

(三)基本色

ColorColor NameHEXRGB
 black#0000000,0,0
 silver#C0C0C0192,192,192
 gray#808080128,128,128
 white#FFFFFF255,255,255
 maroon#800000128,0,0
 red#FF0000255,0,0
 purple#800080128,0,128
 fuchsia#FF00FF255,0,255
 green#0080000,128,0
 lime#00FF000,255,0
 olive#808000128,128,0
 yellow#FFFF00255,255,0
 navy#0000800,0,128
 blue#0000FF0,0,255
 teal#0080800,128,128
 aqua#00FFFF0,255,255

(四)系統色(CSS3後不建議再使用)

ColorColor Name
 activeborder
 activecaption
 appworkspace
 background
 buttonface
 buttonhighlight
 buttonshadow
 buttontext
 captiontext
 graytext
 highlight
 highlighttext
 inactiveborder
 inactivecaption
 inactivecaptiontext
 infobackground
 infotext
 menu
 menutext
 scrollbar
 threeddarkshadow
 threedface
 threedhighlight
 threedlightshadow
 threedshadow
 window
 windowframe
 windowtext

表格(table)

display

  • display:block:區塊,元素會以區塊方式呈現,除非設定 position 或 float。
    1. 可以設定高度(height)、寬度(width)、上方與下方距離
    2. div、p、ul、li 均屬 block。
  • display:inline:所有文字或圖片均不換行,也就是全部都會是同一行的意思。
    1. 高度與寬度都不能設定,文字或圖片所佔的寬度就是他的寬度
    2. span、a、input、img、em 均屬 inline。
  • display:table-cell:假裝表格,其中的子元素可以輕易垂直置中

範例一:

  1. <div style= 'display:block'>元素一</div>
    <div style= 'display:block'>元素二</div>
  2. 元素一
    元素二

範例二:

  1. <div style= 'display:inline'>元素一</div>
    <div style= 'display:inline'>元素二</div>
  2. 元素一
    元素二

水平置中

  1. 母元素 text-align:center 子元素的 display 為 inline、inline-block
  2. 母子元素均為 block ,第一個子元素設 float:left;margin-left:calc(50% - 適當值px); ,calc()中的減號前後都要有空白

垂直置中

(一)設定行高 ( line-height )

適用於子元素「單行」的「行內元素」( inline、inline-block ),例如單行的標題,或是已經設為 inline-block 屬性的 div。若將母元素的 line-height 設成和高度一樣的數值,則母元素內部的行內元素就會被垂直置中。因為是行高,所以會在行內元素的上下都加上行高的 1/2 ,所以就垂直置中了!不過由此就可以看出,為什麼必須要單行的行內元素,因為如果多行,第二行與第一行的間距會變超大,就不是我們所期望的效果了。

範例一:Div設 height 、 line-height 設同值,文字自然會垂直置中

  1. <DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
    測試文字垂直置中
    </DIV>
  2. 測試文字垂直置中

範例二:外層 Div 的 height 、 line-height 設不同值,並不會置中

  1. <Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'>
    <div style='display:inline-block;width:30px;height:30px;background:#c00;'></div>
    </Div>

(二)vertical-align

vertical-align 垂直方向的對齊,用於「圖照」或「表格欄位內的文字」垂直對齊效果,諸參數:

  1. baseline:基礎線,約在文字的中間位置
  2. sub:下標
  3. super:上標
  4. top:該行元素的最高處
  5. text-top:該行文字的最高處
  6. middle:置中
  7. bottom:該行元素的最低處
  8. text-bottom:該行文字的最低處
  9. 百分比(%):以百分比來讓圖片垂直對齊該行文字,可以有負值

vertical-align:middle 雖然是垂直置中,不過卻是指在外框內的所有元素垂直位置互相置中,並不是相對於外框的高度垂直置中。

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
    </Div>

如果有一個方塊變成了高度 100%,那麼其他的方塊就會真正的垂直置中。

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
    </Div>

但是:

  1. 我們總不能每次要垂直置中,都要添加一個奇怪的 div 在裏頭
  2. 所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內,
  3. 讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
  4. 偽 div 的 display 須為 inline-block,畢竟 vertical-align:middle; 是針對行內元素

依上述要領實作如下,添置偽元素 ::before :

  1. .div0::before{
    width:0;content:'';
    vertical-align:middle;height:100%;
    display:inline-block;position:relative;
    }

(三)動態計算

不是處處都能用 inline-block,block也可使用 top 樣式來垂直置中,其值為 calc(50% - 半高px):

  1. calc 為動態計算,50% 代表母元素高度之半,「-」是減號,前後都必須是空白,再減去自身高度之半。
  2. 自身元素的 position 必須為 relative,不然 top 失去作用
  3. 只能用 top 不能用 margin-top ,因為 margin-top 的 50% 代表的是母元素的寬度之半。
  4. float:left;是各相鄰區塊向左漂移靠攏;第一個區塊取適當的左距。

依以上要領實作如下:

  1. <Div style='width:200px;height:100px;border:1px solid #000;'>
    <div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50% - 15px);float:left;margin-left:calc(50% - 45px);'></div>
    <div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50% - 30px);float:left;'></div>
    <div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50% - 20px);float:left;'></div>
    </Div>

(四)假裝表格

td 中下一行 vertical-align:middle 就可以垂直置中,而其 display 樣式是 table-cell 。所以我們只要將母元素設為 display:table-cell;vertical-align:middle; ,其子元素就會置中。

  1. <Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>
    假表格垂直置中
    </Div>
  2. 假表格垂直置中

(五)margin:auto

母元素設 position:relative; ,子元素設 position:absolute;margin:auto;自動置中

  1. <Div style='position:relative;width:200px;height:100px;border:1px solid #000;'>
    	<div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'></div>
    </Div>

(六)垂直位移 CSS3

CSS3可以使用transform樣式,對子元素做如下操作:

  1. 用 top:50%; 下降母元素的 50% 。
  2. 用 transform:translateY(-50%) 上升子元素的 50% , transform 管位移、旋轉、變形, translateY 為垂直位移
  3. position:relative

依以上要領實作如下:

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'></div>
    </Div>

(七)flexbox CSS3

display 設 flex、垂直 align-items 設 center、水平 justify-content 設 center:

  1. <Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'>
    <div style='width:100px;height:50px;background:#099;'></div>
    </Div>