CSS課件CSS文本外觀屬性

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

描述color

文本顏色letter-spacing

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

水平對齊方式text-indent首行縮進white-space

空白符處理text-overflow

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