web前端開發(fā)課件第3章 css-網(wǎng)頁(yè)美麗的衣裝

第3章css—網(wǎng)頁(yè)美麗的衣裝目錄div+css布局123Contentscss概念css常見樣式3.1css概念css表示層疊樣式表。通過css可以對(duì)網(wǎng)頁(yè)的字體、顏色、背景等屬性進(jìn)行設(shè)置，同樣可以結(jié)合div對(duì)網(wǎng)頁(yè)進(jìn)行布局。css的出現(xiàn)引發(fā)了網(wǎng)頁(yè)設(shè)計(jì)布局技術(shù)的變革。使用css控制網(wǎng)頁(yè)格式的方法有行內(nèi)法、內(nèi)嵌式、鏈接式和導(dǎo)入式法。本書以內(nèi)嵌式樣式為主展開介紹。所謂內(nèi)嵌式樣式，是通過<style>標(biāo)記將樣式定義在HTML文件的頭部。css小試牛刀<styletype="text/css">p{font-family:隸書;font-size:20px;text-decoration:underline;}</style>43.1.1css基本語(yǔ)法www.islide.cc5

語(yǔ)法

選擇器{屬性1：屬性值1；屬性2：屬性值2；...}基本語(yǔ)法選擇器表示樣式的名稱。選擇器為p，p在HTML中為段落標(biāo)記，因此重新定義了段落標(biāo)記的樣式，網(wǎng)頁(yè)中所有<p>標(biāo)記的樣式發(fā)生了變化。屬性是要設(shè)置的元素的格式，如字體，字號(hào)，顏色等。3.1.2css的3種基本選擇器6010203標(biāo)記選擇器類選擇器ID選擇器HTML標(biāo)記{屬性1：屬性值1；屬性2：屬性值2；...}HTML標(biāo)記選擇器.classname{屬性1：屬性值1；屬性2：屬性值2；...}class選擇器#IDname{屬性1：屬性值1；屬性2：屬性值2；...}ID選擇器3.1.3css樣式表的4種引入方法701020304行內(nèi)法內(nèi)嵌式鏈接式導(dǎo)入式通過style屬性定義在HTML標(biāo)記內(nèi)部的樣式稱為行內(nèi)樣式，行內(nèi)樣式僅僅影響該標(biāo)簽內(nèi)的對(duì)象，無(wú)法影響另一個(gè)標(biāo)簽內(nèi)對(duì)象樣式。語(yǔ)法：<html標(biāo)簽style=”屬性1：屬性值1；屬性2：屬性值2;...”>行內(nèi)法在HTML文件中使用<style>標(biāo)記設(shè)置樣式。語(yǔ)法：<styletype=”text/css”>選擇器{屬性1：屬性值1；...}</style>內(nèi)嵌式<linkhref=”cssurl.css”rel=”stylesheet”type=”text/css”>鏈接式<styletype=”text/css”>@importurl(外部樣式url);</style>導(dǎo)入式目錄div+css布局123Contentscss概念css常見樣式3.2css常見樣式9list-style-type（用于ul標(biāo)記）list-style-imagefloat（用于li標(biāo)記）設(shè)置項(xiàng)目列表a:link表示超級(jí)鏈接的普通樣式；a:visited表示被點(diǎn)擊過的超鏈接樣式；a:hover表示鼠標(biāo)指針經(jīng)過超鏈接的樣式；a:active表示在超鏈接上單擊時(shí)超鏈接的樣式。設(shè)置超鏈接樣式font-size、font-family、font-stylecolor、font-weight、text-decorationtext-indent設(shè)置文字樣式border-style、border-color、border-width、bordertext-align、vertical-alignfloat、marginwidth、height設(shè)置圖片樣式background-color、background-image、background-repeatbackground-positionbackground-attachment設(shè)置背景樣式目錄div+css布局123Contentscss概念css常見樣式3.3.1盒子模型11div標(biāo)記div是區(qū)塊標(biāo)記，區(qū)塊元素會(huì)自動(dòng)換行span標(biāo)記span標(biāo)記表示行內(nèi)元素，在行內(nèi)元素前后不會(huì)自動(dòng)換行，沒有結(jié)構(gòu)意義在網(wǎng)站開發(fā)中，經(jīng)常將網(wǎng)頁(yè)元素放置在<div>或者<span>盒子中。通過控制盒子的位置從而達(dá)到網(wǎng)頁(yè)布局的目的。盒子標(biāo)記在網(wǎng)頁(yè)中可以將所有的標(biāo)記（如<p>標(biāo)記、<img>標(biāo)記等）都可以看作盒子，盒子都具有邊框，有一定的尺寸，占據(jù)著頁(yè)面的一定的空間。通過調(diào)整盒子的邊框、距離、內(nèi)邊距和外邊距參數(shù)可以來(lái)控制盒子的位置盒子模型盒子模型在網(wǎng)頁(yè)中可以將所有的標(biāo)記（如<p>標(biāo)記、<img>標(biāo)記等）都可以看作盒子，盒子都具有邊框，有一定的尺寸，占據(jù)著頁(yè)面的一定的空間。通過調(diào)整盒子的邊框、距離、內(nèi)邊距和外邊距參數(shù)可以來(lái)控制盒子的位置。邊界屬性 margin-top margin-right margin-bottom margin-left邊框?qū)傩?border-style border-width border-color填充屬性 padding-top padding-right padding-bottom盒子元素的定位13在css中，可以通過兩種方式對(duì)網(wǎng)頁(yè)中的盒子進(jìn)行定位：float定位設(shè)置元素相對(duì)于其他網(wǎng)頁(yè)元素的定位方式，可以設(shè)置為left、right或者默認(rèn)none。position定位指定塊的位置，可以取static、absolute、relative或fixed。float定位14對(duì)象浮動(dòng)在父級(jí)元素的左邊f(xié)loat:left對(duì)象浮動(dòng)在父級(jí)元素的右邊f(xié)loat:right盒子不浮動(dòng)float:none在標(biāo)準(zhǔn)流中，一個(gè)塊元素（獨(dú)占一行的元素，如div、p、table等元素）在水平方向上會(huì)自動(dòng)伸展，在垂直方向上和其他塊級(jí)元素依次排列。如果希望塊級(jí)元素并排顯示的話，可以通過浮動(dòng)方式實(shí)現(xiàn)。當(dāng)設(shè)置了浮動(dòng)屬性，此時(shí)元素將脫離標(biāo)準(zhǔn)流，后面盒子將占到脫離標(biāo)準(zhǔn)流的元素位置。當(dāng)float取值為left或right，元素就會(huì)向父元素的左側(cè)或者右側(cè)緊靠，同時(shí)盒子的寬度不再延伸，會(huì)根據(jù)盒子中的內(nèi)容決定寬度。position定位15靜態(tài)定位，是position默認(rèn)的屬性值，表示盒子按照標(biāo)準(zhǔn)流進(jìn)行布局static絕對(duì)定位，使用標(biāo)準(zhǔn)流的排版方式，盒子的位置以包含它的父盒子為基準(zhǔn)進(jìn)行偏移absolute相對(duì)定位，使用標(biāo)準(zhǔn)流的排版方式，表示盒子相對(duì)于它原來(lái)的標(biāo)準(zhǔn)位置偏移的位置relative固定定位，和絕對(duì)定位相似，但是是以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。當(dāng)點(diǎn)擊瀏覽器窗口的垂直滾動(dòng)條時(shí)固定定位的盒子位置保持不變fixed3.3.2div+css布局div+css布局是對(duì)網(wǎng)頁(yè)先整體進(jìn)行分區(qū)（每個(gè)分區(qū)是個(gè)div塊），然后對(duì)每個(gè)分塊進(jìn)行css定位。通過css排版的頁(yè)面，可以通過更新css屬性來(lái)重新定位板塊的位置。這種排版方式比表格布局要靈活。3.3.3常見布局結(jié)構(gòu)www.islide.cc17這種布局結(jié)構(gòu)是網(wǎng)頁(yè)開發(fā)中常用的布局方式，頁(yè)面容器寬度確定，頁(yè)面元素相對(duì)于瀏覽器窗口水平居中對(duì)齊.寬度固定且居中川字結(jié)構(gòu)網(wǎng)頁(yè)布局的方法，先確定左邊、右邊塊以及中間塊的大小，使用絕對(duì)或相對(duì)定位方式定位，在設(shè)置盒子大小時(shí)注意左中右盒子的大小之和不能超過頁(yè)面的寬度，否則右側(cè)盒子將會(huì)換行。川字結(jié)構(gòu)國(guó)字型結(jié)構(gòu)包括頂部區(qū)域（top），中間的主體部分(container)和下方的版尾(bottom)三個(gè)部分，主體部分又可以細(xì)化為左側(cè)(left)和右側(cè)(right)。三行兩列式國(guó)字型布局REPORT2019本章小結(jié)18

習(xí)題一1.css選擇器有（）、（）和（）。2.在外部編寫css文件，需要在<head></head>之間寫上（）標(biāo)記鏈接樣式表文件，實(shí)現(xiàn)HTML與css分離。

習(xí)題二3.盒子模型由（）、（）、（）和（）組成。4.盒子的position定位有（）、（）、（）和（）。課后習(xí)題css是層疊樣式表的縮寫，它的作用是定義網(wǎng)頁(yè)的外觀和布局，可以使網(wǎng)頁(yè)的內(nèi)容和格式