HTML+CSS結(jié)合-基礎(chǔ)講解PPT課件

1、1HTML+CSS基礎(chǔ)講解2大綱大綱此次內(nèi)容此次內(nèi)容XHTML部分部分了解常用的了解常用的XHTML標(biāo)簽標(biāo)簽頁面中標(biāo)簽的使用場(chǎng)景，如何優(yōu)化結(jié)構(gòu)頁面中標(biāo)簽的使用場(chǎng)景，如何優(yōu)化結(jié)構(gòu)CSS部分部分基礎(chǔ)語法基礎(chǔ)語法類、偽類的使用類、偽類的使用1.重載、繼承重載、繼承3XHTML部分部分4 XHTML規(guī)范XHTML有三種規(guī)范1、XHTML 1.0 TransitionalXHTML 1.0 Transitional包含HTML4.01的所有標(biāo)記以及屬性，是一種不是那么嚴(yán)格的XHTML，目的是使現(xiàn)有的HTML開發(fā)者更容易的接受并使用XHTML。2、XHTML 1.0 StrictXHTML 1.0 Str

2、ict就是嚴(yán)格版本的XHTML了，開發(fā)者必須要嚴(yán)格遵守文檔的結(jié)構(gòu)與表現(xiàn)分開的規(guī)則，也就是說需要用CSS控制頁面的顯示而不是使用，bgcolor之類的標(biāo)記或?qū)傩浴?、XHTML 1.0 FramesetXHTML 1.0 Frameset用于把文檔分割成幾個(gè)楨以顯示不同的內(nèi)容。（XHTML 1.0 Transitional和Strict 頁面不允許包含 標(biāo)記）。5XHTML寫法一個(gè)合法的XHTML頁面必須再起其他內(nèi)容出現(xiàn)前包含XHTML DOCTYPE定義。XHTML 1.0 TransitionalXHTML 1.0 StrictXHTML 1.0 Frameset 6XHTML寫法1、標(biāo)記必

3、須指定一個(gè)默認(rèn)的命名空間。例如一個(gè)標(biāo)記必須指定一個(gè)默認(rèn)的命名空間。例如一個(gè)XHTML 1.0 Transitional頁面應(yīng)該有如下聲明：頁面應(yīng)該有如下聲明： 2、所有的標(biāo)記以及屬性名稱必須為小寫字母、所有的標(biāo)記以及屬性名稱必須為小寫字母3、屬性值必須書寫于一對(duì)引號(hào)內(nèi)、屬性值必須書寫于一對(duì)引號(hào)內(nèi)4、所有非空的標(biāo)記必須成對(duì)出現(xiàn)、所有非空的標(biāo)記必須成對(duì)出現(xiàn)7XHTML寫法8、屬性值中空格的處理：首尾空格被忽略，中間的多個(gè)空格被當(dāng)成一個(gè)處理、屬性值中空格的處理：首尾空格被忽略，中間的多個(gè)空格被當(dāng)成一個(gè)處理9、和和標(biāo)記的內(nèi)容必須被包圍在標(biāo)記的內(nèi)容必須被包圍在CDATA段中段中6、屬性不可以簡寫、屬性不

4、可以簡寫7、使用、使用id屬性，而不是屬性，而不是name屬性屬性5、標(biāo)記不可以重疊、標(biāo)記不可以重疊8XHTML結(jié)構(gòu)標(biāo)題link9XHTML結(jié)構(gòu)10常用HTML標(biāo)簽集標(biāo)頭標(biāo)簽標(biāo)頭標(biāo)簽h1,h2,h3,h4,h5塊狀標(biāo)簽：塊狀標(biāo)簽：div, span, label,table, form, fieldset, ol, ul內(nèi)容標(biāo)簽：內(nèi)容標(biāo)簽：p, i, em, br, strong11HTML頁面中標(biāo)簽的使用標(biāo)頭標(biāo)簽標(biāo)頭標(biāo)簽h1,h2,h3,h4,h5示例：示例：主標(biāo)題主標(biāo)題h1副主標(biāo)題副主標(biāo)題h2副標(biāo)題副標(biāo)題h3副標(biāo)題副標(biāo)題h4P標(biāo)簽標(biāo)簽12HTML頁面中標(biāo)簽的使用塊狀標(biāo)簽：塊狀標(biāo)簽：div,

5、 span, label,table, form, fieldset, ol, ul示例：示例：div塊塊外層的外層的DIV嵌套一個(gè)嵌套一個(gè)divDiv中的段落中的段落13HTML頁面中標(biāo)簽的使用內(nèi)容標(biāo)簽：內(nèi)容標(biāo)簽：p, i, em, br, strong示例：示例：這是一段普通的文本，用來測(cè)這是一段普通的文本，用來測(cè)試各種不同樣式。試各種不同樣式。以下是文字的樣式以下是文字的樣式這一條是用來測(cè)試斜體這一條是用來測(cè)試斜體這個(gè)用來測(cè)試粗體這個(gè)用來測(cè)試粗體em標(biāo)簽標(biāo)簽141、頁面就是文檔2、結(jié)構(gòu)要清晰3、結(jié)構(gòu)要完整頁面中標(biāo)簽的使用15文檔結(jié)構(gòu)圖16理想的XHTML文檔結(jié)構(gòu)應(yīng)當(dāng)包含：1、有且唯一含有

6、H12、若干個(gè)H2、H3、H43、內(nèi)容使用P等標(biāo)簽來形成段落4、使用DIV劃分內(nèi)容區(qū)域塊5、結(jié)構(gòu)完整文檔結(jié)構(gòu)文檔17CSS部分18CSS 指層疊樣式表 (Cascading Style Sheets)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。為什么要引入CSS技術(shù)？CSS介紹把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在 CSS 文件中多個(gè)樣式定義可層疊為一19CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。selector declaration1; declara

7、tion2; . declarationN 選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個(gè)屬性和一個(gè)值組成。屬性（property）是您希望設(shè)置的樣式屬性，每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。selector property: value提示：提示：請(qǐng)使用花括號(hào)來包圍聲明。CSS語法20CSS語法提示&建議：如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。多重聲明和空格的使用使得樣式表更容易被編輯記得寫引號(hào)1. 為了節(jié)省字節(jié)，使用縮寫的形式。注意：注意：CSS與XHTML不同，它對(duì)大小寫不敏感；但是，如果涉及到與 HTML 文檔一起工作的話，class和id名稱對(duì)大小寫是

8、敏感的。21派生選擇器為什么要使用派生選擇器為什么要使用派生選擇器?通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標(biāo)記更加簡潔。派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。22派生選擇器23類、偽類在 CSS 中，類選擇器以一個(gè)點(diǎn)號(hào)顯示：.center text-align: center注意：注意：類名的第一個(gè)字符不能使用數(shù)字！它無法在Mozilla或Firefox中起作用。24類、偽類類也可被用作派生選擇器類也可被用作派生選擇器 .center p text-align: center*不管是類，還是類的

9、派生選擇器，在HTML頁面中可以被重復(fù)指定，并生效。25類、偽類CSS 偽類用于向某些選擇器添加特殊的效果。偽類用于向某些選擇器添加特殊的效果。a:link color: #FF0000 /* 未訪問的鏈接 */a:visited color: #00FF00 /* 已訪問的鏈接 */a:hover color: #FF00FF /* 鼠標(biāo)移動(dòng)到鏈接上 */a:active color: #0000FF /* 選定的鏈接 */提示：提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定義中，a:active 必須被置于 a:

10、hover 之后，才是有效的。1. 偽類名稱對(duì)大小寫不敏感。語法語法selector : pseudo-class property: value26ID選擇器ID選擇器是以“#”作為開頭的一種“類”。 #center text-align:center; 用法基本原理同類、類派生選擇器，但與類不同的是，ID在頁面中是唯一的，不可重復(fù)指定。27繼承、重寫根據(jù) CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。通過 CSS 繼承，子元素將繼承最高級(jí)元素所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。28繼承、重寫CSS可以把之前定義

11、的樣式，以重寫的形式將舊樣式強(qiáng)制轉(zhuǎn)換成新的樣式。提示：提示：重寫只對(duì)相同的屬性有效，不同的屬性依舊使用的是繼承的方式顯示。29框模型概述內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。30框模型概述在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素。提示：提示：外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。31總結(jié)XHTML的注意點(diǎn)：的注意點(diǎn)：所有的 XHTML 元素都必須被正確地嵌套，X