First-----背景
1: 背景? :background-color塌忽。
2: 背景圖像:必須為這個(gè)屬性設(shè)置一個(gè) URL 值:body {background-image: url(/i/eg_bg_04.gif);}
3:如果需要在頁面上對背景圖像進(jìn)行平鋪拍埠,可以使用?background-repeat 屬性。background-repeat: repeat-x? ??background-repeat: repeat-y (水平豎直方向重復(fù))
4: background-position:center;??將一個(gè)背景圖像居中放置:
單一關(guān)鍵字等價(jià)的關(guān)鍵字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left
百分?jǐn)?shù)值 - background-position:50% 50%;
長度值?background-position:50px 100px;圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素土居、向下 100 像素的位置上:
5:背景關(guān)聯(lián)?background-attachment:fixed.防止這種滾動(dòng)枣购。通過這個(gè)屬性嬉探,可以聲明圖像相對于可視區(qū)是固定的(fixed),因此不會受到滾動(dòng)的影響
總結(jié):
background簡寫屬性棉圈,作用是將背景屬性設(shè)置在一個(gè)聲明中涩堤。
background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。
background-color設(shè)置元素的背景顏色分瘾。
background-image把圖像設(shè)置為背景胎围。
background-position設(shè)置背景圖像的起始位置。
background-repeat設(shè)置背景圖像是否及如何重復(fù)德召。
Second---------文本
1:p {text-indent: 5em;}所有段落的首行縮進(jìn) 5 em:text-indent 還可以設(shè)置為負(fù)值
text-indent 可以使用所有長度單位白魂,包括百分比值
text-indent 屬性可以繼承
eg:
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<p>this is a paragragh.</p>
</div>
</div>
值 left、right 和 center 會導(dǎo)致元素中的文本分別左對齊上岗、右對齊和居中福荸。
最后一個(gè)水平對齊屬性是 justify。
h1 {text-align: center}?
h2 {text-align: left}
h3 {text-align: right}
也是對齊
2:字間隔-word-spacing 屬性可以改變字(單詞)之間的標(biāo)準(zhǔn)間隔肴掷。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的敬锐。屬性接受一個(gè)正長度值或負(fù)長度值。如果提供一個(gè)正長度值捆等,那么字之間的間隔就會增加滞造。為 word-spacing 設(shè)置一個(gè)負(fù)值,會把它拉近:
3字母間隔letter-spacing 屬性與 word-spacing 的區(qū)別在于栋烤,字母間隔修改的是字符或字母之間的間隔谒养。
4:字符轉(zhuǎn)換
text-transform 屬性處理文本的大小寫。這個(gè)屬性有 4 個(gè)值:
none
uppercase
lowercase
capitalize
默認(rèn)值 none 對文本不做任何改動(dòng)明郭,將使用源文檔中的原有大小寫买窟。顧名思義,uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符薯定。最后始绍,capitalize 只對每個(gè)單詞的首字母大寫。
5?文本裝飾??text-decoration 屬性
text-decoration 有 5 個(gè)值:
none
underline
overline
line-through
blink
underline 會對元素加下劃線话侄,就像 HTML 中的 U 元素一樣亏推。overline 的作用恰好相反,會在文本的頂端畫一個(gè)上劃線年堆。值 line-through 則在文本中間畫一個(gè)貫穿線吞杭,等價(jià)于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍变丧,類似于 Netscape 支持的頗招非議的 blink 標(biāo)記芽狗。
none 值會關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常痒蓬,無裝飾的文本是默認(rèn)外觀童擎,但也不總是這樣滴劲。例如,鏈接默認(rèn)地會有下劃線顾复。如果您希望去掉超鏈接的下劃線班挖,
6:處理空白符
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理捕透。
瀏覽器按照平常的做法去處理:丟掉多余的空白符聪姿。如果給定這個(gè)值,換行字符(回車)會轉(zhuǎn)換為空格乙嘀,一行中多個(gè)空格的序列也會轉(zhuǎn)換為一個(gè)空格末购。
值 pre
不過,如果將 white-space 設(shè)置為 pre虎谢,受這個(gè)屬性影響的元素中盟榴,空白符的處理就有所不同,其行為就像 XHTML 的 pre 元素一樣婴噩;空白符不會被忽略擎场。
值 nowrap
與之相對的值是 nowrap,它會防止元素中的文本換行几莽,除非使用了一個(gè) br 元素迅办。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 將一個(gè)表單元格設(shè)置為不能換行,不過 white-space 值可以應(yīng)用到任何元素章蚣。
值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line站欺,這在以前版本的 CSS 中是沒有的。這些值的作用是允許創(chuàng)作人員更好地控制空白符處理纤垂。
如果元素的 white-space 設(shè)置為 pre-wrap矾策,那么該元素中的文本會保留空白符序列,但是文本行會正常地?fù)Q行峭沦。如果設(shè)置為這個(gè)值贾虽,源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反吼鱼,會像正常文本中一樣合并空白符序列蓬豁,但保留換行符。
總結(jié):
? ?值? ? ? ? 空白符? ? ? ? ? ?換行符? ? ? ? ? ? ? ? 自動(dòng)換行
pre-line? ? ? ? 合并? ? ? ? ? ?保留? ? ? ? ? ? ? ? ? ? 允許
normal? ? ? ? ?合并? ? ? ? ? ?忽略? ? ? ? ? ? ? ? ? ? 允許
nowrap? ? ? ? ?合并? ? ? ? ? ? 忽略? ? ? ? ? ? ? ? ? ? 不允許
pre? ? ? ? ? ? ? 保留? ? ? ? ? ? ?保留? ? ? ? ? ? ? ? ? ? ? 不允許
pre-wrap? ? ? ?保留? ? ? ? ? ?保留? ? ? ? ? ? ? ? ? ?允許
7:文本方向direction 屬性影響塊級元素中文本的書寫方向菇肃、表中列布局的方向地粪、內(nèi)容水平填充其元素框的方向、以及兩端對齊元素中最后一行的位置巷送。
對于行內(nèi)元素,只有當(dāng)?unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時(shí)才會應(yīng)用 direction 屬性矛辕。direction 屬性有兩個(gè)值:ltr 和 rtl笑跛。大多數(shù)情況下付魔,默認(rèn)值是 ltr,顯示從左到右的文本飞蹂。如果顯示從右到左的文本几苍,應(yīng)使用值 rtl。
8:行間距?line-height(可以用百分比%100陈哑,像素px妻坝,數(shù)值1,0.5)
總結(jié):
屬性描述
color設(shè)置文本顏色
direction設(shè)置文本方向惊窖。
line-height設(shè)置行高刽宪。
letter-spacing設(shè)置字符間距。
text-align對齊元素中的文本界酒。
text-decoration向文本添加修飾圣拄。
text-indent縮進(jìn)元素中文本的首行。
text-shadow設(shè)置文本陰影毁欣。CSS2 包含該屬性庇谆,但是 CSS2.1 沒有保留該屬性。
text-transform控制元素中的字母凭疮。
unicode-bidi設(shè)置文本方向饭耳。
white-space設(shè)置元素中空白的處理方式。
word-spacing設(shè)置字間距执解。