CSS-背景,文本

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;}

<div id? = "outer">
<div id = "inner">
some text. some text. some text.

<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è)置字間距执解。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寞肖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子材鹦,更是在濱河造成了極大的恐慌逝淹,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桶唐,死亡現(xiàn)場離奇詭異栅葡,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)尤泽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門欣簇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人坯约,你說我怎么就攤上這事熊咽。” “怎么了闹丐?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵横殴,是天一觀的道長。 經(jīng)常有香客問我,道長衫仑,這世上最難降的妖魔是什么梨与? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮文狱,結(jié)果婚禮上粥鞋,老公的妹妹穿的比我還像新娘。我一直安慰自己瞄崇,他們只是感情好呻粹,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著苏研,像睡著了一般等浊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上楣富,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天逼裆,我揣著相機(jī)與錄音昼汗,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛菊值,可吹牛的內(nèi)容都是我干的豁遭。 我是一名探鬼主播农曲,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼殴边,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了兼犯?” 一聲冷哼從身側(cè)響起忍捡,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎切黔,沒想到半個(gè)月后砸脊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纬霞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年凌埂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诗芜。...
    茶點(diǎn)故事閱讀 38,617評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡瞳抓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伏恐,到底是詐尸還是另有隱情孩哑,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布翠桦,位于F島的核電站横蜒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜丛晌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一鹰霍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧茵乱,春花似錦、人聲如沸孟岛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽渠羞。三九已至斤贰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間次询,已是汗流浹背荧恍。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留屯吊,地道東北人送巡。 一個(gè)月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像盒卸,于是被迫代替她去往敵國和親骗爆。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素蔽介;行內(nèi)(內(nèi)聯(lián)摘投、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 1,989評論 1 4
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的虹蓄,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體犀呼。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,858評論 0 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,033評論 0 1
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font薇组,text-align外臂,li...
    love2013閱讀 2,304評論 0 11
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92