本文章記于2021.04.22
1.偽元素
::first-letter (選中元素文本的第一個(gè)字母), ::first-line (選中元素文本的第一行), 或者 ::selection (當(dāng)前光標(biāo)雙擊選中的文本)
2.屬性
color
font-family
font-size牍戚，元素的 font-size 屬性是從該元素的父元素繼承的
font-style
font-weight
text-transform
text-decoration
text-shadow
text-align:left,right,center,justify
line-height艇挨，設(shè)置文本每行之間的高，無單位的值乘以 font-size來獲得 line-height
letter-space
word-space
text-transform相關(guān)取值：
none: 防止任何轉(zhuǎn)型
uppercase: 將所有文本轉(zhuǎn)為大寫
lowercase: 將所有文本轉(zhuǎn)為小寫
capitalize: 轉(zhuǎn)換所有單詞讓其首字母大寫
full-width: 將所有字形轉(zhuǎn)換成全角蕾域，即固定寬度的正方形，類似于等寬字體论熙，允許拉丁字符和亞洲語(yǔ)言字形（如中文富俄，日文，韓文）對(duì)齊
text-decoration取值：
注意text-decoration 是一個(gè)縮寫形式截歉，它由text-decoration-line, text-decoration-style和 text-decoration-color構(gòu)成
none: 取消已經(jīng)存在的任何文本裝飾
underline: 文本下劃線
overline: 文本上劃線
line-through: 穿過文本的線 strikethrough over the text
text-shadow
text-shadow: 4px 4px 5px red;
四個(gè)屬性如下:
1). 陰影與原始文本的水平偏移胖腾，可以使用大多數(shù)的 CSS 單位 length and size units, 但是 px 是比較合適的，這個(gè)值必須指定
2). 陰影與原始文本的垂直偏移;效果基本上就像水平偏移瘪松，向上/向下移動(dòng)陰影咸作，必須指定
3). 模糊半徑 - 更高的值意味著陰影分散得更廣泛
如果不包含此值，則默認(rèn)為0宵睦，沒有模糊
可以使用大多數(shù)的 CSS 單位 length and size units
4). 陰影的基礎(chǔ)顏色记罚，可以使用大多數(shù)的 CSS 顏色單位 CSS color unit. 如果沒有指定，默認(rèn)為 `black`
通過包含以逗號(hào)分隔的多個(gè)陰影值壳嚎，將多個(gè)陰影應(yīng)用于同一文本
text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);
font其他屬性
文本布局
說到字體可用性桐智，只有某幾個(gè)字體通常可以應(yīng)用到所有系統(tǒng)烟馅，因此可以毫無顧忌地使用
3.font簡(jiǎn)寫
font-style,font-variant,font-weight,font-stretch,font-size,line-height,font-family
使用 font 的簡(jiǎn)寫形式说庭，在所有這些屬性中，只有 font-size 和 font-family 是一定要指定的
font-size和line-height屬性之間必須放一個(gè)正斜杠
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
4.樣式化列表
列表默認(rèn)值
* `<ul>`和 `<ol>`元素設(shè)置`margin`的頂部和底部: 16px(1em) 0;和 `padding-left: 40px(2.5em)`; （在這里注意的是瀏覽器默認(rèn)字體大小為16px）
* `<li>` 默認(rèn)是沒有設(shè)置間距的
* `<dl>`元素設(shè)置 margin的頂部和底部: 16px(1em) 郑趁，無內(nèi)邊距設(shè)定
* `<dd>`元素設(shè)置為： `margin-left` `40px` (`2.5em`)
* 在參考中提到的 `<p>`元素設(shè)置 margin的頂部和底部: 16px(1em)刊驴，和其他的列表類型相同
列表具有的特定屬性：
-
list-style-type：設(shè)置用于列表的項(xiàng)目符號(hào)的類型，例如無序列表的方形或圓形項(xiàng)目符號(hào)，或有序列表的數(shù)字捆憎，字母或羅馬數(shù)字舅柜，由于某種原因?qū)е聢D像無法加載，則 type 將用作回退 -
list-style-position：設(shè)置在每個(gè)項(xiàng)目開始之前攻礼，項(xiàng)目符號(hào)是出現(xiàn)在列表項(xiàng)內(nèi)业踢，還是出現(xiàn)在其外 -
list-style-image：允許為項(xiàng)目符號(hào)使用自定義圖片，而不是簡(jiǎn)單的方形或圓形
（1）start屬性允許從1 以外的數(shù)字開始計(jì)數(shù)礁扮，<ol start="4">//4 5 6 7
（2）reversed屬性將啟動(dòng)列表倒計(jì)數(shù)知举，<ol start="4" reversed>//4 3 2 1
（3）value屬性允許設(shè)置列表項(xiàng)指定數(shù)值，示例如下:
<ol>
<li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
<li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li value="6">Wash and chop the salad.</li>
<li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>
CSS計(jì)數(shù)器提供用于自定義列表計(jì)數(shù)和樣式的高級(jí)工具太伊，但它們相當(dāng)復(fù)雜
@counter-stylecounter-incrementcounter-reset
5.樣式化鏈接
記憶方法：LoVe Fears HAte.
-
Link (沒有訪問過的): 這是鏈接的默認(rèn)狀態(tài)雇锡，當(dāng)它沒有處在其他狀態(tài)的時(shí)候，它可以使用
:link偽類來應(yīng)用樣式 -
Visited: 這個(gè)鏈接已經(jīng)被訪問過了(存在于瀏覽器的歷史紀(jì)錄), 它可以使用:visited偽類來應(yīng)用樣式 -
Hover: 當(dāng)用戶的鼠標(biāo)光標(biāo)剛好停留在這個(gè)鏈接僚焦，它可以使用:hover偽類來應(yīng)用樣式 -
Focus: 一個(gè)鏈接當(dāng)它被選中的時(shí)候 (比如通過鍵盤的 Tab 移動(dòng)到這個(gè)鏈接的時(shí)候锰提，或者使用編程的方法來選中這個(gè)鏈接HTMLElement.focus()它可以使用:focus偽類來應(yīng)用樣式 -
Active: 一個(gè)鏈接當(dāng)它被激活的時(shí)候 (比如被點(diǎn)擊的時(shí)候)，它可以使用:active偽類來應(yīng)用樣式
鏈接中包含圖標(biāo)：a[href*="http"]芳悲，background屬性u(píng)rl添加圖片
6.web字體（Web字體作為一種技術(shù)從 Internet Explorer 4 開始就得到了的支持）
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
大多數(shù)現(xiàn)代瀏覽器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2立肘，Web開放字體格式版本1和2)，它是最有效的格式名扛，但是舊版本IE只支持EOT (Embedded Open Type谅年，嵌入式開放類型)的字體,可能需要包括一個(gè)SVG版本的字體支持舊版本的iPhone和Android瀏覽器
字體一般都不能自由使用
必須為他們付費(fèi)，或者遵循其他許可條件肮韧，比如在代碼中(或者在站點(diǎn)上)提供字體創(chuàng)建者
不應(yīng)該在沒有適當(dāng)?shù)氖跈?quán)的情況下偷竊字體
- 免費(fèi)的字體經(jīng)銷商：這是一個(gè)可以下載免費(fèi)字體的網(wǎng)站(可能還有一些許可條件融蹂，比如對(duì)字體創(chuàng)建者的信賴)
比如： Font Squirre，dafont 和 Everything Fonts - 收費(fèi)的字體經(jīng)銷商：這是一個(gè)收費(fèi)則字體可用的網(wǎng)站弄企，例如fonts.com或myfonts.com
也可以直接從字體鑄造廠中購(gòu)買字體超燃，例如Linotype，Monotype或 Exljbris - 在線字體服務(wù)：這是一個(gè)存儲(chǔ)和為提供字體的網(wǎng)站拘领，它使整個(gè)過程更容易
