Web前端 CSS必備知識點 基本內容，類選擇符，id選擇符，偽類，偽元素，結構，繼承，特殊性，層疊，元素分類，顏色，長度，url，文本，字體，邊框，塊級元素，浮動元素，內聯元素，定位。 鏈接： link標簽： 樣式： 指示引入多個外部樣式表的鏈接 註解 內聯樣式： 規範： 選擇符 + 聲明 偽類和 ...
Web前端-CSS必備知識點
css基本內容，類選擇符，id選擇符，偽類，偽元素，結構，繼承，特殊性，層疊，元素分類，顏色，長度，url，文本，字體，邊框，塊級元素，浮動元素，內聯元素，定位。
鏈接：
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">link標簽：
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">樣式：
h1 { color: red; };@import指示引入多個外部樣式表的鏈接
<style type="text/css">
@import url(styles.css);
p { color: red };
</style>css註解
/* dashucoding */內聯樣式：
<p style="color: red;" >dashucoding</p>規範：
選擇符 + 聲明
p { color: red; } // 選擇符 屬性 值p { font-weight: bold; }偽類和偽元素
| 屬性 | 說明 |
|---|---|
:link |
超鏈接是一個未訪問過的地址 |
:visited |
訪問過的網頁 |
:active |
處於活躍的狀態 |
a { color: red; }; a:visited { color: red; };偽元素：
:first-letter 和 :first-line 首字母 和 首行p:first-letter { color: red; }css有個特點是繼承，可以依賴於祖先-後代關係。
!important有這個標記，表示這條規則優先
p { color: red !important; }元素分類：
三種類型：塊級元素，內聯元素，列表項元素
塊級元素有段落，標題，列表，表格，div，body等。內聯元素有a，em，span等。列表項元素有li元素。
dispaly: block | inline | list-item | none顏色：
rgb(100%, 100%, 100%) 紅藍綠 ，白色單位：
em 給字體的font-size值文本：
文本縮進
text-indent <長度> | <百分比>p { text-indent: -4em; }text-align屬性
用於元素中文本行的對齊方式text-align: left | center | right | justifywhite-space空白
white-space pre | nowrap | normalp { white-space: normal; } 將如何空白壓縮成單個空白符white-space屬性值為pre，可以將元素內的空白忽略。
p { white-space: pre; }行高：
line-height文本行的基線間的距離。
縱向對齊，vertical-align
vertical-align: baseline使元素的基線同父元素的基線對齊。
vertical-align: sub; vertical-align: super;低端對齊： vertical-align
頂端對齊：vertical-align
vertical-align: top; vertical-align: text-top;中間對齊：
vertical-align: middle;文字間隔：
word-spacing 長度 | normalword-spacing: 0.3em;字母間隔：
letter-spacing: 長度 | normal文本轉換：
text-transform uppercase | lowercase | capitalize | none文本修飾：
text-decoration: none | overline | line-through框：
width 長度 | 百分比 | auto
height 長度 | auto
margin 長度 | 百分比 | auto
margin: top right bottom left
margin-top
margin-right
margin-bottom
margin-left
border-width // thin medium thick
border-style: none;
padding浮動與清除
float: left | right | none<img src="" style="float: right"; alt="dashu">float: none 用於防止元素浮動清除浮動元素
clear left | right | both | noneclear原理是增加元素的上邊界，使它在低於浮動元素的位置結束，清除元素的上邊界寬度當有效地忽略。
list-style-type disc
disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none
list-style-type
disc 為實心圓
circle 為空心圓
square 實心或空心方塊列表項圖像
list-style-image <url> | none列表項位置：list-style-position
list-style-position: inside | outside定位：
position: static | relative | absolute | fixed | inherit溢出：
overflow: visible | hidden | scroll | auto | inherit溢出剪切：
overflow-clip: rect | auto | inherit元素剪切：
clip rect | auto | inherit元素可見性：
visibility: visible | hidden | collapse | inherit相對定位：
position: relative;絕對定位：
position: relative;固定定位：
position: fixed;層疊定位：
z-index: integer | auto輪廓：
outline, outline-color, outline-style, outline-width邊框：
border-top-color, border-right-color, border-bottom-color
border-left-color, border-top-style
border-right-style, border-left-style實例：
<table cellspacing=0 border cellpadding="10">
<tr>
<td rowspan=2>dashu</td>
<td colspan=2>dashu2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>結言
好了，歡迎在留言區留言，與大家分享你的經驗和心得。
感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
作者簡介
達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關註，歡迎分享，置頂尤佳。
