動(dòng)態(tài)網(wǎng)頁(yè)制作與編程3CSSDIV

1、動(dòng)態(tài)網(wǎng)頁(yè)制作與編程3CSSDIV本次課程主要內(nèi)容一、CSS簡(jiǎn)介二、CSS分類三、CSS根本語(yǔ)法四、CSS的文字效果五、CSS的段落文字六、CSS中的圖片效果七、CCS控制背景顏色八、表格和表單九、CSS的超鏈接十、CSS制作實(shí)用菜單2一、CSS簡(jiǎn)介CSS的概念：CSSCascading Style Sheet層疊樣式表，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容別離的一種標(biāo)記性語(yǔ)言。Html的缺陷：繁瑣。引入CSS:3一、CSS簡(jiǎn)介樣式解決了一個(gè)普遍的問(wèn)題HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過(guò)使用 、 這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題、“這是段落、“這是表格之類的信息。

2、同時(shí)文檔布局由瀏覽器來(lái)完成，而不使用任何的格式化標(biāo)簽。由于瀏覽器不斷地將新的 HTML 標(biāo)簽和屬性比方字體標(biāo)簽和顏色屬性添加到 HTML 標(biāo)準(zhǔn)中，創(chuàng)立文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來(lái)越困難。為了解決這個(gè)問(wèn)題，萬(wàn)維網(wǎng)聯(lián)盟W3C，這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式Style。4一、CSS簡(jiǎn)介多重樣式將層疊為一個(gè)樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。5二、CSS分類行內(nèi)樣式內(nèi)部

3、樣式鏈接式便于維護(hù)導(dǎo)入式便于維護(hù)6二、CSS分類鏈接式和導(dǎo)入式的區(qū)別鏈接式：會(huì)在裝載頁(yè)面主體局部之前裝載css文件，這樣顯示出來(lái)的網(wǎng)頁(yè)從一開(kāi)場(chǎng)就是帶有樣式效果的;導(dǎo)入式：會(huì)在整個(gè)頁(yè)面裝載完成后再裝載CSS文件，對(duì)于有的瀏覽器來(lái)說(shuō)，在一些情況下，如果網(wǎng)頁(yè)文件的體積比較大，那么會(huì)出現(xiàn)先顯示無(wú)樣式的頁(yè)面，閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果，從瀏覽者的感受來(lái)說(shuō)，這是導(dǎo)入式的一個(gè)缺陷。對(duì)于一些比較大的網(wǎng)站，為了便于維護(hù)，可能會(huì)希望把所有的css樣式分類別放到幾個(gè)CSS文件中，這樣如果使用連接式引入，就需要幾個(gè)語(yǔ)句分別導(dǎo)入CSS文件。如果要調(diào)整CSS文件的分類，就需要同時(shí)調(diào)整HTML文件，這對(duì)于維護(hù)工作來(lái)

4、說(shuō)，是一個(gè)缺陷，如果使用導(dǎo)入式，那么可以只引進(jìn)一個(gè)總的CSS文件，在這個(gè)文件中再導(dǎo)入其他獨(dú)立CSS文件；而連接那么不具備這個(gè)特性。因此給大家的建議是：如果僅需要引入一個(gè)CSS文件，那么使用連接方式；如果需要引入多個(gè)CSS文件，那么首先用連接方式引入一個(gè)“目錄CSS文件，這個(gè)“目錄CSS文件中再使用導(dǎo)入式引入其他CSS文件。如果希望用javascript來(lái)動(dòng)態(tài)決定引入哪個(gè)css文件，那么必須使用連接式才能實(shí)現(xiàn) 7二、CSS分類層疊次序當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)那么層疊于一個(gè)新的虛擬樣式表中，其中4擁有最高的優(yōu)先權(quán)。1 瀏覽器

5、缺省設(shè)置 2 外部樣式表 3 內(nèi)部樣式表位于 標(biāo)簽內(nèi)部 4 內(nèi)聯(lián)樣式在 HTML 元素內(nèi)部 因此，內(nèi)聯(lián)樣式在 HTML 元素內(nèi)部擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明： 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明缺省值。8三、CSS根本語(yǔ)法CSS的選擇器選擇器的聲明選擇器的繼承9三、CSS根本語(yǔ)法CSS的選擇器標(biāo)記選擇器類別選擇器ID選擇器CSS注釋以 “/* 開(kāi)頭，以 “*/ 結(jié)尾10標(biāo)記選擇器-一定是html的標(biāo)準(zhǔn)標(biāo)記h2font: 宋體;color: #0000FF;font-size: 24px聲明標(biāo)記選擇器屬性值11類別選擇器用戶自定義.one co

6、lor:#FFFF00; font-size:20px; background:#666666;類別選擇器類別選擇器的.前面如果不加標(biāo)記選擇器，那么通用。增加標(biāo)記選擇器那么該類只能在此種標(biāo)記中使用。12ID選擇器用戶自定義#ID color:#FFFF00; font-size:20px; background:#666666;ID選擇器13類別選擇器和ID選擇器ID標(biāo)記不允許同時(shí)出現(xiàn)在兩段代碼中，類別標(biāo)記可以被多個(gè)html控件套用因?yàn)镮D標(biāo)記允許使用在javascript中，如果允許同時(shí)使用，那么將導(dǎo)致javascript的語(yǔ)法混亂。如果不是實(shí)用javascript，不建議使用ID選擇器14

7、三、CSS根本語(yǔ)法選擇器的集體聲明在使用選擇器的時(shí)候，有些標(biāo)簽樣式是一樣的，或者某些標(biāo)簽都有共同的樣式屬性，可以將這些標(biāo)簽集體聲明，不同的標(biāo)簽用“,分開(kāi)，比方： h1,h2,h3,h4,h5,h6color:#900;把共同的局部提取出來(lái)，這么做的好處，一樣的局部共同定義，不同的局部單獨(dú)定義，保證風(fēng)格統(tǒng)一，樣式修改靈活。15三、CSS根本語(yǔ)法選擇器的嵌套#p acolor:#900;意思是在ID為div1內(nèi)的p標(biāo)簽內(nèi)的鏈接a標(biāo)簽的文字顏色為紅色這樣的好處就是不需要在單獨(dú)的為p標(biāo)簽內(nèi)的a標(biāo)簽單獨(dú)定義16三、CSS根本語(yǔ)法CSS的繼承半含在內(nèi)部的標(biāo)簽具有其外部標(biāo)簽的特征，需要指定為其它樣式的局部設(shè)

8、定在個(gè)別元素中即可。17四、CSS的文字效果文字樣式段落文字實(shí)例18四、CSS的文字效果字體font-family屬性可以在樣式表中同時(shí)使用多種字體，如果瀏覽器均不支持，那么以默認(rèn)字體顯示。文字大小font-size屬性可以使用類別選擇器進(jìn)展詳細(xì)的控制。19四、CSS的文字效果文字顏色color顏色表示方法 color:#000000;color:rgb(50%,10%,10%);color:red;文字粗細(xì)font-weight斜體font-stylenormal默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。italic 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。oblique瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式。

9、inherit規(guī)定應(yīng)該從父元素繼承字體樣式。20四、CSS的文字效果下劃線、頂劃線、刪除線text-decorationnone默認(rèn)。定義標(biāo)準(zhǔn)的文本。underline定義文本下的一條線。overline定義文本上的一條線。line-through定義穿過(guò)文本下的一條線。blink定義閃爍的文本。inherit規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。21四、CSS的文字效果控制英文的大小寫(xiě)22四、CSS的文字效果23五、CSS的段落文字段落水平對(duì)齊段落垂直對(duì)齊行間距、字間距首字放大24五、CSS的段落文字偽元素：CSS 偽元素用于將特殊的效果添加到某些選擇器。偽元素的語(yǔ)

10、法：選擇器 : 偽元素 屬性: 值 選擇器 . 類: 偽元素 屬性: 值 25六、CSS中的圖片效果圖片樣式圖片對(duì)齊圖文混排一個(gè)實(shí)例26六、CSS中的圖片效果boder相對(duì)大小絕對(duì)大小水平對(duì)齊垂直對(duì)齊27六、CSS中的圖片效果垂直對(duì)齊屬性分析vertical-align baseline默認(rèn)。元素放置在父元素的基線上。sub垂直對(duì)齊文本的下標(biāo)。super垂直對(duì)齊文本的上標(biāo)top把元素的頂端與行中最高元素的頂端對(duì)齊text-top把元素的頂端與父元素字體的頂端對(duì)齊middle把此元素放置在父元素的中部。bottom 把元素的頂端與行中最低的元素的頂端對(duì)齊。text-bottom 把元素的底端與父

11、元素字體的底端對(duì)齊。inherit規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。28六、CSS中的圖片效果圖文混排文字環(huán)繞float:left圖片與文字間距margin29六、CSS中的圖片效果周潤(rùn)發(fā)30七、CCS控制背景顏色background-color31七、CCS控制背景顏色圖片background 重復(fù)repeat、repeat-x、repeat-y不重復(fù) no-repeat 位置position 固定背景圖片 attachment 背景圖片拉伸 使用濾鏡32八、表格和表單表格的相關(guān)標(biāo)記：表格顏色boder中的子屬性表格邊框boder隔行變色控制奇偶行，改變?cè)撔斜筹L(fēng)光

12、33八、表格和表單樣式表單表單是一個(gè)包含表單元素的區(qū)域。 表單元素允許用戶在表單中比方：文本域、下拉列表、單項(xiàng)選擇框、復(fù)選框等等輸入信息的元素。 表單使用表單標(biāo)簽定義。 34八、表格和表單樣式定義一個(gè)標(biāo)簽定義文本域 (一個(gè)多行的輸入控件)定義一個(gè)選擇列表定義下拉列表中的選項(xiàng)，與配合定義選項(xiàng)組定義一個(gè)按鈕定義輸入域中的type屬性定義輸入域性質(zhì)Ridio、file、submit、password、checkbox35八、表格和表單樣式36九、CSS的超鏈接37九、CSS定位與div布局回憶和用于組織和構(gòu)造化文檔，經(jīng)常與class或者id一起使用，其本身并不對(duì)文檔本身添加任何內(nèi)容，只是為文檔添加效果。是文本級(jí)元素。是一個(gè)定義區(qū)域塊的元素。38九、CSS定位與div布局盒子模型39九、CSS定位與div布局邊框：border margin作為外空白，描述了邊框和邊框外其他元素之間的距離。 padding為內(nèi)空白，是內(nèi)容例如文字、圖片等與邊框之間的距離。 建議所有尺寸都以象素(px)為單位，包括文字。 背風(fēng)光和背景圖片和邊框之間是無(wú)法設(shè)置空白的。 背景圖片在背風(fēng)光之上，也就是說(shuō)背景圖片可以覆蓋背風(fēng)光。 40九、CSS定位與div布局41九、CSS定位與div布局定位：position定位：絕對(duì)定位AP元素用p