學(xué)習(xí)導(dǎo)航
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了綿陽免費(fèi)建站歡迎大家使用！
1、css中的長度與顏色
2、css中的文字屬性
3、css中的文本屬性
1、文字樣式屬性
font-family 字體屬性
作用：元素內(nèi)文字以什么字體來顯示
語法：font-family:[字體1],[字體2],[......];
說明：含空格字體名和中文，用英文引號(hào)（"）括起；多個(gè)字體用英文逗號(hào)隔開；引號(hào)嵌套，外使用雙引號(hào)，內(nèi)使用單引號(hào)。
font-size 文字大小
作用：元素內(nèi)文字大小
語法：font-size:絕對(duì)單單位，相相對(duì)單位
color 文字顏色
語法：顏色名|十六進(jìn)制|RGB
font-weight 文字粗細(xì)
語法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 細(xì)體 | 100-900
說明：默認(rèn)值：normal 400等同于normal,而700等同于bold
font-style 文字樣式
作用：為元素內(nèi)文字設(shè)置樣式
語法：font-style:normal 正常顯示 | italic 文字傾斜 | oblique 文字傾斜（基本不用）
font-variant 字體變形
作用：設(shè)置元素中文本為小型大寫字母
語法：font-variant:normal 正常顯示| small-caps 將英文大小寫字母調(diào)成為同寬
font 屬性簡寫
語法：font:font-style font-variant ?font-weight font-size/line-height font-family;
說明：值之間空格隔開，注意書寫順序。
2、CSS文本樣式
text-align
作用：設(shè)置元素內(nèi)文本的水平對(duì)齊方式
語法：tex-align:left 左對(duì)齊?| right 右對(duì)齊 | center 居中對(duì)齊 | justify 兩端對(duì)齊
注意：該屬性對(duì)塊級(jí)元素設(shè)置有效
line-height
作用：設(shè)置元素中文本行高
語法：line-height:長度值 | 百分比
說明：一行文字的高度，行高指文本行的基線間的距離
文字基線
注意：基線并不是漢字文字的下沿，看圖理解自行理解
行高和行距
行高：基線到基線的距離
行距：底線到頂線的距離
注意：看圖自行理解
行框和行內(nèi)框
注意：看圖自行理解
vertical-align
作用：設(shè)置元素內(nèi)容的垂直方式
語法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長度 | 百分比
注意：看圖自行理解
text-indent 首行縮進(jìn)
3、文本樣式屬性
text-transform:?capitzlize?首字母大寫 |?uppercase?字母大寫?|?lowercase? 字母小寫 |?none 正常
text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常
綜合實(shí)操案例
如果您覺得有用，記得在下方點(diǎn)贊、關(guān)注、留言，我會(huì)定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動(dòng)力，么么噠。
每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢(mèng)想的人一起成長！
如果你想你網(wǎng)站上的文字看起來更加不一樣，就必須要給網(wǎng)頁中的標(biāo)題、段落和其他頁面元素應(yīng)用不同的字體。你可以用font-family屬性在CSS樣式里設(shè)置字體，如： font-family:Arial; 但是設(shè)置的這種字體，你電腦上必須裝有該字體，否則將按原字體樣式顯示。當(dāng)然，也可以寫上多種字體，當(dāng)對(duì)方瀏覽你的網(wǎng)站，沒有安裝第一種字體時(shí)，瀏覽器就會(huì)在列表中繼續(xù)往上搜尋，直到找到有適合的字 體為止，像這樣： font-family:Arial,Helvetica,sans-serif; 在上例中，Web瀏覽器會(huì)先看看是否安裝了Arial字體。如果安裝了，那么就用Arial字體顯示；如果沒有安裝，瀏覽器就會(huì)繼續(xù)尋找Helvetica字體；如果還是沒有找到，最后它就會(huì)指定一種通用的字體--sans-serif。如果字體的名稱中包含多個(gè)單詞時(shí)，則必須用雙引號(hào)（“”）將它們括起來，如： font-family:"Times New Roman",Times,serif; 以下就介紹幾種常用的font-family字體類型組合，每一列的最后都包含一種通用的字體。 1、Serif字體：最適用于冗長的文字信息，因?yàn)樽x者都會(huì)覺得這種字體使字母主筆劃的結(jié)尾處會(huì)有一些細(xì)小的“足”，能夠比較有效地引導(dǎo)人們的視線從一個(gè)字母一到到下一個(gè)字母，閱讀起來感覺更加輕松。serif字體包括：Times，Times New Roman、Georgia。 2、Sans-serif字體：它看起來干凈而簡潔，所有經(jīng)常被用在標(biāo)題上。Sans-serif字體包括：Arial、Helvetica、Verdana和Formata。 3、Monospaced字體：它經(jīng)常用于顯示計(jì)算機(jī)代碼，它每個(gè)字母都是等寬的。
CSS即使設(shè)置了其他字體，也要看別的電腦里有沒有，一般系統(tǒng)自帶有宋體，黑體等字體，但是如果你電腦上有好看的字體，可以顯示，在別的電腦沒有你的字體，就顯示不了，所以一般只會(huì)設(shè)置系統(tǒng)自帶的字體。
設(shè)置方法：
html
head
style type="text/css"
p.ziti{font-family:"Times New Roman",Georgia,Serif}
/style
/head
body
h1CSS font-family/h1
p class="ziti"要更改的字體內(nèi)容/p
/body
/html
CSS定義可以是：font-family:sans-serif
也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}
為什么我這里設(shè)置了三個(gè)，分別用","隔開呢，因?yàn)椴煌姹镜牟僮飨到y(tǒng)，對(duì)字體的支持不同解釋如下：
例如微軟雅黑不同操作系統(tǒng)不同版本需要如下設(shè)置：
Windows XP及以前版本的Windows
font-family: Arial, 宋體, sans-serif;
Windows Vista和Windows 7
font-family: 'Microsoft Yahei', sans-serif;
Sorry，英文就無法設(shè)置字體了，因?yàn)橹形淖煮w都包含了英文字體。好在雅黑顯示英文還湊合。
Mac及其它操作系統(tǒng)
font-family: sans-serif;
系統(tǒng)自帶中文字體編碼：
宋體SimSun黑體SimHei微軟雅黑Microsoft YaHei微軟正黑體Microsoft JhengHei新宋體NSimSun新細(xì)明體PMingLiU細(xì)明體MingLiU標(biāo)楷體DFKai-SB仿宋FangSong楷體KaiTi仿宋_GB2312FangSong_GB2312楷體_GB2312KaiTi_GB2312
CSS字體加粗的方法：
font-weight 屬性設(shè)置文本的粗細(xì)。使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。
例如：
html:
p字體加粗/p
css:
p{
font-weight:blod;
}
css中font樣式常用的使用方法：
font-style:規(guī)定字體樣式
font-weight:規(guī)定字體粗細(xì)
font-family:規(guī)定字體系列
兩種方法給字體加粗，一種就是直接用b標(biāo)簽，例如 : b粗/b
或者用css添加樣式? div style="font-weight: bold;" 加粗 /div
可以用的值有下面這些。400 等同于 normal，而 700 等同于 bold。
normal?? 默認(rèn)值
bold?? 定義粗體字符
bolder?? 定義更粗的字符
lighter?? 定義更細(xì)的字符
100
200
300
400
500
600
700
800
900
html的字體樣式主要通過css的font-size以及font-family來定義的，標(biāo)簽詳解如下：
font-size
指定字體大小，常用單位有em和px
font-family
指定使用的字體
常用的中文字體有微軟雅黑和宋體，英文字體有Arial
可以同時(shí)指定多個(gè)字體，使用英文的逗號(hào)分隔，瀏覽器會(huì)按順序查找，找不到就找下一個(gè)，全部沒找到就使用系統(tǒng)默認(rèn)的
字體用中文表示 則需要用雙引號(hào)或者單引號(hào)分隔，英文字體一般不需要用引號(hào)，但是如果 有特殊字符的（如空格，反斜杠，#，$等）也需要使用引號(hào)
font-weight
字體粗細(xì)（bold相等于設(shè)置該屬性的值為700，normal相等于設(shè)置該屬性值為400–不用單位，建議使用數(shù)字因?yàn)榻馕鰰?huì)更快）
fon-style
normal（一般用于讓斜體不傾斜，em標(biāo)簽有加重強(qiáng)調(diào)的語義 但是字體會(huì)傾斜，可以為em 標(biāo)簽設(shè)置 font-style 屬性值為 normal 取消其傾斜的效果）
字體樣式可以連寫
即 所有的字體樣式 使用一個(gè)語句，但是有一定的語法規(guī)則和順序
選擇器 { font : font-style font-weight font-size/line-height font-family; }
字體樣式連寫時(shí)需要注意：一定要按順序?qū)懀梢杂惺÷圆粚懙臉邮降且欢ㄒ错樞?，而且font-size和font-family是不可以省略的，否則會(huì)不起作用
文本外觀樣式
color：字體顏色
預(yù)定義的顏色如green，red等
十六進(jìn)制，順序是紅綠藍(lán)，十六進(jìn)制是最常用的顏色表示方式
#ff0000 表示紅色，等同于#f00（縮寫，必須是兩兩相同的才可以進(jìn)行縮寫）；#00f表示藍(lán)色；#0f0表示綠色；#fff表示白色（所有的顏色都滿格），#000000即#000表示黑色（所有的顏色都沒有）
RGB代碼：rgb(255,255,255)表示白色
文本修飾：text-decoration：none、underlined（比較常用，用于添加下劃線和取消下劃線）
line-hight：行間距，一般情況下，行間距只需要比字體大小大7或8個(gè)像素就可以了
text-align：文本內(nèi)容的水平對(duì)齊方式
text-indent：段落首行縮進(jìn)，單位使用em，1em就是一個(gè)字，所以該樣式值為2em 表示 段落首行縮進(jìn)兩個(gè)字符
重慶分公司
重慶分公司
