CSS文字

QQ截图20161011145219.png

上面表格中的屬性我們不會一一講述,只講述一些常用的屬性,主要是讓大家邊學邊練。其他內容大家可以自己測試,w3c 上面也可以查看每個屬性的具體內容。

範例1 顏色color

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>查看颜色</p>
        <h1>标题查看颜色</h1>
    </body>
</html>

style.css

body{
   color: aqua;
}

運行結果:

QQ截图20161011145634.png


大家可以看到我們是設定給body 的顏色,但p 標籤和h1 的標籤也顯示了body 設定的字體顏色,說明了兩個標籤繼承了body 的字體顏色。

範例2 text-align

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

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

西方語言都是從左向右讀,所有text-align的預設值是 left。文字在左邊界對齊,右邊界呈鋸齒狀(稱為“從左到右”文字)。 index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>php中文网</p>
    </body>
</html>

style.css

body{
   color: red;
   text-align: center;
}

運行結果: 

QQ截图20161011145702.png

##範例3 text-indent

縮排文字把Web 頁面上的段落的第一行縮進,這是最常用的文字格式化效果。 CSS 提供了text-indent屬性,該屬性可以方便地實現文字縮排。 透過使用text-indent屬性,所有元素的第一行都可以縮排給定的長度,甚至該長度可以是負值。 這個屬性最常見的用途是將段落的首行縮進,下面的規則會使所有段落的首行縮排5 em:

p {text-indent: 5em;}

下面的index.html 中代碼為:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div>
            <h3>PHP中文网</h3>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
         </div>
    </body>
</html>

這時如果不加任何的css 修飾。顯示的效果為: 

我們的 style.css 程式碼中加入以下內容縮排讓實驗大樓三個字縮排 2 個位元組。

 h3{
   text-indent: 5em;
 }

運行結果:

 

QQ截图20161011145739.png

#字間隔

word-spacing 屬性可以改變字(單字)之間的標準間隔。其預設值 normal 與設定值為 0 是一樣的。

word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值,那麼字之間的間隔就會增加。為 word-spacing 設定一個負值,會把它拉近:

<html>
<body>
		<h1 style="word-spacing:15px;">设置中文字符间距</h1>
		<h1 style="word-spacing:15px;">this is a test</h1>
	</body>
</html>

字母間隔

letter-spacing 屬性與 word-spacing 的差別在於,字母間隔修改的是字元或字母之間的間隔。

與 word-spacing 屬性一樣,letter-spacing 屬性的可取值包括所有長度。預設關鍵字是 normal(這與 letter-spacing:0 相同)。輸入的長度值會使字母之間的間隔增加或減少指定的量:

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>

字元轉換

# #text-transform 屬性處理文字的大小寫。這個屬性有4 個值:

  •     none

  •     uppercase

  •     lowercase

  • #    capitalize

預設值none 不對文字不做任何改變,將使用原始文件中的原始大小寫。顧名思義,uppercase 和 lowercase 將文字轉換為全大寫和全小寫字元。最後,capitalize 只對每個單字的首字母大寫。

作為一個屬性,text-transform 可能無關緊要,不過如果您突然決定把所有 h1 元素變成大寫,這個屬性就很有用。不必單獨地修改所有 h1 元素的內容,只需使用 text-transform 為你完成這個修改:

h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先,只需寫一個簡單的規則來完成這個修改,而無需修改 h1 元素本身。其次,如果您以後決定將所有大小寫再切換為原來的大小寫,可以更輕鬆地完成修改。

文字裝飾

接下來,我們討論 text-decoration 屬性,這是一個很有意思的屬性,它提供了很多非常有趣的行為。

text-decoration 有5 個值:

  •         none

  •       underline

  • ##      underline

########################################################################################################################################################## ##       overline############        line-through############        blink#############        blink#############n,underline 會對者而言,underline 會對至元素加底線,就像HTML 中的U 元素一樣。 overline 的作用剛好相反,會在文本的頂端畫一個上劃線。值 line-through 則在文字中間畫一個貫穿線,等價於 HTML 中的 S 和 strike 元素。 blink 會讓文字閃爍,類似於 Netscape 支援的頗招非議的 blink 標記。 ######none 值會關閉原本應用到一個元素上的所有裝飾。通常,無裝飾的文字是預設外觀,但也不總是這樣。例如,連結預設地會有下劃線。如果您希望去掉超連結的下劃線,可以使用以下 CSS 來做到這一點:###
a {text-decoration: none;}

注意:如果明確地用這樣一個規則去掉鏈接的下劃線,那麼錨與正常文本之間在視覺上的唯一差別就是顏色(至少默認是這樣的,不過也不能完全保證其顏色肯定有區別)。

也可以在一個規則中結合多種裝飾。如果希望所有超連結既有下劃線,又有上劃線,則規則如下:

a:link a:visited {text-decoration: underline overline;}

不過要注意的是,如果兩個不同的裝飾都與同一元素匹配,勝出規則的值會完全取代另一個值。請考慮以下的規則:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

對於給定的規則,所有class 為stricken 的h2 元素都只有一個貫穿線裝飾,而沒有下劃線和上劃線,因為 text-decoration 值會替換而不是累積起來。

處理空白符

white-space 屬性會影響到使用者代理程式對來源文件中的空格、換行和 tab 字元的處理。

透過使用該屬性,可以影響瀏覽器處理字之間和文字行之間的空白符號的方式。從某種程度上講,預設的 XHTML 處理已經完成了空白符處理:它會把所有空白符合併為一個空格。所以給定以下標記,它在Web 瀏覽器中顯示時,各個字之間只會顯示一個空格,同時忽略元素中的換行:

<p>This     paragraph has    many
    spaces           in it.</p>

可以用以下聲明顯式地設定這種默認行為:

p {white-space: normal;}

上面的規則告訴瀏覽器要按照平常的做法去處理:丟掉多餘的空白符。如果給定這個值,換行字元(回車)會轉換為空格,一行中多個空格的序列也會轉換為一個空格。

文字方向

如果您閱讀的是英文書籍,就會從左到右、從上到下地閱讀,這就是英文的流動方向。不過,並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的,當然也包括希伯來文和阿拉伯文等等。 CSS2 引入了一個屬性來描述其方向性。

direction 屬性影響區塊級元素中文字的書寫方向、表中列佈局的方向、內容水平填滿其元素框的方向、以及兩端對齊元素中最後一行的位置。

註解:對於行內元素,只有當 unicode-bidi 屬性設為 embed 或 bidi-override 時才會套用 direction 屬性。

direction 屬性有兩個值:ltr 和 rtl。大多數情況下,預設值是 ltr,顯示從左到右的文字。如果顯示從右到左的文本,應使用值 rtl。

繼續學習
||
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>