CSS關於網頁中的文字

2021-06-11 21:30:01 字數 2131 閱讀 1221

字型的處理在網頁設計中無論怎麼強調也不為過,畢竟網頁使用來傳遞資訊的,而最經典最直接的資訊傳遞方式就是文字,所以,了解一點字型的基本知識對於設計來說還是非常重要的。下面總結一些平時經常能用到的^-^

文字行間距:line-height

行間距取決於字型的大小,一般來說,小的字型大小需要大一點的行間距來便於閱讀,中文字型在網頁上如果沒有行間距的設定,對於閱讀大段文字來說是讀者的災難,所以適當設定line-height是非常必要的。一般地, line-height 在網頁設計中應該是字型大小的1.5倍到2倍。word 和其它的文字編輯軟體裡, 一般設定字型的120%作為預設的行間距。css裡的 line- height 設定,是均分後加在每一行的上下,也就是說,如果 line-height 設定為 20px 的話,那麼每一行文字的上下各有10px的間距。

字間距:word-spacing

字元間距:letter-spacing

段落首行縮排:text-indent   

注意:一般來說,可以為所有塊級元素應用 text-indent,但無法將該屬性應用於行內元素,影象之類的替換元素上也無法應用 text-indent 屬性。不過,如果乙個塊級元素(比如段落)的首行中有乙個影象,它會隨該行的其餘文字移動。

對齊方式

text-align 是乙個基本的屬性,它會影響乙個元素中的文字行互相之間的對齊方式。它的前 3 個值相當直接,不過第 4 個和第 5 個則略有些複雜。

值 left、right 和 center 會導致元素中的文字分別左對齊、右對齊和居中。

西方語言都是從左向右讀,所有 text-align 的預設值是 left。文字在左邊界對齊,右邊界呈鋸齒狀(稱為「從左到右」文字)。對於希伯來語和阿拉伯語之類的的語言,text-align 則預設為 right,因為這些語言從右向左讀。不出所料,center 會使每個文字行在元素中居中。

您可能會認為 text-align:center 與 元素的作用一樣,但實際上二者大不相同。

不僅影響文字,還會把整個元素居中。text-align 不會控制元素的對齊,而只影響內部內容。元素本身不會從一段移到另一端,只是其中的文字受影響。

最後乙個水平對齊屬性是 justify。

在兩端對齊文字中,文字行的左右兩端都放在父元素的內邊界上。然後,調整單詞和字母間的間隔,使各行的長度恰好相等。您也許已經注意到了,兩端對齊文字在列印領域很常見。

需要注意的是,要由使用者**(而不是 css)來確定兩端對齊文字如何拉伸,以填滿父元素左右邊界之間的空間。

空白符(空格、換行和 tab 字元)處理

white-space 設定為normal:丟掉多餘的空白符。如果給定這個值,換行字元(回車)會轉換為空格,一行中多個空格的序列也會轉換為乙個空格。

white-space 設定為 pre:受這個屬性影響的元素中,空白符的處理就有所不同,其行為就像 xhtml 的 pre 元素一樣;空白符不會被忽略。

如果 white-space 屬性的值為 pre,瀏覽器將會注意額外的空格,甚至回車。在這個方面,而且僅在這個方面,任何元素都可以相當於乙個 pre 元素。

注意:ie 7 以及更早版本的瀏覽器不支援該值。

white-space 設定為nowrap:它會防止元素中的文字換行,除非使用了乙個 br 元素。在 css 中使用 nowrap 非常類似於 html 4 中用 將乙個表單元格設   置為不能換行,不過 white-space 值可以應用到任何元素。

下面的**總結了 white-space 屬性的行為:

值空白符

換行符自動換行

pre-line

合併保留

允許normal

合併忽略

允許nowrap

合併忽略

不允許pre

保留保留

不允許pre-wrap

保留保留允許

CSS教程 網頁文字漸變

你是否想不用photoshop來建立乙個qudmbmhmrt帶漸變的標題文字嗎?這裡用乙個簡單的css技巧來向你展示如何僅僅使用css和png來製造這種效果.經測試這種方法適合大多數主流瀏覽器.當然,ie6需要乙個支援透明png的hack 值得慶幸的是微軟正在極力的將使用者的ie6自動公升級到ie7...

CSS控制網頁中文字的技巧

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

CSS控制網頁中文字的技巧

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