礎開始 CSS實用教程 二

2021-04-16 19:37:58 字數 2164 閱讀 6898

七.控制文字的樣式控制文字的樣式包括文字大小寫、文字修飾兩個部分。

1.文字大小寫

文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。

基本格式如下:

text-transform: 引數

引數取值範圍:

·uppercase:所有文字大寫顯示

·lowercase:所有文字小寫顯示

·capitalize:每個單詞的頭字母大寫顯示

·none:不繼承母體的文字變形引數

注意:繼承是指html的識別符號對於包含自己的識別符號的引數會繼承下來。

2.文字修飾

文字修飾的主要用途是改變瀏覽器顯示文字鏈結時的下劃線。

基本格式如下:

text-decoration: 引數

引數取值範圍:

·underline:為文字加下劃線

·overline:為文字加上劃線

·line-through:為文字加刪除線

·blink:使文字閃爍

·none:不顯示上述任何效果

八.控制文字的樣式

控制文字的樣式包括單詞距離、字母距離、文字行距、文字水平對齊、文字垂直對齊文字縮排六個部分。

1.單詞間距

單詞間距指的是英文每個單詞之間的距離,不包括中文文字。

基本格式如下:

word-spacing: 間隔距離

間隔距離的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。

2.字母間距

字母間距是指英文本母之間的距離,功能、用法,以及引數的設定和單詞間距很相似。

基本格式如下:

letter-spacing: 字母間距

3.行距

行距是指上下兩行基準線之間的垂直距離。一般地說,英文五線格練習本,從上往下數的第三條橫線就是計算機所認為的該行的基準線。

基本格式如下:

line-height: 行間距離

行間距離取值:

·不帶單位的數字:以1為基數,相當於比例關係的100%

·帶長度單位的數字:以具體的單位為準

·比例關係

注意:如果文字字型很大,而行距相對較小的話,可能會發生上下兩行文字互相重疊的現象。

4.文字水平對齊

文字水平對齊可以控制文字的水平對齊,而且並不僅僅指文字內容,也包括設定、影像資料的對齊方式。

基本格式如下:

text-align: 引數

引數的取值:

·left:左對齊

·right:右對齊

·center:居中對齊

·justify:相對左右對齊

但需要注意的是,text-alight是塊級屬性,只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等識別符號裡。

5.文字垂直對齊

文字的垂直對齊應當是相對於文字母體的位置而言的,不是指文字在網頁裡垂直對齊。比如說,**的單元格裡有一段文字,那麼對這段文字設定垂直居中就是針對單元格來衡量的,也就是說,文字將在單元格的正中顯示,而不是整個網頁的正中。

基本格式如下:

vertical-align: 引數

引數取值:

·top:頂對齊

·bottom:底對齊

·text-top:相對文字頂對齊

·text-bottom:相對文字底對齊

·baseline:基準線對齊

·middle:中心對齊

·sub:以下標的形式顯示

·super:以上標的形式顯示

6.文字縮排

文字縮排可以使文字在相對預設值較窄的區域裡顯示,主要用於中文板式的首行縮排,或是為大段的引用文字和備註做成縮排的格式。

基本格式如下:

text-indent: 縮排距離

縮排距離取值:

·帶長度單位的數字

·比例關係

但是需要注意的是,在使用比例關係的時候,有人會認為瀏覽器預設的比例是相對段落的寬度而言的,其實事實並非如此,整個瀏覽器的視窗才是瀏覽器所預設的參照物。

另外,text-indent是塊級屬性,只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等識別符號裡。

CSS實用教程(二)

七 控制文字的樣式 控制文字的樣式包括文字大小寫 文字修飾兩個部分。1 文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示...

從基礎開始 CSS實用教程(三)

indent 2em 十二 控制box的樣式 樣式表規定了乙個容器box,它將要儲存乙個物件的所有可操作的樣式。包括了物件本身 邊框空白 物件邊框 物件間隙四個方面。1 邊框空白 margin 如圖所示,位於box模型的最外層,包括四項屬性。格式分別如下 margin top 頂部空白距離 marg...

從基礎開始 CSS實用教程(三)

indent 2em 十二 控制box的樣式 樣式表規定了乙個容器box,它將要儲存乙個物件的所有可操作的樣式。包括了物件本身 邊框空白 物件邊框 物件間隙四個方面。1 邊框空白 margin 如圖所示,位於box模型的最外層,包括四項屬性。格式分別如下 margin top 頂部空白距離 marg...