首頁 > web前端 > css教學 > CSS樣式之背景、文字的詳細介紹

CSS樣式之背景、文字的詳細介紹

高洛峰
發布: 2017-03-09 10:38:12
原創
1455 人瀏覽過

一、背景

1、背景顏色用background-color屬性,例如:body{background-color:red}

2、用圖像做背景用background-image屬性,例如body{background-image:ul1(23.jpg)

3、背景由圖片重複平鋪用backgroud-repeat屬性,repeat- x或repeat-y分別表示水平或垂直平鋪,

no-repeat表示允許從任何方向上平鋪

例如:body
{background-image:url(23 .jpg)
background-repeat:repeat-x:) }

4、用background-position屬性將背景定位,[位置:top、bottom、left、right、center、還可使用

百分比(50% 50%)、長度值(50px 50px)]

例如:body
{background-image:url (23.jpg)
background-position:center}

5、設定圖片關聯屬性用background-attachment,例如下面的圖片背景不會隨文字的滾動而滾動

# body{background-image:url(23.jpg);
background-repeat:no-repeat;
background-attachment:fixed;}

二、文字

1、縮排文字用text-indent屬性,最常見的是段落首行縮進,縮排值可以還負數

例如:p{text- indent:-5em},但設定負數容易超出瀏覽器視窗左邊界,要特別注意;

縮排值單位可以是百分數%,長度單位px,度量單位em;

# text-indent屬性可以繼承,例如:
p#outer {width:500px;}
p#inter  {text-indent:10%}
p{width:200px;}
#< p id="outer">

some text.some text.some text.

this is a pragramph


< /p>

2、水平對齊用text-align屬性(left、right、center、justity)

3、word-spacing可以改變字(字)之間的標準間隔,預設值normal與設定值為0是一樣的,

word-spacing接受正長度值也可接受負長度值

4、letter-spacing改變字元和字母之間的間距,其他同word-spacing,預設值normal與設定值為0是 

一樣的,接受正長度值和負長度值

5、text -transform處理文字的大小寫(none、uppercase大寫、lowercase小寫、capitalize首字母為大寫

6、text-decoration處理文字裝飾(none、underline、overline上劃線、line-through貫穿線、blink閃爍

7、處理空白符號white-space

值pre-line,空白符號:合併,換行符號:保留,自動換行:允許;
值normal,空白符:合併,換行符:忽略,自動換行:允許;
值nowrap,空白符:合併,換行符:保留,自動換行:不允許
值pre-wrap,空白符:保留,換行符:保留,自動換行:允許

8、direction屬性影響區塊級元素中文字的書寫方向,清單中佈局的方向、內容水平填充其文字方塊的方向以及兩端對齊元素中最後一行的位置(值有兩個,ltr和rtk,其中ltr為預設值,為從左到右的方向)

9、line-height設定行高

#以上這篇淺談CSS樣式之背景、文字就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

以上是CSS樣式之背景、文字的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板