7.30.2019

1.CSS 文本屬性

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

2. 一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。

如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。

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

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

百分數要相對于縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。

3. text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

none，uppercase，lowercase，capitalize

默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。

4. text-decoration 有 5 個值：

none，underline，overline，line-through，blink

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

text-decoration 值會替換而不是累積起來。

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

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

6. CSS 字體屬性

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

?

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

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

鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。

鏈接的四種狀態：

a:link - 普通的、未被訪問的鏈接

a:visited - 用戶已訪問的鏈接

a:hover - 鼠標指針位于鏈接的上方

a:active - 鏈接被點擊的時刻

當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

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

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

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	簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中。
list-style-image	將圖象設置為列表項標志。
list-style-position	設置列表中列表項標志的位置。
list-style-type	設置列表項標志的類型。
marker-offset	?

?

?

10.CSS Table 屬性

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

?

11. CSS 邊框屬性

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

?

12. CSS框模型

?

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

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

也可以通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距

h1 {

? padding-top: 10px;

? padding-right: 0.25em;

? padding-bottom: 2ex;

? padding-left: 20%;

? }

注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對于父元素寬度設置，而不是相對于高度。

14. CSS 邊框屬性

屬性	描述
border	簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。
border-style	用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
border-width	簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
border-color	簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-bottom	簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。
border-bottom-color	設置元素的下邊框的顏色。
border-bottom-style	設置元素的下邊框的樣式。
border-bottom-width	設置元素的下邊框的寬度。
border-left	簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。
border-left-color	設置元素的左邊框的顏色。
border-left-style	設置元素的左邊框的樣式。
border-left-width	設置元素的左邊框的寬度。
border-right	簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。
border-right-color	設置元素的右邊框的顏色。
border-right-style	設置元素的右邊框的樣式。
border-right-width	設置元素的右邊框的寬度。
border-top	簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。
border-top-color	設置元素的上邊框的顏色。
border-top-style	設置元素的上邊框的樣式。
border-top-width	設置元素的上邊框的寬度。

?

15. CSS 外邊距屬性

屬性	描述
margin	簡寫屬性。在一個聲明中設置所有外邊距屬性。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距。
margin-right	設置元素的右外邊距。
margin-top	設置元素的上外邊距。

?

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

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

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

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

下圖提供了更直觀的方法來了解這一點：

?

16. 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

注意：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。

轉載于:https://www.cnblogs.com/zccfrancis/p/11273762.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。