CSS:修訂版本之間的差異
(→選擇器) |
(→選擇器) |
||
第 274 行: | 第 274 行: | ||
</tr> | </tr> | ||
</table> | </table> | ||
− | a:link / a:visited / a:hover / a:active | + | a:link / a:visited / a:hover / a:active 須依如上順序定義,a:hover 需放置在 a:link 跟 a:visited 之後, a:active 放置在 a:hover 之後。 |
==語法== | ==語法== |
2019年1月29日 (二) 17:57的修訂版本
Cascading Style Sheets(串接樣式表)
目錄
選擇器
選擇器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 選擇 class='intro' 的所有元素。 | 1 |
#id | #firstname | 選擇 id='firstname' 的所有元素。 | 1 |
* | * | 選擇所有元素。 | 2 |
element | p | 選擇所有 <p> 元素。 | 1 |
element,element | div,p | 選擇所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 選擇 <div> 元素內部的所有 <p> 元素。 | 1 |
element>element | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 選擇緊接在 <div> 元素之後的所有 <p> 元素。 | 2 |
[attribute] | [target] | 選擇帶有 target 屬性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 選擇 target='_blank' 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 選擇 title 屬性包含單詞 'flower' 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 選擇 lang 屬性值以 'en' 開頭的所有元素。 | 2 |
:link | a:link | 選擇所有未被訪問的鏈接。 | 1 |
:visited | a:visited | 選擇所有已被訪問的鏈接。 | 1 |
:active | a:active | 選擇活動鏈接。 | 1 |
:hover | a:hover | 選擇鼠標指針位於其上的鏈接。 | 1 |
:focus | input:focus | 選擇獲得焦點的 input 元素。 | 2 |
:first-letter | p:first-letter | 選擇每個 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 選擇每個 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 選擇屬於父元素的第一個子元素的每個 <p> 元素。 | 2 |
:before | p:before | 在每個 <p> 元素的內容之前插入內容。 | 2 |
:after | p:after | 在每個 <p> 元素的內容之後插入內容。 | 2 |
:lang(language) | p:lang(it) | 選擇帶有以 'it' 開頭的 lang 屬性值的每個 <p> 元素。 | 2 |
element1~element2 | p~ul | 選擇前面有 <p> 元素的每個 <ul> 元素。 | 3 |
[attribute^=value] | a[src^='https'] | 選擇其 src 屬性值以 'https' 開頭的每個 <a> 元素。 | 3 |
[attribute$=value] | a[src$='.pdf'] | 選擇其 src 屬性以 '.pdf' 結尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*='abc'] | 選擇其 src 屬性中包含 'abc' 子串的每個 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。 | 3 |
:only-child | p:only-child | 選擇屬於其父元素的唯一子元素的每個 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 選擇屬於其父元素的第二個子元素的每個 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,從最後一個子元素開始計數。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是從最後一個子元素開始計數。 | 3 |
:last-child | p:last-child | 選擇屬於其父元素最後一個子元素每個 <p> 元素。 | 3 |
:root | :root | 選擇文檔的根元素。 | 3 |
:empty | p:empty | 選擇沒有子元素的每個 <p> 元素(包括文本節點)。 | 3 |
:target | #news:target | 選擇當前活動的 #news 元素。 | 3 |
:enabled | input:enabled | 選擇每個啟用的 <input> 元素。 | 3 |
:disabled | input:disabled | 選擇每個禁用的 <input> 元素 | 3 |
:checked | input:checked | 選擇每個被選中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 選擇非 <p> 元素的每個元素。 | 3 |
::selection | ::selection | 選擇被用戶選取的元素部分。 | 3 |
a:link / a:visited / a:hover / a:active 須依如上順序定義,a:hover 需放置在 a:link 跟 a:visited 之後, a:active 放置在 a:hover 之後。
語法
特殊字元
編碼 | 不換行 | 用於 URL | HTML | 名稱 | 區域 | 顯示 | |
---|---|---|---|---|---|---|---|
U+0020 (32) |
空格 | 基本拉丁 | ] [ | ||||
普通半形空格,同 ASCII 字元 0x20 | |||||||
U+00A0 (160) |
✓ | | 不換行空格(No-Break Space) | Latin-1 Supplement | ] [ | ||
同 U+0020,但不換行 | |||||||
U+2002 (8194) |
  | En 空格(En Space)或 Nut | 一般標點 | ] [ | |||
與 en 同寬(em之一半)。 | |||||||
U+2003 |   | Em 空格(Em Space)或 Mutton | 一般標點 | ] [ | |||
與 em 同寬。 | |||||||
U+2004 | Em 三分之一空格(Three-Per-Em Space)或 Thick Space | 一般標點 | ] [ | ||||
em 之三分之一寬 | |||||||
U+2005 | Em 四分之一空格(Four-Per-Em Space)或 Mid Space | 一般標點 | ] [ | ||||
em 之四分之一寬 | |||||||
U+2006 | Em 六分之一空格(Six-Per-Em Space) | 一般標點 | ] [ | ||||
em 之六分之一寬。電腦字型有時與 U+2009 等同。 | |||||||
U+2007 | ✓ | 數字空格(Figure Space) | 一般標點 | ] [ | |||
用於分隔數字之定位符,與單一數字同寬 | |||||||
U+2008 | 標點穴格 | 一般標點 | ] [ | ||||
與同字型之窄標點同寬,即句號或逗號(西方語文)之寬度 | |||||||
U+2009 |   | 窄空格(Thin Space) | 一般標點 | ] [ | |||
em 之六分之一(有時設計成五分之一)寬。建議用作 SI 單位數字之千位分隔符。與 U+2002 至 U+2008 不同,其寬可根據排版調整 | |||||||
U+200A | 髮寬空格(Hair Space) | 一般標點 | ] [ | ||||
窄於窄空格(thin space) | |||||||
U+200B | 零寬空格(Zero Width Space,簡稱「ZWSP」) | 一般標點 | ][ | ||||
U+200C | ✓ | ‌ | 零寬不連字(Zero Width Non Joiner,簡稱「ZWNJ」) | 一般標點 | ][ | ||
U+200D | ✓ | ‍ | 零寬連字(Zero Width Joiner,簡稱「ZWJ」) | 一般標點 | ][ | ||
U+202F | ✓ | 窄式不換行空格(Narrow No-Break Space) | 一般標點 | ] [ | |||
U+205F | 中數學空格(Medium Mathematical Space,簡稱「MMSP」) | 一般標點 | ] [ | ||||
用於數學方程式。em 之 18 分之 4 寬在數學排版領域,空格寬度通常以十八份之幾的方式給定;4/18 em 可用於數個情況,例如數式 a + b 中 a 與 + 及 + 與 b 之間 | |||||||
U+2060 | ✓ | ✓ | 文字連接符(Word Joiner) | 一般標點 | ][ | ||
同 U+200B,但該處不能換行。Unicode 3.2 新增,以代替 U+FEFF 字元廢止之零寬不換行空格功能 | |||||||
U+3000 (12288) |
表意文字空格 | CJK 符號及標點 | ] [ | ||||
與 CJK 文字同寬(全形) | |||||||
U+FEFF | ✓ | ✓ | 零寬不換行空格(Zero Width No-Break Space) = 位元組順序記號(Byte Order Mark,簡稱「BOM」) | Arabic Presentation Forms-B | ][ | ||
主要用作位元組次序標記字元。原來之不換行指示功能於 Unicode 3.2 起廢止,代之以 U+2060。 |
- 空格:
-  :十六進制20
- :不換行空格(No-Break Space),值160(十六進制A0)
- 	:TAB,只在<PRE>...</PRE>之間有效
- :換行,只在<PRE>...</PRE>之間有效
顏色
(一)十六進位顏色
這是最常用的一種顏色表現形式。十六進位顏色值的規定格式是:
#RRGGBB
RR表示紅色;GG表示綠色;BB表示藍色。它們的取值範圍都介於00~FF之間。
例如:
- 紅色的十六進位顏色表現形式為:#FF0000
RR為FF,GG為00,BB為00。 - 綠色的十六進位顏色表現形式為:#00FF00
RR為00,GG為FF,BB為00。 - 藍色的十六進位顏色表現形式為:#0000FF
RR為00,GG為00,BB為FF。
(二)RGB顏色
RGB顏色值的規定格式是:
RGB(x,x,x)
第一個x表示紅色;第二個x表示綠色;第三個x表示藍色。它們都可以定義為0~255之間的整數,或者百分比為0%~100%之間的整數。
例如:
- 紅色的RGB顏色值的表現形式為:RGB(255,0,0) 或者 RGB(100%,0%,0%)
- 綠色的RGB顏色值的表現形式為:RGB(0,255,0) 或者 RGB(0%,100%,0%)
- 藍色的RGB顏色值的表現形式為:RGB(0,0,255) 或者 RGB(0%,0%,100%)
(三)基本色
Color | Color Name | HEX | RGB |
---|---|---|---|
black | #000000 | 0,0,0 | |
silver | #C0C0C0 | 192,192,192 | |
gray | #808080 | 128,128,128 | |
white | #FFFFFF | 255,255,255 | |
maroon | #800000 | 128,0,0 | |
red | #FF0000 | 255,0,0 | |
purple | #800080 | 128,0,128 | |
fuchsia | #FF00FF | 255,0,255 | |
green | #008000 | 0,128,0 | |
lime | #00FF00 | 0,255,0 | |
olive | #808000 | 128,128,0 | |
yellow | #FFFF00 | 255,255,0 | |
navy | #000080 | 0,0,128 | |
blue | #0000FF | 0,0,255 | |
teal | #008080 | 0,128,128 | |
aqua | #00FFFF | 0,255,255 |
(四)系統色(CSS3後不建議再使用)
Color | Color 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。
- 可以設定高度(height)、寬度(width)、上方與下方距離
- div、p、ul、li 均屬 block。
- display:inline:所有文字或圖片均不換行,也就是全部都會是同一行的意思。
- 高度與寬度都不能設定,文字或圖片所佔的寬度就是他的寬度
- span、a、input、img、em 均屬 inline。
- display:table-cell:假裝表格,其中的子元素可以輕易垂直置中
範例一:
- <div style= 'display:block'>元素一</div>
<div style= 'display:block'>元素二</div> - 元素一元素二
範例二:
- <div style= 'display:inline'>元素一</div>
<div style= 'display:inline'>元素二</div> - 元素一元素二
水平置中
- 母元素 text-align:center 子元素的 display 為 inline、inline-block
- 母子元素均為 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 設同值,文字自然會垂直置中
- <DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
測試文字垂直置中
</DIV> - 測試文字垂直置中
範例二:外層 Div 的 height 、 line-height 設不同值,並不會置中
- <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 雖然是垂直置中,不過卻是指在外框內的所有元素垂直位置互相置中,並不是相對於外框的高度垂直置中。
- <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%,那麼其他的方塊就會真正的垂直置中。
- <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{
width:0;content:'';
vertical-align:middle;height:100%;
display:inline-block;position:relative;
}
(三)動態計算
不是處處都能用 inline-block,block也可使用 top 樣式來垂直置中,其值為 calc(50% - 半高px):
- calc 為動態計算,50% 代表母元素高度之半,「-」是減號,前後都必須是空白,再減去自身高度之半。
- 自身元素的 position 必須為 relative,不然 top 失去作用
- 只能用 top 不能用 margin-top ,因為 margin-top 的 50% 代表的是母元素的寬度之半。
- float:left;是各相鄰區塊向左漂移靠攏;第一個區塊取適當的左距。
依以上要領實作如下:
- <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; ,其子元素就會置中。
- <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;自動置中
<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
依以上要領實作如下:
- <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:
- <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>