一、背景
1、背景顏色用background-color屬性,例如:body{background-color:red}
2、用圖像做背景用background-image屬性,例如body{background-image:ul1(23.jpg)
3、背景由圖片重復(fù)平鋪用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%)、長(zhǎng)度值(50px 50px)]
例如:body
{background-image:url(23.jpg)
background-position:center}
5、設(shè)置圖片關(guān)聯(lián)屬性用background-attachment,例如下面的圖片背景不會(huì)隨文字的滾動(dòng)而滾動(dòng)
body{background-image:url(23.jpg);
background-repeat:no-repeat;
background-attachment:fixed;}
二、文本
1、縮進(jìn)文本用text-indent屬性,最常見的是段落首行縮進(jìn),縮進(jìn)值可以還負(fù)數(shù)
例如:p{text-indent:-5em},但設(shè)置負(fù)數(shù)容易超出瀏覽器窗口左邊界,要特別注意;
縮進(jìn)值單位可以是百分?jǐn)?shù)%,長(zhǎng)度單位px,度量單位em;
text-indent屬性可以繼承,例如:
div#outer {width:500px;}
div#inter {text-indent:10%}
p{width:200px;}
<div id="outer">
<div id="inter"> some text.some text.some text.
<p>this is a pragramph</p>
</div>
</div>
2、水平對(duì)齊用text-align屬性(left、right、center、justity)
3、word-spacing可以改變字(單詞)之間的標(biāo)準(zhǔn)間隔,默認(rèn)值normal與設(shè)置值為0是一樣的,
word-spacing接受正長(zhǎng)度值也可接受負(fù)長(zhǎng)度值
4、letter-spacing改變字符和字母之間的間距,其他同word-spacing,默認(rèn)值normal與設(shè)置值為0是
一樣的,接受正長(zhǎng)度值和負(fù)長(zhǎng)度值
5、text-transform處理文本的大小寫(none、uppercase大寫、lowercase小寫、capitalize首字母為大寫
6、text-decoration處理文本裝飾(none、underline、overline上劃線、line-through貫穿線、blink閃爍
7、處理空白符white-space
值pre-line,空白符:合并,換行符:保留,自動(dòng)換行:允許;
值normal,空白符:合并,換行符:忽略,自動(dòng)換行:允許;
值nowrap,空白符:合并,換行符:保留,自動(dòng)換行:不允許
值pre-wrap,空白符:保留,換行符:保留,自動(dòng)換行:允許
8、direction屬性影響塊級(jí)元素中文本的書寫方向,列表中布局的方向、內(nèi)容水平填充其文本框的方向以及兩端對(duì)齊元素中最后一行的位置(值有兩個(gè),ltr和rtk,其中l(wèi)tr為默認(rèn)值,為從左到右的方向)
9、line-height設(shè)置行高
以上這篇淺談CSS樣式之背景、文本就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選