web前端開發(fā)課件第3章 css-網(wǎng)頁美麗的衣裝_第1頁
web前端開發(fā)課件第3章 css-網(wǎng)頁美麗的衣裝_第2頁
web前端開發(fā)課件第3章 css-網(wǎng)頁美麗的衣裝_第3頁
web前端開發(fā)課件第3章 css-網(wǎng)頁美麗的衣裝_第4頁
web前端開發(fā)課件第3章 css-網(wǎng)頁美麗的衣裝_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

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

語法

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論