前端菜鳥筆記 Day-5 CSS 高級

文章大綱來源：【Day 5】CSS 高級

• CSS 選擇器
• CSS 拓展
• CSS 單位
• CSS 參考手冊

CSS 選擇器

內容引用：CSS 選擇器

元素選擇器

html { ... }

選擇器分組

h2, p { ... }

類選擇器

.important { ... }
p.warning  { ... }
.important.warning { ... }
/* 選擇同時擁有這兩個類名的元素 */

ID選擇器

#intro { ... }

屬性選擇器

a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 徹底匹配的屬性內容 */
p[class~="important"] { ... }
/* 部分匹配的屬性內容 */

後代選擇器

h1 em { ... }

子元素選擇器

h1 > strong { ... }

相鄰兄弟選擇器

h1 + p { ... }

僞類

CSS 僞類用於向某些選擇器添加特殊的效果。

語法是selector : pseudo-class {property: value}。

a:link { color: #FF0000 }        /* 未訪問的連接 */
a:visited { color: #00FF00 }    /* 已訪問的連接 */
a:hover { color: #FF00FF }    /* 鼠標移動到連接上 */
a:active { color: #0000FF }    /* 選定的連接 */
p:first-child { font-weight: bold; }

CSS 拓展

內容引用：CSS 高級

水平對齊

• 使用margin:auto水平對齊

margin-left:auto;
margin-right:auto;

• 使用position左或右對齊

position:absolute;
right:0px;

• 使用float左或右對齊

float:right;

尺寸

• height：元素高度
• width：元素寬度
• line-height：行高
• max-height：最大高度
• max-width：最大寬度
• min-height：最小高度
• min-width：最小寬度

CSS 單位

內容引用：CSS 單位

相對長度

指定了一個長度相對於另外一個長度的屬性，對於不一樣的設備相對長度更適用。

• em：相對於應用在當前元素的字體尺寸，通常瀏覽器字體大小默認爲16px，則2em == 32px
• ex：依賴於英文子母小 x 的高度
• ch：數字 0 的寬度
• rem：根元素（html）的 font-size
• vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%
• vh：viewpoint height，視窗高度，1vh=視窗高度的1%

絕對長度

絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。

絕對長度單位視輸出介質而定，不依賴於環境（顯示器、分辨率、操做系統等）。

• cm：釐米
• mm：毫米
• in：英寸(1in = 96px = 2.54cm)
• px：像素 (1px = 1/96th of 1in)
• pt：point，大約1/72英寸； (1pt = 1/72in)
• pc：pica，大約6pt，1/6英寸； (1pc = 12 pt)

CSS 參考手冊

使用時若是有疑問能夠隨時查看【CSS 參考手冊】。

---

我的靜態博客：

• 氣泡的前端日記： https://rheabubbles.github.io