CSS文本簡單設定

來源:互聯網
上載者:User

標籤:字母   data-   direction   ...   style   刪除   個數   css   應該   

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

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

在說這些設定之前我們有必要瞭解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文本簡單設定

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.