CSS課件CSS文本外觀屬性

CSS的文本外觀屬性用于設(shè)置顏色、字符間距、單詞間距、水平對(duì)齊、文本裝飾和陰影等。前言學(xué)習(xí)目標(biāo)掌握word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、text-shadow等屬性及其屬性值的含義；了解white-space、text-overflow等屬性及其屬性值的含義；能利用幾種字體樣式屬性美化文字頁(yè)面。屬性表屬性

描述color

文本顏色letter-spacing

字間距word-spacing單詞間距l(xiāng)ine-height行間距text-transform英文文本轉(zhuǎn)換text-decoration文本裝飾text-align

水平對(duì)齊方式text-indent首行縮進(jìn)white-space

空白符處理text-overflow

標(biāo)示對(duì)象內(nèi)溢出文本允許取值描述red，green，blue預(yù)定義的顏色值。#FF0000，#FF6600，#29D794十六進(jìn)制顏色值，也是最常用的定義顏色的方式。rgba(255,0,0,0.5)或rgba(100%,0%,0%,0.5)r：紅色值；g：綠色值；b：藍(lán)色值，rgb的取值可以是正整數(shù)也可以是百分?jǐn)?shù)。a：透明度，取值0~1之間。允許取值描述normal，0.5em，30px用于定義字符與字符之間的空白，normal為默認(rèn)值，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值。允許取值描述normal，0.5em，30px用于增加或減少單詞間的空白（即字間隔）。默認(rèn)值normal，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值。允許取值描述5px，3em，150%用于定義行與行之間的距離，屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px。允許取值描述none不轉(zhuǎn)換（默認(rèn)值）。capitalize首字母大寫。uppercase全部字符轉(zhuǎn)換為大寫。lowercase全部字符轉(zhuǎn)換為小寫。允許取值描述none沒(méi)有裝飾（正常文本默認(rèn)值）。underline設(shè)置文本下劃線。overline設(shè)置文本上劃線。line-through設(shè)置文本刪除線。允許取值描述left左對(duì)齊（默認(rèn)值）。right右對(duì)齊。center居中對(duì)齊。允許取值描述2em，50px，30%用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值，建議使用em作為設(shè)置單位。允許取值描述normal常規(guī)（默認(rèn)值），文本中的空格、空行無(wú)效，滿行（到達(dá)區(qū)域邊界）后自動(dòng)換行。pre預(yù)格式化，按文檔的書寫格式保留空格、空行原樣顯示。nowrap合并所有空白符為一個(gè)空白符，強(qiáng)制文本不能換行，除非遇到換行標(biāo)記<br/>。內(nèi)容超出元素的邊界也不換行，若超出瀏覽器頁(yè)面則會(huì)自動(dòng)增加滾動(dòng)條。允許取值描述clip修剪溢出文本，不顯示省略標(biāo)記“…”。ellipsis用省略標(biāo)記“…”標(biāo)示被修剪文本，省略標(biāo)記插入的位置是最后一個(gè)字符。需要結(jié)合overflow:hidden;使用text-shadow在CSS中，使用text-shadow屬性可以為頁(yè)面中的文本添加陰影效果，其基本語(yǔ)法格式如下：選擇器{text-shadow:h-shadowv-shadowblurcolor;}水平陰影距離垂直陰影距離模糊半徑陰影顏色例如添加紫色陰影效果的文字，如下圖所示。動(dòng)手體驗(yàn)繼續(xù)完善健康專欄小報(bào)網(wǎng)頁(yè)。參考步驟：1、為h1標(biāo)題文字添加陰影，設(shè)置為：text-shadow:10px10px10px#333333;，text-align設(shè)置為center；2、設(shè)置所有段落的行間距為line-height:30px;；3、設(shè)置所有段落的縮進(jìn)