網(wǎng)頁CSS布局與設(shè)計教材

1、網(wǎng)頁CSS布局與設(shè)計l 什么是Web標(biāo)準(zhǔn)l web表現(xiàn)層技術(shù)，結(jié)構(gòu)，表現(xiàn)，行為l CSS布局與table布局的區(qū)別l 傳統(tǒng)的table布局VS.CSS布局l css+div編寫工具選擇第1章 Web標(biāo)準(zhǔn)與css布局概述l 使用CSS編輯器n如Dreamweaver、Frontpage等都會自帶CSS編輯器。 l 使用超文本編輯器n如Dreamweaver、Frontpage等超文本編輯器均可編輯樣式表；n記事本CSS+divCSS+div編寫工具選擇編寫工具選擇l HTML基礎(chǔ)，選擇合適的doctype，選擇合適的標(biāo)簽l Css的概念l 使用css控制頁面l 體驗css第2章HTML與CSS基

2、礎(chǔ)l CSS(cascading style sheet)，層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁分離的一種標(biāo)識性語言。 CSS 是 1996 由 W3C 審核通過，并且推薦使用的。CSS 的引入就是為了使 HTML 語言更好的適應(yīng)頁面的美工設(shè) 計。它以 HTML 語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計者 可以針對各種可視化瀏覽器（包括顯示器、打印機(jī)、打字機(jī)、投影儀和 PDA 等）來設(shè)置不同的樣式風(fēng)格。CSS 的引入引發(fā)了網(wǎng)頁設(shè)計一個又一個的新高潮。使用 CSS 設(shè)計的優(yōu)秀頁面層出不窮。l 和 HTML 類似，CSS 也是由 W3C 組織

3、負(fù)責(zé)制定和發(fā)布的。1996 年 12 月發(fā)布了 CSS 1.0 規(guī)范，1998 年發(fā) 5 月布 了 2.0 規(guī)范。目前的有兩個新版本正處于工作狀態(tài)，即 2.1 版和 3.0 版。CSSCSS的概念的概念l 行內(nèi)樣式n對標(biāo)記使用style屬性n正文內(nèi)容1n正文內(nèi)容2n正文內(nèi)容3使用使用csscss控制頁面控制頁面l 內(nèi)嵌樣式n用聲明，寫在中pcolor:#ff00ff;text-decoration:underline;font-weight:bold;font-size:25px;紫色、粗體、下劃線、25px的效果1紫色、粗體、下劃線、25px的效果2使用使用CSSCSS控制頁面控制頁面l 鏈

4、接樣式l 獨立css代碼文件l 頁面：css標(biāo)題1 紫色、粗體、下劃線、25px的效果1 css標(biāo)題2 紫色、粗體、下劃線、25px的效果2使用使用csscss控制頁面控制頁面Css文件：h2color:#0000ff;pcolor:#ff00ff;text-decoration:underline;font-weight:bold;font-size:20px;使用使用csscss控制頁面控制頁面l 導(dǎo)入樣式 import url(1.2.css);使用使用CSSCSS控制頁面控制頁面l 從高到低：行內(nèi)樣式、鏈接式、內(nèi)嵌式、導(dǎo)入式 各種優(yōu)先級問題各種優(yōu)先級問題l Css選擇器l 選擇器聲明l

5、 css的繼承第3章Css的基本語法標(biāo)記選擇器：標(biāo)記選擇器： h1 color: red; font-size: 25px; 選擇器 屬性 值 屬性 值 CSSCSS選擇器選擇器CSSCSS選擇器選擇器類別選擇器：類別選擇器： .class color: red; font-size: 25px; 類別選擇器 屬性 值 屬性 值 CSSCSS選擇器選擇器ID 選擇器：選擇器： # id color: red; font-size: 25px; ID 選擇器 屬性 值 屬性 值 l 子類選擇器np.onecolor:redn實例： .one color:red; p.two color:gree

6、n; .one可以用于各種標(biāo)簽；而.two只能用于p標(biāo)簽。l 后代選擇器ndiv pcolor:#00FF00n例子：nn我是一個兵。n高級選擇器高級選擇器l p,h1,.onecolor:redl 偽類選擇器l a:link;hover;visited;active 或者：a.one:link;a#two:link 高級選擇器高級選擇器l 集體聲明l 嵌套選擇器選擇器聲明選擇器聲明l 所有的 CSS 語句都是基于各個標(biāo)簽之間的繼承關(guān)系的，為了更好的理解繼承關(guān)系，首先從 html 文件的組織結(jié)構(gòu) 入手CSSCSS的繼承的繼承l(wèi) Css文字樣式l css段落文字l 圖片樣式l 圖片的對齊l 圖片

7、的混排第4章用Css設(shè)置豐富的文字和圖片效果l 字體：p font-family: 黑體,Arial,Times New Roman,Helvetica, sans-serifl 文字大?。篺ont-sizel 文字顏色：colorl 文字粗細(xì)：HTML: ; CSS: font-weight l 斜體：font-style: italic；l 下劃線、頂劃線、刪除線：text-decoration:line-throughl 英文字母大小寫：text-transform:capitalizeCssCss文字樣式文字樣式l 水平對齊：text-align: left; right; cente

8、r; justify;l 垂直對齊：vertical-align: top; bottom; middle; (注：對塊級元素等不起作用)l 行間距：line-height: 8pt;(絕對數(shù)值) 1.5em; (相對數(shù)值）l 字間距：letter-spacing:2pt; 1.5em;csscss段落文字段落文字l 圖片邊框nHTML: n例4.1nimgnborder-style:dotted;dashed;solid;double;groove;ridge;nborder-color:#ff9900;nborder-width:5px;圖片樣式圖片樣式l 圖片縮放l 圖片的對齊n橫向?qū)R

9、：n不能直接設(shè)置圖片的text-align，而是通過設(shè)置其父元素的該屬性實現(xiàn)。n豎直對齊：nVertical-align屬性l 圖文混排圖片樣式圖片樣式l 5.1 5.1 用背景色給頁面用背景色給頁面分塊分塊l 5.2 5.2 背景圖片重復(fù)背景圖片重復(fù) background-repeatl 5.3 5.3 背景圖片位置背景圖片位置 background-position: 30px (em %)l 5.4 5.4 固定背景圖片固定背景圖片 background-attachment:fixedl 注：writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是

10、上-下、右-左。第5章用Css設(shè)置網(wǎng)頁中的背景l(fā) 控制表格l 隔行變色l 日歷l CSS與表單l 文字一樣的按鈕第6章用Css設(shè)置表格與表單的樣式l 豐富的超鏈接特效l 鼠標(biāo)特效第7章用Css設(shè)置頁面和瀏覽器的元素l 項目列表l 無需表格的菜單第8章用Css制作實用的菜單l 標(biāo)記與標(biāo)記l 盒子模型l 元素定位第9章理解css定位與div布局l 塊級元素，其包圍元素自動換行。中間可包含l 行內(nèi)元素，他的前后不會換行。中間不能包含標(biāo)記與標(biāo)記與標(biāo)記標(biāo)記l 所有頁面中的元素都可以看成是一個盒子，占據(jù)著一定的頁面空間l 可以通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的位置l 一個盒子模型由content

11、(內(nèi)容)、padding(間隙)、 border(邊框)、 margin(間隔)這四個部分組成l 一 個 盒 子 的 實 際 寬 度 （ 高 度 ） 是 由content+padding+border+margin組成的l 在CSS中可以通過設(shè)定width和height的值來控制content的大小l 技術(shù)背景：在瀏覽器中，width和height的值都是width+padding或者h(yuǎn)eight+padding的值，因此在實際做網(wǎng)頁時需要特別注意。另外在頁面具體排版時，如果塊中包含子塊，情況會比較復(fù)雜。盒子模型盒子模型l 一般用于分離元素，border的外圍即為元素的最外圍，因此計算元素的實

12、際的寬和高時，將border納入l border屬性：color、width、stylel width即border的粗細(xì)程度，可以設(shè)定為thin、medium、thick和具體值。默認(rèn)值為medium，一般的瀏覽器都將其解析為2px寬l style屬性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等l 注：對于groove、inset、outset和ridge這幾種值，IE支持不理想，不推薦使用borderborderl 如果希望在某段文字結(jié)束后加上虛線用于分割，而不是用border將這段話框起來，可以通過單

13、獨設(shè)置border-bottom來完成l 注意：在特定情況下給元素設(shè)置background-color背景色時，IE作用的區(qū)域為content+padding，而firefox則是content+padding+borderborderborder.cellborder:10px dashed #000000;text-align:center;background-color:#e799f8;l padding用于控制content與border之間的距離l 技術(shù)背景：在瀏覽器中如果使用width或是height屬性指定了父塊的寬或高，由于width或height值中包含padding，co

14、ntent會受到padding的擠壓。在網(wǎng)頁設(shè)計中，也可以利用這一點實現(xiàn)許多效果。在CSS排版中需要同時設(shè)置4個方向的padding值時，可以將4個語句合成到一起PaddingPadding.outsidepadding:10px 30px 50px 100px /*同時設(shè)置，順時針同時設(shè)置，順時針*/l margin：指元素與元素之間的距離l 兩個塊并排(行內(nèi)元素)MarginMarginspan1span2margin-rightmargin-leftmargin-right+margin-leftl 兩個塊并排（塊級元素）MarginMargindiv1div2div1的margin-b

15、ottomdiv2的margin-top兩者中較大者margin-bottoml 父子關(guān)系：當(dāng)一個塊包含在另一個塊中間時，將形成典型的父子關(guān)系。其中子塊的margin將以父塊的content為參考MarginMargin父div 子div margin子div父div contentl 當(dāng)將margin設(shè)置為負(fù)數(shù)時，會使得被設(shè)為負(fù)數(shù)的塊向相反的方向移動，甚至覆蓋在另外的塊上l 行內(nèi)元素MarginMarginspan.leftmargin-right:30px;background-color:#a9d6ff;span.rightmargin-left:-53px;/* 設(shè)置為負(fù)數(shù)設(shè)置為負(fù)數(shù)

16、*/background-color:#eeb0b0;l 用CSS方法對頁面中塊元素進(jìn)行定位float 、position、z-indexl float：left、right、none（默認(rèn)值）。當(dāng)設(shè)置了元素向左或者向右浮動時，元素會向其父元素的左側(cè)或右側(cè)靠緊。l 塊son1浮動到最左端的位置是父塊的padding-left加上自己的margin-left，而不是父塊的邊界border元素的定位元素的定位.son1padding:10px;/* 子塊子塊son1的的padding */margin:5px;/* 子塊子塊son1的的margin */background-color:#70ba

17、ff;border:1px dashed #111111;float:left;/* 塊塊son1左浮動左浮動 *l 將son1的margin設(shè)置為負(fù)數(shù)，子塊能浮動到的最左端依然是父塊的padding-left加上這個負(fù)數(shù)元素的定位元素的定位.son1padding:10px;/* 子塊子塊son1的的padding */margin:5px 0px 0px -35px;/* 負(fù)數(shù)負(fù)數(shù)margin */background-color:#70baff;border:1px dashed #111111;float:left;/* 塊塊son1左浮動左浮動 *父塊的padding 子塊的marg

18、in子塊float:leftl 經(jīng)驗之談：除了margin-left和margin-right，margin-top與margin-bottom也都可以設(shè)置為負(fù)數(shù)。類似將margin設(shè)置為負(fù)數(shù)的方法在實際排版中十分常見，也可以很好的利用，制作出各式各樣的頁面版式元素的定位元素的定位l position：指定塊的位置，即塊相對于父塊的位置和相對于它自身應(yīng)該在的位置l position:static(默認(rèn))、absolute、relative和fixedl static:表示塊保持在原本應(yīng)該在的位置，即該值沒有任何移動效果l absolute:表示絕對位置，設(shè)置為absolute時，子塊已經(jīng)不再從

19、屬于父塊，其左邊框相對于頁面左邊的距離為20px，這個距離已經(jīng)不是相對父塊的左邊框的距離了l 技術(shù)背景：top、right、bottom和left這4個CSS屬性，它們都是配合pasition屬性使用的，表示的是塊的各個邊界離頁面邊框（當(dāng)position設(shè)置為absolute）的距離，或各個邊界離原來位置（當(dāng)position設(shè)為relative）的距離PositionPositionPositionPosition#blockbackground-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute; /*

20、 absolute絕對定位絕對定位 */left:20px; /* 塊的左邊框離頁面左邊界塊的左邊框離頁面左邊界20px */top:40px; /* 塊的上邊框離頁面上邊界塊的上邊框離頁面上邊界40px */l top、right、bottom和left這4個屬性不但可以設(shè)置為絕對像素，還可以設(shè)置為百分?jǐn)?shù)l 經(jīng)驗之談：鑒于瀏覽器之間的差異，建議在設(shè)計時只設(shè)置left和right這兩個屬性中的一個，以及top和bottom這兩個屬性中的一個PositionPositionl 一個父塊包含兩個子塊的情況，首先將其中一個子塊的position屬性設(shè)置為absolute，此時塊1不再屬于父塊#fat

21、her，子塊2稱為父塊中的第1個子塊PositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;/* absolute絕對定位絕對定位 */left:30px;top:35px;l 如果將兩個子塊的position同時設(shè)置為absolute，這時兩個子塊都不再從屬于父塊，都相對于頁面定位l 技術(shù)背景：之所以塊2位于塊1上方，是因為CSS默認(rèn)后加入到頁面中的元素會覆蓋之前的元素，在頁面中一層層往上寫PositionPositionPositionP

22、osition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;/* absolute絕對定位絕對定位 */left:30px;top:35px;#block2background-color:#ffbd76;border:1px dashed #000000;padding:10px;position:absolute;/* absolute絕對定位絕對定位 */left:50px;top:60px;l position設(shè)置為relative時，子塊是相對于其父塊來

23、進(jìn)行定位的，同樣配合top、right、bottom和left這4個屬性l 如果希望子塊的寬度僅僅為其內(nèi)容加上自己的padding值，可以將它的float屬性設(shè)置為left，或者指定其寬度widthPositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相對定位相對定位 */left:15px;/* 子塊的左邊框距離它原來的位置子塊的左邊框距離它原來的位置15px */top:10%;l 將其中一個塊的position設(shè)

24、置為relativePositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相對定位相對定位 */left:15px;/* 子塊的左邊框距離它原來的位置子塊的左邊框距離它原來的位置15px */top:10%;l 同時設(shè)置兩個子塊的position屬性為relativePositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;pad

25、ding:10px;position:relative;/* relative相對定位相對定位 */left:15px;/* 子塊子塊1的左邊框距離它原來的位置的左邊框距離它原來的位置15px */top:30px;/* 子塊子塊1的左邊框距離它原來的位置的左邊框距離它原來的位置30px */#block2background-color:#ffc24c;border:1px dashed #000000;padding:10px;position:relative;/* relative相對定位相對定位 */left:10px;/* 子塊子塊2的左邊框距離它原來的位置的左邊框距離它原來的位置

26、10px */top:20px;/* 子塊子塊2的上邊框距離它原來的位置的上邊框距離它原來的位置15px */l z-index屬性用于調(diào)整定位時重疊塊的上下位置，垂直于頁面方向為z軸，z-index值大的頁面位于其值小的上方l 當(dāng)塊被設(shè)置了position屬性時，該值便可設(shè)置各塊之間的重疊高低關(guān)系。默認(rèn)z-index值為0，當(dāng)兩個塊的z-index值一樣時，將保持原有的高低覆蓋關(guān)系Z Z-index-index空間位置空間位置#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:abso

27、lute;left:20px;top:30px;z-index:1;/* 高低值高低值1 */#block2background-color:#ffc24c;border:1px dashed #000000;padding:10px;position:absolute;left:40px;top:50px;z-index:0;/* 高低值高低值0 */#block3background-color:#c7ff9d;border:1px dashed #000000;padding:10px;position:absolute;left:60px;top:70px;z-index:-1;/* 高低值高低值-1 */l 了解什么