檢視 CSS 的原始碼

[[分類:HTML]]
Cascading Style Sheets(串接樣式表)
==語法==
===特殊字元===
#&amp;nbsp;：空格，但不是值爲32(十六進制20)，是值160(十六進制A0)
#&amp;#9;：TAB，只在&lt;PRE&gt;...&lt;/PRE&gt;之間有效
#&amp;#10;：換行，只在&lt;PRE&gt;...&lt;/PRE&gt;之間有效
===顏色===
====(一)基本色====
<table class=nicetable>
<tr><th>Color</th><th>Color Name</th><th>HEX</th><th>RGB</th></tr>
<tr><td style='background:black;'>&nbsp;</td><td><dfn>black</dfn></td><td>#000000</td><td>0,0,0</td></tr>
<tr><td style='background:silver;'>&nbsp;</td><td><dfn>silver</dfn></td><td>#C0C0C0</td><td>192,192,192</td></tr>
<tr><td style='background:gray;'>&nbsp;</td><td><dfn>gray</dfn></td><td>#808080</td><td>128,128,128</td></tr>
<tr><td style='background:white;'>&nbsp;</td><td><dfn>white</dfn></td><td>#FFFFFF</td><td>255,255,255</td></tr>
<tr><td style='background:maroon;'>&nbsp;</td><td><dfn>maroon</dfn></td><td>#800000</td><td>128,0,0</td></tr>
<tr><td style='background:red;'>&nbsp;</td><td><dfn>red</dfn></td><td>#FF0000</td><td>255,0,0</td></tr>
<tr><td style='background:purple;'>&nbsp;</td><td><dfn>purple</dfn></td><td>#800080</td><td>128,0,128</td></tr>
<tr><td style='background:fuchsia;'>&nbsp;</td><td><dfn>fuchsia</dfn></td><td>#FF00FF</td><td>255,0,255</td></tr>
<tr><td style='background:green;'>&nbsp;</td><td><dfn>green</dfn></td><td>#008000</td><td>0,128,0</td></tr>
<tr><td style='background:lime;'>&nbsp;</td><td><dfn>lime</dfn></td><td>#00FF00</td><td>0,255,0</td></tr>
<tr><td style='background:olive;'>&nbsp;</td><td><dfn>olive</dfn></td><td>#808000</td><td>128,128,0</td></tr>
<tr><td style='background:yellow;'>&nbsp;</td><td><dfn>yellow</dfn></td><td>#FFFF00</td><td>255,255,0</td></tr>
<tr><td style='background:navy;'>&nbsp;</td><td><dfn>navy</dfn></td><td>#000080</td><td>0,0,128</td></tr>
<tr><td style='background:blue;'>&nbsp;</td><td><dfn>blue</dfn></td><td>#0000FF</td><td>0,0,255</td></tr>
<tr><td style='background:teal;'>&nbsp;</td><td><dfn>teal</dfn></td><td>#008080</td><td>0,128,128</td></tr>
<tr><td style='background:aqua;'>&nbsp;</td><td><dfn>aqua</dfn></td><td>#00FFFF</td><td>0,255,255</td></tr>
</table>

===表格(table)===
*[http://css-teach.7happy.com.tw/css-table.php 文件]
===display===
*display:block：區塊，元素會以區塊方式呈現，除非設定 position 或 float。
*#可以設定高度(height)、寬度(width)、上方與下方距離
*#div、p、ul、li 均屬 block。
*display:inline：所有文字或圖片均不換行，也就是全部都會是同一行的意思。
*#高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度
*#span、a、input、img、em 均屬 inline。
*display:table-cell：假裝表格，其中的子元素可以輕易垂直置中
範例一：
#&lt;div style= 'display:block'&gt;元素一&lt;/div&gt;<br/>&lt;div style= 'display:block'&gt;元素二&lt;/div&gt;
#<div style= 'display:block'>元素一</div><div style= 'display:block'>元素二</div>
範例二：
#&lt;div style= 'display:inline'&gt;元素一&lt;/div&gt;<br/>&lt;div style= 'display:inline'&gt;元素二&lt;/div&gt;
#<div style= 'display:inline'>元素一</div><div style= 'display:inline'>元素二</div>

===水平置中===
#母元素 text-align:center 子元素的 display 為 inline、inline-block
#母子元素均為 block ，第一個子元素設 float:left;margin-left:calc(50%&nbsp;-&nbsp;適當值px); ，calc()中的減號前後都要有空白

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

範例一：Div設 height 、 line-height 設同值，文字自然會垂直置中
#&lt;DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'&gt;<br/>測試文字垂直置中<br/>&lt;/DIV&gt;
#<DIV style='width:200px;height:100px;line-height:100px;background-color:#CF9;text-align:center;'>測試文字垂直置中</DIV>
範例二：外層 Div 的 height 、 line-height 設不同值，並不會置中
#&lt;Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='display:inline-block;width:30px;height:30px;background:#c00;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果，諸參數：
#baseline：基礎線，約在文字的中間位置
#sub：下標
#super：上標
#top：該行元素的最高處
#text-top：該行文字的最高處
#middle：置中
#bottom：該行元素的最低處
#text-bottom：該行文字的最低處
#百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值

vertical-align:middle 雖然是垂直置中，不過卻是指<b>在外框內的所有元素垂直位置互相置中</b>，並不是相對於外框的高度垂直置中。
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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%，那麼其他的方塊就會真正的垂直置中。
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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>
但是：
#我們總不能每次要垂直置中，都要添加一個奇怪的 div 在裏頭
#所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內，
#讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
#偽 div 的 display 須為 inline-block，畢竟 vertical-align:middle; 是針對行內元素
依上述要領實作如下，添置偽元素 ::before ：
#.div0::before{<br/>  width:0;content:<nowiki>''</nowiki>;<br/>  vertical-align:middle;height:100%;<br/>  display:inline-block;position:relative;<br/>}
#<Div class=div0 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>

====(三)動態計算====
不是處處都能用 inline-block，block也可使用 top 樣式來垂直置中，其值為 calc(50%&nbsp;-&nbsp;半高px)：
#calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
#自身元素的 position 必須為 relative，不然 top 失去作用
#只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
#float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。
依以上要領實作如下：
#&lt;Div style='width:200px;height:100px;border:1px solid #000;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50%&nbsp;-&nbsp;15px);float:left;margin-left:calc(50% - 45px);'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50%&nbsp;-&nbsp;30px);float:left;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50%&nbsp;-&nbsp;20px);float:left;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;<br/>
#<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; ，其子元素就會置中。
#&lt;Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'&gt;<br/>假表格垂直置中<br/>&lt;/Div&gt;
#<Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>假表格垂直置中</Div>

====(五)margin:auto====
母元素設 position:relative; ，子元素設 position:absolute;margin:auto;自動置中
#<pre>&lt;Div style='position:relative;width:200px;height:100px;border:1px solid #000;'&gt;&#10;&#9;&lt;div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'&gt;&lt;/div&gt;&#10;&lt;/Div&gt;</pre>
#<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樣式，對子元素做如下操作：
#用 top:50%; 下降母元素的 50% 。
#用 transform:translateY(-50%) 上升子元素的 50% ， transform 管位移、旋轉、變形， translateY 為垂直位移
#position:relative
依以上要領實作如下：
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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：
#&lt;Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'&gt;<br/>&lt;div style='width:100px;height:50px;background:#099;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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>