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

一、背景

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">
<p id="inter"> some text.some text.some text.
<p>this is a pragramph</p>
</p>
</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樣式之背景、文本就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。