今天來到公司早了背苦，半個(gè)小時(shí)了一個(gè)人還都沒到呢，做個(gè)小筆記潘明。
書到用時(shí)方知少行剂，好多東西都學(xué)習(xí)的太過于淺顯，應(yīng)用到項(xiàng)目的時(shí)候才發(fā)現(xiàn)很多東西都只知道大概钳降，究其根本的話厚宰，了解的太少。
對(duì)于頁(yè)面排版，文字樣式如果做得不好看铲觉，簡(jiǎn)直能逼死我強(qiáng)迫癥晚期患者澈蝙，整理出來，以備查閱撵幽；
1. 設(shè)置字體
在css中字體通過font-family設(shè)置字體樣式
font-family: Verdana, Arial, Helvetica, sans-serif;```
> 上面的字體設(shè)置告訴瀏覽器首先在訪問者的計(jì)算機(jī)中尋找Verdana字體灯荧。如果該訪問者的計(jì)算機(jī)中沒有Verdana字體，則尋找Arial字體盐杂。若沒有Arial字體逗载，再依次尋找Helvetica、sans-serif字體况褪。如果這4種字體都沒有撕贞，則使用瀏覽器的默認(rèn)字體顯示。
font-family屬性可以同時(shí)聲明多種字體测垛，字體之間用逗號(hào)分隔開捏膨。另外一些字體的名稱中間會(huì)出現(xiàn)空格，如 Times New Roman食侮，這時(shí)需要用雙引號(hào)將其引起來号涯，使瀏覽器知道這是一種字體的名稱。
#####2. 字體的大小設(shè)置
> CSS通過font-size屬性來設(shè)置文字的大小锯七。
font-size: 12px;```
長(zhǎng)度單位：
px 表示在瀏覽器上1個(gè)像素的大辛纯臁；
em 1em表示在其父元素中字母m的標(biāo)準(zhǔn)寬度眉尸；
ex 1ex表示字母x的標(biāo)準(zhǔn)高度域蜗。
3. 行高
CSS中通過line-height屬性設(shè)置。在CSS中l(wèi)ine-height的值表示兩行文字之間基線的距離噪猾，即每行文字的高 度霉祸。如果給文字加上下劃線，下劃線的位置就是文字的基線袱蜡。
line-height: 30px;```
> 除了可以使用px等作為行高的單位丝蹭，也可以不加任何單位，此時(shí)行高應(yīng)該寫成與字體大小的比值坪蚁。
line-height: 1.5;```
CSS中字體奔穿、大小和行高的組合：
font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;```
#####4. 文字顏色
color: blue;
color: #0000FF;
color: rgb(0,0,255);
color: rgb(0%,0%,100%);
#####5. 空白折行
white-space: nowrap;
#####6. css1中定義的文字相關(guān)屬性樣式
| 屬性|類型| 說明|
| :-------------: |:----------:|:-------------|
|font-family|字體|字體類型|
|font-style |字體| 字體樣式，包括：normal敏晤、italic（斜體）贱田、oblique（傾斜）|
|font-variant| 字體| 字體大小寫，包括：normal嘴脾、small-caps（小型的大寫字母字體）|
|font-weight| 字體| 字體粗細(xì)|
|font-size| 字體| 字體大小|
|font| 字體（復(fù)合屬性）| 字體樣式男摧，可以包含所有字體屬性的聲明值|
|color |顏色| 字體顏色|
|word-spacing| 文本| 詞間距|
|letter-spacing| 文本| 字符間距|
|text-decoration |文本| 文本修飾線，包括：none（默認(rèn)值）、blink（閃爍）彩倚、underline（下劃線）、line-through（中劃線）扶平、overline（上劃線）|
|vertical-align| 文本| 文本垂直對(duì)齊方式帆离，包括：auto、baseline结澄、sub哥谷、supper、top麻献、text-top们妥、middle、bottom勉吻、text-bottom监婶、length。|
|text-transform| 文本| 文本大小寫齿桃，包括：none（默認(rèn)值）惑惶、capitalize（首字母大寫）、uppercase（大寫）短纵、lowercase（小寫）|
|text-align |文本| 文本的水平對(duì)齊方式带污，包括：left、right香到、center鱼冀、justify（兩端對(duì)齊）|
|text-indent| 文本| 首行縮進(jìn)|
|line-height| 文本| 行高|
#####7. CSS2新增字體、顏色和文本屬性
|屬性| 類型| 說明|
|--------|:------------:|---------------|
|font-size-adjust| 字體| 是否強(qiáng)制對(duì)文本使用同一尺寸|
|font-stretch| 字體| 是否橫向拉伸變形字體|
|text-shadow| 文本| 文本陰影效果|
|direction| 文本| 文本流入的方向悠就，包括：ltr（默認(rèn)值千绪，從左到右）、rtl（從右到左）理卑、inherit（由繼承獲得）|
|unicode-bidi| 文本| 定義同一個(gè)頁(yè)面中存在不同方向讀進(jìn)的文本顯示翘紊，與direction屬性一起使用|
#####8. CSS3新增字體、顏色和文本屬性
|屬性| 類型| 說明|
|--------|:------------:|---------------|
|text-shadow| 文本| 文本陰影或模糊效果|
|text-overflow| 文本| 省略文本的處理方式|
|word-wrap| 文本| 文本超過指定容器的邊界時(shí)是否斷開換行|
//示例
text-shadow: -0.1em 0.1em #CCCCCC;
text-shadow: -0.1em 0.1em 0.3em #CCCCCC;
text-shadow: -0.1em 0.1em #CCCCCC, -0.1em 0.1em 0.3em #CCCCCC;```
text-shadow 屬性的第一個(gè)值表示水平偏移藐唠；第二個(gè)值表示垂直偏移帆疟，正值偏右或偏下，負(fù)值偏左或偏上宇立；第三個(gè)值表示模糊半徑踪宠，可選；第四個(gè)值表示陰影是顏色妈嘹，可選柳琢。
text-shadow屬性可以接受一個(gè)以逗號(hào)分隔的陰影效果列表，并應(yīng)用到元素的文本上。
text-overflow: ellipsis;
text-overflow屬性值包括：clip | ellipsis | ellipsis-word柬脸。
clip：不顯示省略標(biāo)記他去，只是簡(jiǎn)單的裁切。
ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記倒堕，省略標(biāo)記插入的位置是最后一個(gè)字符灾测。
ellipsis-word：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記，省略標(biāo)記插入的位置是最后一個(gè)詞垦巴。
word-wrap: break-word;
word-wrap屬性值包括：normal | break-word媳搪。
normal：連續(xù)文本換行。
break-word：內(nèi)容將在邊界內(nèi)換行骤宣。
前端之路坎坷秦爆，且行且珍惜。
