1. 程式人生 > >CSS文本簡單設置

CSS文本簡單設置

讀寫 indent 三種 nbsp pac 垂直 好的 問題 陰影

文本的設置直接影響到用戶對界面的感受,好的文本設置能夠讓用戶對界面有一種賞心悅目的感受,在這地方我們來簡單的說說說對文本設置的時候,有哪些格式。

文本設置的時候我們應該註意什麽:
平時我們文本設置的時候,主要是註重對文本的顏色設置,文本的對齊方式。文本的修飾,文本的轉換和文本的縮進。以及關於文本設置的時候文字或者是行和字符之間的距離的一些設置。那麽我們如今就來一一的看一下這些設置。

在說這些設置之前我們有必要了解CSS中的文本屬性,由於全部的設置都是對文本的屬性進行的設置,那麽CSS中的文本屬性有哪些:

color 文本的顏色

text-align:文本的對齊方式

text-decoration文本的修飾

text-transform文本的轉換

direction文本的方向

word-spacing文本中單詞的距離

white-space文本下方不被文字環繞

vertical-align:文本的垂直的對齊方式

text-shadow文本設置陰影

text-indent文本首行縮進

line-height文本之間行距離

letter-spacing字符之間的距離

上面是對文本的屬性以及簡單的介紹,我們以下就環繞著這些屬性來一個一個為大家熟悉和學習:

設置文本的顏色

這個屬性有三種能夠進行賦值的方式一個是16進制賦值。一個是rgb(),另一個是顏色名字如red,註意的是我們在設置的有時候可能在某一個頁面中的某一個元素進行設置顏色。我們要知道的的是的那個當我們在body設置顏色的時候,這時候,裏面的文字某一個段落假設是沒有設置顏色屬性,而且包括在body中,這個時候文字顯示的是body所設置的顏色

比方:<style type="text/css">
body{color:red;}
h1{color:#00ff00;}
p.ex{color:rgb(0,0,255);}
</style>

<body>

<p>這個段落沒有設置顏色</p>

</body>此時這個地方的p中的文字是顯示的紅色和body設置的顏色是一樣的

上面是對文本的一個顏色的設置,接著我們來看對齊方式的設置:

<style type="text/css">
h1{text-align:center;}
p.date{text-align: right;}
p.main{text-align: justify;}
</style>文本的對齊方式的設置是對text-align這個屬性的設置,屬性的值有三個是center表示的是居中對齊,right是右端justify是表示的是兩端對齊,

文本的修飾

事實上文本的修飾並非我們想的那樣的復雜。文本的修飾我們也能夠為是線和文字之間的關系,線可能和文字沒有關系,也有可能是字的下滑線,也有可能是刪除線,也有可能可能是山劃線,那麽我們對文字修飾用到的屬性是什麽,text-decoration這個屬性。我們能夠設置這個屬性的值為:

h1{text-decoration: overline;}上劃線
h2{text-decoration: line-through;}刪除線

h3{text-decoration: underline;}下劃線

a{ text-decoration:none;}沒有線。為什麽要有這個的一個屬性,由於我們對鏈接經常是默認有下劃線的。我們也能夠讓這個鏈接沒有下劃線。在此我們僅僅須要設置鏈接的屬性text-decoration的值為none就能夠了

<a href="......">點擊鏈接</a>

文本的轉換:

文本的轉換是對字母而言的,我們知道字母有大寫,有小寫,文本的轉換就是說的大寫和小寫的轉換的問題

p.uppercase{text-transform: uppercase;}轉換成為大寫的字母
p.lowercase{text-transform: lowercase;}轉換成為小寫字母
p.capitalize{text-transform: capitalize;}將單詞的首字母大寫

在上面我們能夠看出的是對文字轉換用到的屬性是text-transform這個屬性,這個屬性的值能夠為說為三個是uppercase表示將字母轉換成為大寫的字母 lowercase表示將字母轉換成為小寫的字母,capitalize表示將單詞的首字母大寫。

文本縮進:

在一段文字的開頭,文字是縮進的也就是,空兩格。在CSS中我們也有這個的對文字進行設置的代碼

這個用到的一個屬性是text-indent這個屬性,這屬性的值是一個大小表示我們文字往裏面縮進了的長度

p{text-indent:50px;}

文本距離:

<style type="text/css">
h1{letter-spacing: 20px;}
h2{letter-spacing: -3px;}
</style>

用到的屬性書letter-spacing後面是一個值表示字符之間的距離大小。我們要知道的是這個地方字符是以字母為單位的

也就是假設我們這個數字夠大的話,我們的一個單詞之間的空格會非常長對應的的我們也有單詞之間的空格:word-spacing這個屬性和letter-spacing使用方法是一樣的,僅僅是word-spacing表示的是單詞之間的距離

說的距離我們自然會想到行行之間的距離。那麽如何來設置行行之間的距離,用到的是:

line-height這個屬性用來設置行行之間的距離

文本的方向:

大千世界無奇不有,我們經常看到的文本是從左到右寫的,可是有的人的喜歡從右到左的讀寫。我們這個時候就要用到direction這個屬性來設置文本的方向

<style type="text/css">
div.ex1{direction: rtl;}
</style>

rtl表示我們的文本是從右邊向左邊寫,靠左邊的可是文字的順序是不變的還是從左向右讀。

文本的陰影:

在word裏面有藝術字,我們想設置字體美麗一點能夠設置陰影,那麽我們如何來設置陰影,用到的keyword是

text-shadow這個來設置字體陰影

<style type="text/css">
h1{text-shadow:2px 2px #FF0000;}
</style>

文本主要的設置也就那麽多。希望對大家有所幫助!



CSS文本簡單設置