在編寫 CSS 樣式表時(shí),我們經(jīng)常會(huì)用到一些常見的標(biāo)簽來(lái)描述網(wǎng)頁(yè)的樣式。以下是一些常用的 CSS 標(biāo)簽:
/* 選擇器 */ /* 標(biāo)簽選擇器 */ p { /* 樣式 */ } /* 類選擇器 */ .class { /* 樣式 */ } /* ID 選擇器 */ #id { /* 樣式 */ } /* 后代選擇器 */ parent child { /* 樣式 */ } /* 偽類選擇器 */ a:hover { /* 樣式 */ } /* 通用選擇器 */ * { /* 樣式 */ } /* 相鄰兄弟選擇器 */ prev + next { /* 樣式 */ } /* 偽元素選擇器 */ p::first-line { /* 樣式 */ } /* 屬性選擇器 */ [attribute=value] { /* 樣式 */ } /* 四個(gè)方向的 margin 和 padding */ /* 上下左右 */ margin: 10px; padding: 10px; /* 上下 左右 */ margin: 10px 20px; padding: 10px 20px; /* 上 右下 左 */ margin: 10px 20px 30px 40px; padding: 10px 20px 30px 40px; /* CSS 屬性 */ /* 顏色 */ color: red; /* 背景色 */ background-color: blue; /* 字體 */ font-size: 16px; font-family: Arial, sans-serif; /* 大小 */ width: 100px; height: 200px; /* 邊框 */ border: 1px solid black; /* 不帶背景的陰影 */ box-shadow: 2px 2px 2px grey; /* 帶背景的陰影 */ box-shadow: 2px 2px 2px grey, 15px 15px 15px lightgrey; /* 文字效果 */ text-decoration: underline; /* 對(duì)齊方式 */ text-align: center; /* 行高 */ line-height: 1.5; /* 清除浮動(dòng) */ .clearfix:after { content: ""; clear: both; display: table; }
這些標(biāo)簽和屬性是非常基礎(chǔ)的,但也是必須掌握的前置知識(shí)。希望這篇文章能夠幫助您理清 CSS 知識(shí)點(diǎn)。