7.30.2019

1.CSS 文本屬性

屬性	描述
color	設(shè)置文本顏色
direction	設(shè)置文本方向。
line-height	設(shè)置行高。
letter-spacing	設(shè)置字符間距。
text-align	對(duì)齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮進(jìn)元素中文本的首行。
text-shadow	設(shè)置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒(méi)有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設(shè)置文本方向。
white-space	設(shè)置元素中空白的處理方式。
word-spacing	設(shè)置字間距。

2. 一般來(lái)說(shuō)，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無(wú)法應(yīng)用 text-indent 屬性。不過(guò)，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。

如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。

text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊。但是如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問(wèn)題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距。

text-indent 可以使用所有長(zhǎng)度單位，包括百分比值。

百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說(shuō)，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。

3. text-transform 屬性處理文本的大小寫(xiě)。這個(gè)屬性有 4 個(gè)值：

none，uppercase，lowercase，capitalize

默認(rèn)值 none 對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫(xiě)。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫(xiě)和全小寫(xiě)字符。最后，capitalize 只對(duì)每個(gè)單詞的首字母大寫(xiě)。

4. text-decoration 有 5 個(gè)值：

none，underline，overline，line-through，blink

underline 會(huì)對(duì)元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會(huì)在文本的頂端畫(huà)一個(gè)上劃線。值 line-through 則在文本中間畫(huà)一個(gè)貫穿線，等價(jià)于 HTML 中的 S 和 strike 元素。blink 會(huì)讓文本閃爍。none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無(wú)裝飾的文本是默認(rèn)外觀，但也不總是這樣。例如，鏈接默認(rèn)地會(huì)有下劃線。

text-decoration 值會(huì)替換而不是累積起來(lái)。

5. white-space 屬性會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和 tab 字符的處理。下面的表格總結(jié)了 white-space 屬性的行為：

值	空白符	換行符	自動(dòng)換行
pre-line	合并	保留	允許
normal	合并	忽略	允許
nowrap	合并	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

6. CSS 字體屬性

屬性	描述
font	簡(jiǎn)寫(xiě)屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。
font-family	設(shè)置字體系列。
font-size	設(shè)置字體的尺寸。
font-size-adjust	當(dāng)首選字體不可用時(shí)，對(duì)替換字體進(jìn)行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch	對(duì)字體進(jìn)行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style	設(shè)置字體風(fēng)格。
font-variant	以小型大寫(xiě)字體或者正常字體顯示文本。
font-weight	設(shè)置字體的粗細(xì)。

?

7. 只有當(dāng)字體名中有一個(gè)或多個(gè)空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號(hào)，才需要在 font-family 聲明中加引號(hào)。

8. 能夠設(shè)置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式。

鏈接的四種狀態(tài)：

a:link - 普通的、未被訪問(wèn)的鏈接

a:visited - 用戶已訪問(wèn)的鏈接

a:hover - 鼠標(biāo)指針位于鏈接的上方

a:active - 鏈接被點(diǎn)擊的時(shí)刻

當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，請(qǐng)按照以下次序規(guī)則：

a:hover 必須位于 a:link 和 a:visited 之后；a:active 必須位于 a:hover 之后

text-decoration 屬性大多用于去掉鏈接中的下劃線。background-color 屬性規(guī)定鏈接的背景色。

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

9.CSS 列表屬性(list)

屬性	描述
list-style	簡(jiǎn)寫(xiě)屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。
list-style-image	將圖象設(shè)置為列表項(xiàng)標(biāo)志。
list-style-position	設(shè)置列表中列表項(xiàng)標(biāo)志的位置。
list-style-type	設(shè)置列表項(xiàng)標(biāo)志的類型。
marker-offset	?

?

?

10.CSS Table 屬性

屬性	描述
border-collapse	設(shè)置是否把表格邊框合并為單一的邊框。
border-spacing	設(shè)置分隔單元格邊框的距離。
caption-side	設(shè)置表格標(biāo)題的位置。
empty-cells	設(shè)置是否顯示表格中的空單元格。
table-layout	設(shè)置顯示單元、行和列的算法。

?

11. CSS 邊框?qū)傩?/p>

屬性	描述
outline	在一個(gè)聲明中設(shè)置所有的輪廓屬性。
outline-color	設(shè)置輪廓的顏色。
outline-style	設(shè)置輪廓的樣式。
outline-width	設(shè)置輪廓的寬度。

?

12. CSS框模型

?

13. 設(shè)置各邊的內(nèi)邊距按照上、右、下、左的順序，各邊均可以使用不同的單位或百分比值。

h1 {padding: 10px 0.25em 2ex 20%;}?????

也可以通過(guò)使用下面四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距

h1 {

? padding-top: 10px;

? padding-right: 0.25em;

? padding-bottom: 2ex;

? padding-left: 20%;

? }

注意：上下內(nèi)邊距與左右內(nèi)邊距一致；即上下內(nèi)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度設(shè)置，而不是相對(duì)于高度。

14. CSS 邊框?qū)傩?/p>

屬性	描述
border	簡(jiǎn)寫(xiě)屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。
border-style	用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。
border-width	簡(jiǎn)寫(xiě)屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。
border-color	簡(jiǎn)寫(xiě)屬性，設(shè)置元素的所有邊框中可見(jiàn)部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。
border-bottom	簡(jiǎn)寫(xiě)屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-bottom-color	設(shè)置元素的下邊框的顏色。
border-bottom-style	設(shè)置元素的下邊框的樣式。
border-bottom-width	設(shè)置元素的下邊框的寬度。
border-left	簡(jiǎn)寫(xiě)屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-left-color	設(shè)置元素的左邊框的顏色。
border-left-style	設(shè)置元素的左邊框的樣式。
border-left-width	設(shè)置元素的左邊框的寬度。
border-right	簡(jiǎn)寫(xiě)屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-right-color	設(shè)置元素的右邊框的顏色。
border-right-style	設(shè)置元素的右邊框的樣式。
border-right-width	設(shè)置元素的右邊框的寬度。
border-top	簡(jiǎn)寫(xiě)屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-top-color	設(shè)置元素的上邊框的顏色。
border-top-style	設(shè)置元素的上邊框的樣式。
border-top-width	設(shè)置元素的上邊框的寬度。

?

15. CSS 外邊距屬性

屬性	描述
margin	簡(jiǎn)寫(xiě)屬性。在一個(gè)聲明中設(shè)置所有外邊距屬性。
margin-bottom	設(shè)置元素的下外邊距。
margin-left	設(shè)置元素的左外邊距。
margin-right	設(shè)置元素的右外邊距。
margin-top	設(shè)置元素的上外邊距。

?

CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個(gè)值。規(guī)則如下：

如果缺少左外邊距的值，則使用右外邊距的值。

如果缺少下外邊距的值，則使用上外邊距的值。

如果缺少右外邊距的值，則使用上外邊距的值。

下圖提供了更直觀的方法來(lái)了解這一點(diǎn)：

?

16. 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

注意：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

轉(zhuǎn)載于:https://www.cnblogs.com/zccfrancis/p/11273762.html

總結(jié)

以上是生活随笔為你收集整理的CSS每日学习笔记（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。