字體
color
字體顏色
font-size
字體大小
font-family
字體樣式
serif 襯線(xiàn)字體
sans-serif非襯線(xiàn)字體
monospace等寬字體
cursive草書(shū)字體
fantasy虛幻字體
- 可以將字體設(shè)置為這些大的分類(lèi),當(dāng)設(shè)置為大的分類(lèi)以后晃虫，
- 瀏覽器會(huì)自動(dòng)選擇指定的字體并應(yīng)用樣式
- 一般會(huì)將字體的大分類(lèi)邪驮，指定為font-family中的最后一個(gè)字體
p{
font-family: arial , 微軟雅黑 , 華文彩云 , serif;
}
font-style
normal默認(rèn)值，文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以?xún)A斜的效果顯示
大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分傲茄，
也就是說(shuō)我們?cè)O(shè)置italic和oblique它們的效果往往是一樣的
一般我們只會(huì)使用italic
font-weight
normal默認(rèn)值，文字正常顯示
bold文字加粗顯示
font-variant
normal默認(rèn)值沮榜，文字正常顯示
small-caps文本以小型大寫(xiě)字母顯示
font
可以將字體的樣式的值盘榨，統(tǒng)一寫(xiě)在font樣式中，不同的值之間使用空格隔開(kāi)
使用font設(shè)置字體樣式時(shí)蟆融，斜體 加粗 小大字母草巡，沒(méi)有順序要求，甚至可寫(xiě)可不寫(xiě)型酥，
如果不寫(xiě)則使用默認(rèn)值山憨，但是要求文字的大小和字體必須寫(xiě)，而且字體必須是最后一個(gè)樣式
-
**大小必須是倒數(shù)第二個(gè)樣式 **
font: [加粗 斜體 小大字母] 大小[/行高] 字體
自定義字體
英文自定義:
http://www.dafont.com/
現(xiàn)在字體弥喉，適配不太好
生成不同版本瀏覽器支持的字體文件https://www.fontsquirrel.com/tools/webfont-generator
中文自定義:
有字庫(kù)網(wǎng)
藝術(shù)字生成器生成
文本郁竟，行內(nèi)元素，行內(nèi)塊元素樣式
line-height
行高
用來(lái)設(shè)置文本垂直方向上居中height的高度和line-height的數(shù)值是一樣的
line-height: 200%;//字體大小的兩倍
line-height：height由境；
direction
文本方向
-
ltr默認(rèn)棚亩。一行中文本蓖议，行內(nèi)元素，行內(nèi)塊元素 排列方向從左到右讥蟆。 -
rtl一行中文本勒虾，行內(nèi)元素，行內(nèi)塊元素 排列方向從右到左瘸彤。 -
inherit規(guī)定應(yīng)該從父元素繼承 direction 屬性的值修然。
text-transform
設(shè)置文本的大小寫(xiě)
-
none默認(rèn)值，該怎么顯示就怎么顯示质况，不做任何處理 -
capitalize單詞的首字母大寫(xiě)愕宋，通過(guò)空格來(lái)識(shí)別單詞 -
uppercase所有的字母都大寫(xiě) -
lowercase所有的字母都小寫(xiě)
text-decoration
設(shè)置文本修飾
-
none默認(rèn)值，不添加任何修飾拯杠，正常顯示 -
underline為文本添加下劃線(xiàn) -
overline為文本添加上劃線(xiàn) -
line-through為文本添加刪除線(xiàn)
text-align
文本掏婶，行內(nèi)元素，行內(nèi)塊元素水平對(duì)齊方式
-
left默認(rèn)值潭陪，靠左對(duì)齊 -
right靠右對(duì)齊 -
center文本居中對(duì)齊 -
justify兩端對(duì)齊
text-indent
設(shè)置首行縮進(jìn)
一般使用em作單位
使用負(fù)值可以用來(lái)隱藏一些不想顯示的內(nèi)容
overflow-wrap
文本換行
normal默認(rèn)情況雄妥，瀏覽器只在“空格”或者“半角”的位置換行
break-word為防止長(zhǎng)文本（例如網(wǎng)頁(yè)地址、長(zhǎng)的單詞）溢出依溯，瀏覽器自行決定在何處“截?cái)唷眴卧~老厌。默認(rèn)情況是禁止瀏覽器截?cái)鄦卧~。
word-break
IE6及以上瀏覽器對(duì)該屬性支持黎炉。
break-all強(qiáng)行截?cái)鄦卧~枝秤！keep-all不準(zhǔn)許“截?cái)唷?單詞normal
white-space
normal默認(rèn)值】妒龋空白處會(huì)被瀏覽器忽略（即多余空格被瀏覽器刪除）淀弹。只保留正常的空格。pre文本空白會(huì)被瀏覽器保留庆械。其行為方式類(lèi)似HTML的<pre>元素效果薇溃。pre-line與normal類(lèi)似，空白處會(huì)被瀏覽器忽略缭乘。不同點(diǎn)是保留換行符沐序，IE7及以下瀏覽器不支持此屬性。pre-wrap保留空白符序列堕绩，換行單獨(dú)一行顯示策幼，IE7及以下瀏覽器不支持此屬性。nowrap文本不換行奴紧，文本在同一行顯示特姐，直到遇到<br/>位置∈虻空白處會(huì)被瀏覽器忽略,使用省略號(hào)
text-overflow
-
ellipsis當(dāng)文本溢出時(shí)到逊，省略號(hào)顯示铣口。 -
clip僅僅簡(jiǎn)單的剪裁，不使用省略號(hào)觉壶。
注意：上述兩個(gè)屬性需要配合 white-space: nowrap; 和 overflow: hidden 一起使用脑题，且容器需要定義寬度。只在塊元素內(nèi)生效铜靶。
IE瀏覽器對(duì)其支持非常好叔遂。
text-shadow: offset-x | offset-y | blur-radius | color
文本陰影
offset-xX軸偏移量offset-yY軸偏移量blur-radius模糊半徑-
color陰影顏色text-shadow: 0 0 30px blue, 0 0 80px red;
可設(shè)置文字背景發(fā)光效果
text-shadow:
0 0 30px blue,
0 0 30px #fff,
0 0 80px blue,
0 0 80px #fff,
0 0 180px blue,
0 0 80px #fff;
letter-spacing
字符間距
word-spacing
單詞間距
vertical-aligin
行內(nèi)元素的基線(xiàn)相對(duì)于該元素所在行的基線(xiàn)的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值争剿。這會(huì)使元素降低而不是升高
- 設(shè)置給子元素
可用值
-
baseline基線(xiàn)位于一行非襯線(xiàn)字體小寫(xiě)x字母的底部（默認(rèn)） -
middle在父元素居中已艰，不要為父元素設(shè)置高度和行高 -
top位于父元素一行的頂部,需要為父元素設(shè)置“足夠”的高度，且高度等于行高蚕苇，才能看到效果 -
bottom位于父元素一行的底部哩掺，需要為父元素設(shè)置“足夠”的高度，且高度等于行高涩笤，才能看到效果 -
sub垂直對(duì)齊文本的下標(biāo)嚼吞。 super-
text-top與父元素字體的頂端對(duì)齊 text-bottom
多行對(duì)齊，設(shè)置其父元素 display: table-cell vertical-align
行內(nèi)塊元素之間的空隙處理辦法
導(dǎo)致原因
在編碼時(shí)蹬碧，<img>元素?fù)Q行了舱禽。例如
<img src=“img/1.png”>
<img src=“img/2.png”>
解決辦法
如果該元素沒(méi)有文本內(nèi)容。我可以設(shè)置元素的font-size： 0 解決恩沽。但是這回導(dǎo)致該元素所有的文字消失誊稚。
<img src=“img/1.png”><!--
><img src=“img/2.png”>
使用注釋消除空格
