章元素布局與文字排版

第三章元素布局與文字排版課程回顧上次課我們主要講了：CSS的盒模型盒模型的不同類型盒模型的定位2本章節(jié)授課目標(biāo)如何混合使用元素定位來完成網(wǎng)頁布局BS系統(tǒng)界面的布局方法3元素定位絕對定位：相對定位：浮動(dòng)定位：4對象從隊(duì)列中脫離出來，根據(jù)top，right，bottom，left這些偏移量，針對最近一個(gè)具有定位設(shè)置的祖先元素進(jìn)行定位根據(jù)top，right，bottom，left偏移，針對其父元素進(jìn)行定位，原有隊(duì)列位置會(huì)保留向左或者向右浮動(dòng)，不包含在普通元素的隊(duì)列之中，但是包含在浮動(dòng)定位元素的隊(duì)列中5界面分析在一個(gè)Web頁面中，除了數(shù)據(jù)型列表之外，一定不要出現(xiàn)table6ul和li的使用ul：無序列表如何去掉ul前面的“黑點(diǎn)”：list-style屬性list-style：和border一樣，list-style屬于復(fù)合屬性，共包含

三種方式：list-style-type：列表樣式類型list-style-image：列表樣式圖片list-style-position：列表樣式位置7list-style-typelist-style-type可選值：通常情況下，我們在編寫CSS樣式之前，都會(huì)初始化一些元素的樣式，ul的list-style就是其中之一將ul的list-style-type設(shè)定成數(shù)字（英文）狀態(tài)，實(shí)現(xiàn)的效果與ol完全一樣8ul{list-style:none}list-style-imagelist-style-image屬性的值是一個(gè)url地址被設(shè)定的圖片，將以圖標(biāo)形式出現(xiàn)在ul的style位置Css不會(huì)為我們?nèi)ヌ幚韴D片的尺寸，因此要想讓圖片符合我們

的需要，需要在圖片這一端進(jìn)行處理圖片的呈現(xiàn)，是以元素背景的形式，會(huì)被瀏覽器緩存9list-style-image：url（’.../img/aa.jpg’）;list-style-positionlist-style-position包含兩種屬性值：outside：默認(rèn)值。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對齊

inside：列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對齊ul是以縮進(jìn)的形式呈現(xiàn)list-style的，也就是說ul具有默認(rèn)的padding-left屬性，當(dāng)我們將padding-left設(shè)定為0時(shí)，默認(rèn)的list-style會(huì)失效，但是如果將list-style-position設(shè)定為inside時(shí)，padding-left為0不會(huì)對ul的list-style造成影響list-style也可以同時(shí)設(shè)定幾種屬性值，順序不分先后10list-style：url（’.../img/aa.jpg’）inside;文字的css處理font：文字的屬性設(shè)定font也屬于復(fù)合屬性：font-family：字體名稱，常見形式font-size：字號(hào)大小，常見形式font-weight：字體粗細(xì)，常見形式font-style：字體樣式（斜體），常見形式font屬性可以同時(shí)對多個(gè)屬性賦值，順序不分先后11font-family:'微軟雅黑‘,Arialfont-size:12pxfont-weight:boldfont-style:italicfont-familyfont-family：字體名稱，可同時(shí)設(shè)定多個(gè)字體名稱，優(yōu)先順序從左到右通常情況下我們只需要選擇兩種字體名稱為font-family賦值，一種用于英文字體，一種用于中文字體注：瀏覽器中的Web頁面屬于客戶端，因此我們所設(shè)定的字體必須是客戶端存在的非客戶端字體的使用：12font-family:Arial，'微軟雅黑‘@font-face{font-family:myFont;src:url('font/some_font_file.eot');}font-family:myFonturl地址必須指向OpenType字體文件(.eot或.ote)不建議使用font-sizefont-size：最常用的字號(hào)12px(=9pt)隨著硬件發(fā)展，瀏覽器和分辨率增大，目前14px字體已經(jīng)漸漸取代12px成為主流特別提示：在IE6下，元素的最小高度會(huì)被默認(rèn)與字號(hào)相等如需將元素高度設(shè)為小于字號(hào)的高度，需將該元素字號(hào)設(shè)為013font-weight&font-stylefont-weight：用于中文字體中，只有兩種設(shè)定normal和boldfont-style（不推薦）：包含三種設(shè)定normal、italic和obliqueitalic為斜體oblique為傾斜字體當(dāng)italic所設(shè)定字體不包含斜體時(shí)，會(huì)調(diào)用oblique設(shè)定14字體顏色color：前景色，用于設(shè)定字體顏色

字體顏色值通常有兩種設(shè)定方式：顏色名：如redgreenblue顏色值：如#F00#0F0#00F15小結(jié)有問題嗎？16內(nèi)容的對齊text-align：（文本）內(nèi)容對齊方式

left：默認(rèn)值，左對齊center：水平居中對齊right：右對齊justify：兩端對齊垂直方向?qū)R：沒有！單行內(nèi)容的垂直居中：line-height（行高）參數(shù)值為數(shù)值或百分比line-height的默認(rèn)值為字體高度，如果需要讓文字在容器內(nèi)垂直居中對齊，只需將的行高設(shè)定為容器高度（僅對文字等部分內(nèi)容有效）百分比參數(shù)，通常用于設(shè)定成段內(nèi)容的行間距17vertical-align==無效表單樣式表單的CSS，通常我們會(huì)針對以下幾個(gè)屬性進(jìn)行設(shè)定：1.邊框：border2.背景色（背景圖）：background3.字體顏色：colorbackground背景設(shè)定也屬于復(fù)合屬性，包含：background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment提示：為了增加用戶體驗(yàn)性，同一個(gè)表單我們會(huì)分別設(shè)定2~3種樣式18background-color&background-imagebackground-color：背景色，與前景色（color）一樣，可以設(shè)定顏色名或者顏色值background-image：背景圖，一個(gè)url值，引用背景圖所在路徑幾乎所有元素都可以設(shè)定背景元素的背景圖會(huì)被瀏覽器緩存19background-image：url（’.../img/aa.jpg’）;background-repeat&background-positionbackground-repeat：背景平鋪狀態(tài)，包含四種設(shè)定repeat：默認(rèn)，平鋪no-repeat：不平鋪repeat-x：延x軸（水平方向）平鋪repeat-y：延y軸（垂直方向）平鋪background-position：背景圖起點(diǎn)位置，百分比、數(shù)值或位置名元素背景圖默認(rèn)從元素的左上角開始，包含x和y兩個(gè)坐標(biāo)background-position還可以拆分成background-positionX和background-positionY兩個(gè)屬性使用，但我們很少這樣做元素的背景起點(diǎn)可以是負(fù)值位置名包含：x軸（leftcenterright），y軸（topmiddlebottom）20background-attachmentbackground-attachment：背景圖是否固定scroll：默認(rèn)，滾動(dòng)fixed：不滾動(dòng)background屬性不具備直接繼承性，但具備視覺繼承性，通常情況下，我們需要在一開始，將body或者h(yuǎn)tml的背景