HTML5+CSS3

2021.6HTML5andCSS3第5章

用CSS設置文本樣式長度單位設置文本樣式DEMO（通過文字樣式美化一個頁面）通過段落樣式美化頁面DEMO（通過段落樣式美化頁面）第5章

用CSS設置文本樣式

第5章

用CSS設置文本樣式長度單位相對類型px（piexl）像素，由于它會根據(jù)顯示設備的分辨率的多少而代表不同的長度，因此它屬于相對類型。比如，在800×600的分辨率中設置一幅圖片的高為100px，當同樣大小的顯示器換成1024×768的分辨率時，就會發(fā)現(xiàn)圖片相對變小了，因為現(xiàn)在的100px和前面的100px所代表的長度已經不同了em這是設置以目前字符的高度為單位。比如h1{margin:2em}，就會以目前字符的兩倍高度來顯示。但要注意一點，em作為尺度單位時是以font-size屬性為參考依據(jù)的，如果沒有font-size屬性，就以瀏覽器默認的字符高度作為參考。rem（rootrem）rem是rootem，表示設置以網頁根元素（HTML）的字符高度為單位。因此可以只對HTML元素設置字體小大，其他元素用rem單位設置百分比大小，例如h1{font-size:1.25rem}，一般瀏覽器默認的1rem是16px。vw（ViewportWidth）和vh（ViewportHeight）vw（ViewportWidth）、vh(ViewportHeight)是基于視圖窗口（Viewport）的單位，是css3新增的。1vw等于視口寬度的1%，1vh等于視口高度的1%。第5章

用CSS設置文本樣式絕對類型尺度單位名說明in（英寸）不是國際標準單位，平常極少使用cm（厘米）國際標準單位，較少用mm（毫米）國際標準單位，較少用pt（點數(shù)）最基本的顯示單位，較少用pc（印刷單位）應用在印刷行業(yè)中，1pc=12pt絕對類型的尺度單位第5章

用CSS設置文本樣式

設置文本樣式文本的顏色文本的字體文本的大小文本的傾斜效果文本的加粗效果英文字母的大小寫轉換文本的裝飾效果第5章

用CSS設置文本樣式

文本的顏色color在HTML頁面中，顏色統(tǒng)一采用RGB的模式顯示，也就是通常人們所說的“紅綠藍”三原色模式。每種顏色都由這3種顏色的不同比重組成，每種顏色的比重分為0～255檔。例如rgb(100%,100%,100%)和#FFFFFF都指白色，其中“#FFFFFF”為十六進制的表示方法，前兩位為紅色分量，中間兩位是綠色分量，最后兩位是藍色分量，“FF”即為十進制中的255。以下幾種定義都是等價的：在CSS3中，關于顏色還增加了新的特性，支持顏色的透明度，一種方式是把rgb模式擴充為rgba模式，其中第4個字母a表示的就是透明度（alpha通道）。第5章

用CSS設置文本樣式

文本的字體font-family例如其含義是告訴瀏覽器首先在訪問者的計算機中尋找Arial字體；如果該用戶計算機中沒有Arial字體，就尋找TimesNewRoman；如果這兩種字體都沒有，則使用瀏覽器的默認字體顯示。font-family屬性可以同時聲明多種字體，字體之間用逗號分隔開。另外，一些字體的名稱中間會出現(xiàn)空格，例如上面的TimesNewRoman，這時需要用雙引號將其括起來，使瀏覽器知道這是一種字體的名稱。第5章

用CSS設置文本樣式

文本的傾斜效果font-style而嚴格來說，在英文中，字體的傾斜有以下兩種。（1）一種稱為italic，即意大利體。我們平常說的傾斜都是指“意大利體”，這也就是為什么在各種文字處理軟件上，字體傾斜的按鈕上面大都使用字母“I”來表示的原因。（2）另一種稱為oblique，即真正的傾斜。這就是把一個字母向右邊傾斜一定角度產生的效果，類似于圖右側顯示的效果。這里說“類似于”，是因為Windows操作系統(tǒng)中并沒有實現(xiàn)oblique方式的字體，只是找了一個接近它的字體來示意。第5章

用CSS設置文本樣式

文本的加粗效果font-weight在CSS中，使用font-weight屬性控制文字的粗細，可以將文字的粗細進行細致的劃分，更重要的是CSS還可以將本身是粗體的文字變?yōu)檎４旨?。設置值說明normal正常粗細bold粗體bolder加粗體lighter比正常粗細還細100-900共有9個層次（100，200……900），數(shù)字越大字體越粗第5章

用CSS設置文本樣式

文本的加粗效果font-weight英文字母大小寫轉換是CSS提供的很實用的功能之一，我們只需要設定英文段落的text-transform屬性，就能很輕松地實現(xiàn)大小寫的轉換。第5章

用CSS設置文本樣式

文字的大小font-sizeCSS中是通過font-size屬性來控制文字大小的，而該屬性的值可以使用很多種長度單位。在實際工作中，font-size屬性最經常使用的單位是px和em。1em表示的長度是字母m的標準寬度。最后有一種單位，就是使用百分比作為單位。例如，“font-size:200%”表示文字的大小為原來的兩倍。第5章

用CSS設置文本樣式

文本的裝飾效果在CSS中由text-decoration屬性為文字加下畫線、刪除線和頂線等多種裝飾效果。設置值說明none正常顯示underline為文字加下劃線line-through為文字加刪除線overline為文字加頂線blink文字閃爍，僅部分瀏覽器支持第5章

用CSS設置文本樣式DEMO第5章

用CSS設置文本樣式

通過段落樣式美化頁面段落首行縮進設置字詞間距段落內部行高段落之間的距離控制文本的水平位置設置文本與背景的顏色設置文字的特效設置值說明none正常顯示underline為文字加下劃線line-through為文字加刪除線overline為文字加頂線blink文字閃爍，僅部分瀏覽器支持text-decoration屬性的設置值第5章

用CSS設置文本樣式

段落首行縮進在CSS中專門有一個text-indent屬性可以控制段落的首行縮進和縮進的距離。text-indent屬性可以是各種長度的屬性值，為了縮進兩個字的距離，最經常用的是“2em”這個距離。第5章

用CSS設置文本樣式

設置字詞間距在CSS中，可以通過letter-spacing和word-spacing這兩個屬性分別控制字母間距和單詞間距。對于中文而言，如果要調整漢字之間的距離，需要設置letter-spacing屬性，而不是word-spacing屬性。第5章

用CSS設置文本樣式

設置段落內部的文字行高在CSS中，line-height正是用于控制行的高度的，通過它就可以調整行與行之間的距離。例如設置“l(fā)ine-height:20px”就表示行高為20像素設置“l(fā)ine-height:1.5”則表示行高為font-size的1.5倍設置“l(fā)ine-height:130%”則表示行高為font-size的130%設置值說明長度數(shù)值，可以使用前面所介紹的尺度單位倍數(shù)font-size的設置值的倍數(shù)百分比相對于font-size的百分比第5章

用CSS設置文本樣式

設置段落之間的距離如果要調整段落之間的距離，設置margin屬性即可，margin稱為“外邊距”。這里為margin設置了兩個屬性值，前者確定上下距離為5像素，后者確定左右距離為0像素。這里需要特別注意，將p段落的上下margin設置為5像素，那么按理說，在相鄰的兩個段落之間的距離應該是5＋5＝10像素，因為上下兩個段落分別存在一個5像素的外邊距。但是這里的實際距離并不是將上下兩個外邊距相加獲得的，而是取二者中較大的一個，這里都是5像素，因此結果就是5像素，而不是10像素。第5章

用CSS設置文本樣式

控制文本的水平位置使用text-align屬性可以方便地設置文本的水平位置。設置值說明left左對齊，也是瀏覽器默認的right右對齊center居中對齊justify兩端對齊第5章

用CSS設置文本樣式

設置文字與背景的顏色在CSS中，除了可以設置文字的顏色，還可以設置背景的顏色。它們二者分別使用屬性color和background-color。第5章

用CSS設置文本樣式

設置文字的特效在CSS中可以給文字增加陰影效果，實現(xiàn)一定的特效，通常在標題上使用，來抓住用戶的眼球。給文字加上text-