HTML與CSS簡(jiǎn)介.ppt

2020年5月23日,1,|海有|壁無(wú)|一切為了學(xué)生。|納容|立欲|為了學(xué)生一切。|百乃|千則|豈能事事如意，但求無(wú)愧于心。|川大|仞剛|把微笑留給世界，讓世界因你微笑！,2020年5月23日,2,溫故而知新！,2020年5月23日,3,第2章JSP常用開發(fā)環(huán)境介紹,IT知識(shí)講解JDKNetbeansEclipseMyEclipse服務(wù)器,2020年5月23日,4,第3章HTML與CSS簡(jiǎn)介,3.1HTML頁(yè)面的基本構(gòu)成3.2HTML常用標(biāo)簽3.3CSS基礎(chǔ)知識(shí)3.4常見問(wèn)題及解決方案,2020年5月23日,5,3.1HTML頁(yè)面的基本構(gòu)成,HTML（HyperTextMarkupLanguage）即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言，是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言，它不是一種真正的編程語(yǔ)言，只是一種標(biāo)記符。通過(guò)一些約定的標(biāo)簽符號(hào)對(duì)文件的內(nèi)容進(jìn)行標(biāo)注，指出內(nèi)容的輸出格式，如字體大小及顏色、背景顏色、表格形式、各部分之間邏輯關(guān)系等。當(dāng)用戶瀏覽WWW信息時(shí)，瀏覽器會(huì)自動(dòng)解釋這些標(biāo)簽的含義，并按照一定的格式在屏幕上顯示這些被標(biāo)記的信息。“.html”或“.htm”擴(kuò)展名，是能獨(dú)立于各種操作系統(tǒng)平臺(tái)的可供瀏覽器解釋瀏覽的網(wǎng)頁(yè)文件。,2020年5月23日,6,2020年5月23日,7,【例3-1】第一個(gè)HTML頁(yè)面實(shí)例（firstHTML.html）第一個(gè)HTML頁(yè)面歡迎光臨本網(wǎng)站這是我的第一個(gè)HTML頁(yè)面，歡迎你的訪問(wèn)!請(qǐng)欣賞唐詩(shī)客中行蘭陵美酒郁金香玉碗盛來(lái)琥珀光但使主人能醉客不知何處是他鄉(xiāng),2020年5月23日,8,2020年5月23日,9,代碼中出現(xiàn)的幾種標(biāo)簽,單標(biāo)簽?zāi)承?biāo)簽只需單獨(dú)使用就能完整地表達(dá)意思，控制網(wǎng)頁(yè)效果，這類標(biāo)簽的語(yǔ)法是：，它表示換行，？。雙標(biāo)簽標(biāo)簽成對(duì)使用，由一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽構(gòu)成。開始標(biāo)簽告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)簽所代表的功能，而結(jié)束標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能，結(jié)束標(biāo)簽的形式是在開始標(biāo)簽前加上一個(gè)斜杠。語(yǔ)法：內(nèi)容,2020年5月23日,10,標(biāo)簽屬性在單標(biāo)簽和雙標(biāo)簽的開始標(biāo)簽里，還可以包含一些屬性，以達(dá)到個(gè)性化的效果。其語(yǔ)法格式是：各屬性之間無(wú)先后次序，屬性也可省略（即取默認(rèn)值）。,2020年5月23日,11,注意,需要注意的是，HTML語(yǔ)言不區(qū)分大小寫。例如：和都表示換行。使用HTML標(biāo)簽時(shí)，被使用標(biāo)簽不可以交錯(cuò)，否則將造成錯(cuò)誤。例如：，應(yīng)改為：，才能正常運(yùn)行。Html標(biāo)簽需要正確的進(jìn)行嵌套！,2020年5月23日,12,HTML的基本標(biāo)簽,1.頁(yè)面結(jié)構(gòu)標(biāo)簽HTML文檔分為文檔頭和文檔體兩部分。在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示在網(wǎng)頁(yè)中的各種正文信息。通常由3對(duì)標(biāo)簽來(lái)構(gòu)成一個(gè)HTML文檔的框架。（1）這個(gè)標(biāo)簽對(duì)告訴瀏覽器這個(gè)文件是HTML文檔。標(biāo)志用于HTML文檔的最前邊，用來(lái)標(biāo)識(shí)HTML文檔的開始，放在HTML文檔的最后邊，用來(lái)標(biāo)識(shí)HTML文檔的結(jié)束。（2）這個(gè)標(biāo)簽對(duì)中的內(nèi)容是文檔的頭部信息，說(shuō)明一些文檔的基本情況，如文檔的標(biāo)題等，其內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)中。在此標(biāo)簽對(duì)之間可使用、等描述HTML文檔相關(guān)信息的標(biāo)簽對(duì)。（3）這個(gè)標(biāo)簽對(duì)中的內(nèi)容是HTML文檔的主體部分，可包含、等標(biāo)簽，它們所定義的文本、圖像等將會(huì)在網(wǎng)頁(yè)中顯示出來(lái)。,2020年5月23日,13,2.頁(yè)頭標(biāo)簽標(biāo)簽對(duì)用來(lái)設(shè)定網(wǎng)頁(yè)標(biāo)題，瀏覽器通常會(huì)將標(biāo)題顯示在瀏覽器窗口的標(biāo)題欄左邊。標(biāo)簽對(duì)只能放在標(biāo)簽對(duì)之間。,2020年5月23日,14,3.標(biāo)題標(biāo)簽在HTML文檔中，標(biāo)簽可以定義不同顯示效果的標(biāo)題，X表示標(biāo)題的級(jí)數(shù)，取值范圍為16，X越小，標(biāo)題字號(hào)越大?？梢允褂脤傩詀lign，用于設(shè)置標(biāo)題文字的對(duì)齊方式，其取值如下：left：左對(duì)齊。right：右對(duì)齊。center：居中對(duì)齊。未設(shè)置該屬性時(shí)，默認(rèn)值是？,2020年5月23日,15,【例3-2】標(biāo)題標(biāo)簽實(shí)例(title.html)標(biāo)題標(biāo)簽實(shí)例一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題,2020年5月23日,16,2020年5月23日,17,5.格式排版標(biāo)簽（1）該標(biāo)簽強(qiáng)制文本換行，但不會(huì)在行與行之間留下空行。如果把加在標(biāo)簽對(duì)的外邊，將創(chuàng)建一個(gè)大的回車換行，即前邊和后邊的文本的行與行之間的距離比較大；若放在的里邊則前邊和后邊的文本的行與行之間的距離將比較小。,2020年5月23日,18,（2）該標(biāo)簽在網(wǎng)頁(yè)中加入一條橫跨網(wǎng)頁(yè)的水平線，具有多種屬性用于設(shè)置水平線的寬度、長(zhǎng)度及顯示效果等。size屬性：設(shè)置水平線的粗細(xì)，默認(rèn)單位是像素。width屬性：設(shè)置水平線的寬度，默認(rèn)單位是像素，也可以使用對(duì)屏幕的百分比表示。noshade屬性：該屬性不用賦值，而是直接加入標(biāo)簽即可使用，它用來(lái)取消水平線的陰影（不加入此屬性水平線默認(rèn)有陰影）。align屬性：設(shè)置水平線的對(duì)齊方式。color屬性：設(shè)置水平線的顏色。例如：,2020年5月23日,19,5.文字格式標(biāo)簽標(biāo)簽對(duì)通過(guò)設(shè)置屬性來(lái)控制文字的字體、大小、樣式和顏色，各屬性功能如下：face屬性：設(shè)置字體樣式。size屬性：設(shè)置字體大小，值為整數(shù)，分為7個(gè)級(jí)別，默認(rèn)字體大小為3。color屬性：設(shè)置字體顏色。,2020年5月23日,20,6.段落標(biāo)簽標(biāo)簽用來(lái)創(chuàng)建一個(gè)新的段落，在此標(biāo)簽對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。標(biāo)簽可以有多種屬性，例如align屬性控制其內(nèi)容的對(duì)齊方式；clear屬性控制圖文混排方式，其取值如下：left：下一段顯示在左邊界處的空白區(qū)域。right：下一段顯示在右邊界處的空白區(qū)域。center：下一段的左右兩邊都不許有其它內(nèi)容。為了防止文檔出錯(cuò)，盡量不要省略結(jié)尾標(biāo)記。,2020年5月23日,21,7.預(yù)定格式標(biāo)簽在編輯文檔時(shí)，如果希望將來(lái)瀏覽網(wǎng)頁(yè)時(shí)仍能保留在編輯工具中已經(jīng)排好的形式顯示內(nèi)容，可以使用標(biāo)簽對(duì)。使用該標(biāo)簽對(duì)時(shí)，默認(rèn)字體為10磅。,2020年5月23日,22,預(yù)定格式標(biāo)簽使用床前明月光疑是地上霜舉頭望明月低頭思故鄉(xiāng)蘭陵美酒郁金香玉碗盛來(lái)琥珀光但使主人能醉客不知何處是他鄉(xiāng),2020年5月23日,23,2020年5月23日,24,8.注釋標(biāo)簽在編寫HTML文件時(shí)，為提高文件的可讀性，可以使用標(biāo)簽對(duì)編寫注釋文字，其語(yǔ)法如下：注釋內(nèi)容不會(huì)在瀏覽器中顯示，即不會(huì)在頁(yè)面中顯示。,2020年5月23日,25,第3章HTML與CSS簡(jiǎn)介,3.1HTML頁(yè)面的基本構(gòu)成3.2HTML常用標(biāo)簽3.3CSS基礎(chǔ)知識(shí)3.4常見問(wèn)題及解決方案,2020年5月23日,26,3.2HTML常用標(biāo)簽,3.2.1列表標(biāo)簽及其應(yīng)用實(shí)例3.2.2多媒體和超鏈接標(biāo)簽及其應(yīng)用實(shí)例3.2.3表格標(biāo)簽及其應(yīng)用實(shí)例3.2.4表單標(biāo)簽及其應(yīng)用實(shí)例3.2.5框架標(biāo)簽及其應(yīng)用實(shí)例,2020年5月23日,27,3.2.1列表標(biāo)簽及其應(yīng)用實(shí)例,列表是一種規(guī)定格式的文字排列方式，用于列舉內(nèi)容。常用的列表分為有序列表、無(wú)序列表和自定義列表。,2020年5月23日,28,1.有序列表有序列表是指各列表項(xiàng)按一定的編號(hào)順序顯示，列表用開始，以結(jié)束，每一個(gè)列表項(xiàng)用標(biāo)簽定義，其語(yǔ)法如下：列表項(xiàng)1列表項(xiàng)2在中可以使用type、start屬性？。type屬性用于設(shè)置編號(hào)的種類，其取值如下：l：編號(hào)為數(shù)字，默認(rèn)值。例如：1，2，3，A：編號(hào)為大寫英文字母。例如：A，B，C，a：編號(hào)為小寫英文字母。例如：a，b，c，I：編號(hào)為大寫羅馬字符。例如：，i：編號(hào)為小寫羅馬字符。例如：，,2020年5月23日,29,【例3-3】有序列表實(shí)例（olTag.html）有序列表實(shí)例Java方向核心專業(yè)課程：Java程序設(shè)計(jì)JSP程序設(shè)計(jì)JavaWeb框架技術(shù)（Struts、Spring、Hibernate）數(shù)據(jù)庫(kù)技術(shù),2020年5月23日,30,2020年5月23日,31,2.無(wú)序列表無(wú)序列表指各列表項(xiàng)之間沒(méi)有順序關(guān)系，列表項(xiàng)顯示時(shí)前面有一個(gè)項(xiàng)目符號(hào)。無(wú)序列表用開始，以結(jié)束，每一個(gè)列表項(xiàng)同樣也用標(biāo)簽定義，其語(yǔ)法如下：列表項(xiàng)1列表項(xiàng)2在、中都可以使用type屬性。type屬性取值如下：disc：實(shí)心圓點(diǎn)，默認(rèn)值。circle：空心圓點(diǎn)。square：實(shí)心正方形。,2020年5月23日,32,【例3-4】無(wú)序列表實(shí)例（ulTag.html）無(wú)序列表實(shí)例Java方向其它專業(yè)課程：計(jì)算機(jī)網(wǎng)絡(luò)數(shù)據(jù)結(jié)構(gòu)專業(yè)英語(yǔ),2020年5月23日,33,2020年5月23日,34,3.自定義列表除了上述兩種列表外，在實(shí)際應(yīng)用中還可以根據(jù)需要自定義列表，實(shí)現(xiàn)一種分兩層的項(xiàng)目清單，其語(yǔ)法如下：第一個(gè)列表項(xiàng)對(duì)第一個(gè)列表項(xiàng)的說(shuō)明第二個(gè)列表項(xiàng)對(duì)第二個(gè)列表項(xiàng)的說(shuō)明自定義列表用開始，以結(jié)束，給每一個(gè)列表項(xiàng)加上了一段說(shuō)明性文字，說(shuō)明性文字獨(dú)立于列表項(xiàng)另起一行顯示。其中，標(biāo)簽用來(lái)定義列表項(xiàng)；標(biāo)簽用來(lái)對(duì)列表項(xiàng)進(jìn)行說(shuō)明。,2020年5月23日,35,【例3-5】自定義列表實(shí)例（dlTag.html）自定義列表實(shí)例Java方向核心專業(yè)課程介紹：Java程序設(shè)計(jì)該課程主要講述.JSP程序設(shè)計(jì)該課程主要講述.JavaWeb框架技術(shù)（Struts、Spring、Hibernate）該課程主要講述.數(shù)據(jù)庫(kù)技術(shù)該課程主要講述.,2020年5月23日,36,2020年5月23日,37,3.2HTML常用標(biāo)簽,3.2.1列表標(biāo)簽及其應(yīng)用實(shí)例3.2.2多媒體和超鏈接標(biāo)簽及其應(yīng)用實(shí)例3.2.3表格標(biāo)簽及其應(yīng)用實(shí)例3.2.4表單標(biāo)簽及其應(yīng)用實(shí)例3.2.5框架標(biāo)簽及其應(yīng)用實(shí)例,2020年5月23日,38,1.插入圖像使用標(biāo)簽可以為網(wǎng)頁(yè)添加.gif、.jpg、.png等格式的圖像。語(yǔ)法格式：主要屬性如下：src：指定圖像的源文件路徑，可以使用相對(duì)路徑、絕對(duì)路徑或URL。width：指定圖像的寬度，單位為像素。height：指定圖像的高度，單位為像素。hspace：指定圖像水平方向的邊沿空白，以免文字或其他圖片過(guò)于貼近，單位為像素。vspace：指定圖像垂直方向的邊沿空白，單位為像素。border：指定圖像邊框厚度。align：當(dāng)文字與圖像并排放置時(shí)，指定圖像與文本行的對(duì)齊方式，其屬性值可取top（與文本行頂部對(duì)齊）、center（水平居中對(duì)齊）、middle（垂直居中對(duì)齊）、bottom（底部對(duì)齊，默認(rèn)值）、left（圖像左對(duì)齊）、right（圖像右對(duì)齊）。alt：這是用以描述該圖像的文字，圖像不能顯示時(shí)將顯示該屬性值；當(dāng)鼠標(biāo)移至圖像上時(shí)，將該屬性值作為提示信息顯示。,2020年5月23日,39,【例3-6】插入圖像實(shí)例（imgTag.html）插入圖像實(shí)例聽得見的微笑！,2020年5月23日,40,2020年5月23日,41,2.插入視頻語(yǔ)法格式：。標(biāo)簽常用屬性如下：dynsrc：指定視頻的源文件路徑。loop：指定視頻循環(huán)播放次數(shù)。值為-1或infinite時(shí)，表示無(wú)限次循環(huán)播放。loopdelay：指定兩次播放的時(shí)間間隔。start：指定何時(shí)開始播放視頻。其屬性值可取fileopen（默認(rèn)值，即在鏈接到含該標(biāo)簽的頁(yè)面時(shí)開始播放）、mouseove（把鼠標(biāo)移到播放區(qū)域之上時(shí)才開始播放）controls：指定在視頻窗口下附加播放控制條。該屬性直接添加，不用賦值。,2020年5月23日,42,【例3-7】插入視頻實(shí)例（imgTag1.html）插入視頻實(shí)例笨笨熊的故事！,2020年5月23日,43,2020年5月23日,44,3.插入背景音樂(lè)使用標(biāo)簽可以在網(wǎng)頁(yè)中添加.wav、.mid、.mp3等格式的背景音樂(lè)。語(yǔ)法格式：主要屬性如下：balance：指定音樂(lè)的左右均衡。delay：指定播放延時(shí)。loop：指定音樂(lè)循環(huán)播放次數(shù)。值為-1或infinite時(shí)，表示無(wú)限次循環(huán)播放。src：指定音樂(lè)源文件的路徑。volume：指定音量。,2020年5月23日,45,【例3-8】插入背景音樂(lè)實(shí)例（soundTag.html）插入背景音樂(lè)實(shí)例傳奇,2020年5月23日,46,2020年5月23日,47,4.插入超鏈接創(chuàng)建超鏈接是在當(dāng)前頁(yè)面與其它頁(yè)面間建立鏈接，使用戶可以從一個(gè)頁(yè)面直接跳轉(zhuǎn)到其它的頁(yè)面、圖像或服務(wù)器?；靖袷綖椋撼溄游谋炯皥D像其中，標(biāo)簽對(duì)用來(lái)創(chuàng)建超鏈接，的主要屬性有：href：指定鏈接地址。若是鏈接到網(wǎng)站外部，必須為URL地址；若是鏈接到網(wǎng)站內(nèi)部頁(yè)面，只需指明該頁(yè)面的絕對(duì)路徑或相對(duì)路徑。target：指定顯示鏈接目標(biāo)的窗口，其值可取_blank（瀏覽器總在一個(gè)新打開、未命名的窗口中載入目標(biāo)文檔）、_parent（目標(biāo)文檔載入當(dāng)前窗口的父窗口中）、_self（默認(rèn)值，目標(biāo)文檔載入并顯示在當(dāng)前窗口中）、_top（清除當(dāng)前窗口所有被包含的框架并將目標(biāo)文檔載入整個(gè)瀏覽器窗口。）,2020年5月23日,48,例如：學(xué)校網(wǎng)站清華大學(xué)出版社,2020年5月23日,49,2020年5月23日,50,3.2HTML常用標(biāo)簽,3.2.1列表標(biāo)簽及其應(yīng)用實(shí)例3.2.2多媒體和超鏈接標(biāo)簽及其應(yīng)用實(shí)例3.2.3表格標(biāo)簽及其應(yīng)用實(shí)例3.2.4表單標(biāo)簽及其應(yīng)用實(shí)例3.2.5框架標(biāo)簽及其應(yīng)用實(shí)例,2020年5月23日,51,3.2.3表格標(biāo)簽及其應(yīng)用實(shí)例,表格是一種能夠有效地描述信息的組織方式，由行、列、單元格組成，可以很好地控制頁(yè)面布局，所以在網(wǎng)頁(yè)中應(yīng)用非常廣泛。許多網(wǎng)站都用多重表格來(lái)構(gòu)建網(wǎng)站的總體布局，固定文本或圖像的輸出，還可以任意進(jìn)行背景和前景顏色的設(shè)置。,2020年5月23日,52,語(yǔ)法格式：,表格第一列的標(biāo)題表格第二列的標(biāo)題表格第一行的第一個(gè)單元格內(nèi)容表格第一行的第二個(gè)單元格內(nèi)容表格第二行的第一個(gè)單元格內(nèi)容表格第二行的第二個(gè)單元格內(nèi)容,2020年5月23日,53,常用屬性,border：設(shè)置表格邊框的寬度，若為0表示邊框不可見，單位為像素。cellspacing：設(shè)置單元格邊框到表格邊框的距離，單位為像素。cellpadding：設(shè)置單元格內(nèi)文字到單元格邊框的距離，單位為像素。width：設(shè)置表格寬度。其值可為整數(shù)，單位為像素，如：100表示100像素；也可以是相對(duì)頁(yè)面寬度的相對(duì)值，如：20%表示表格寬度為整個(gè)頁(yè)面寬度的20%。height：設(shè)置表格高度，取值方式與width一致。bgcolor：設(shè)置表格背景色?？梢允鞘M(jìn)制代碼，也可以是英文字母，bordercolor：設(shè)置表格邊框顏色。align：設(shè)置表格在水平方向的對(duì)齊方式，其值可為left、right、center。valign：設(shè)置表格在垂直方向的對(duì)齊方式，其值可為top、middle、baseline。,2020年5月23日,54,常用屬性,bordercolor：設(shè)置該行的外邊框顏色。bgcolor：設(shè)置該行單元格的背景顏色。height：設(shè)置該行的高度。align：設(shè)置該行各單元格的內(nèi)容在水平方向的對(duì)齊方式，其值可為left、right、center。valin：設(shè)置該行各單元格的內(nèi)容在垂直方向的對(duì)齊方式，其值可為top、middle、bottom。,2020年5月23日,55,常用屬性,colspan：設(shè)置單元格所占的列數(shù)，默認(rèn)值為1。rowspan：設(shè)置單元格所占的行數(shù)，默認(rèn)值為1。background：設(shè)置單元格背景圖像。width：設(shè)置單元格寬度。,2020年5月23日,56,定義的列標(biāo)題的文字以粗體方式顯示，其屬性使用與一致，在表格的定義語(yǔ)法中，也可以不使用定義標(biāo)題單元格。,2020年5月23日,57,【例3-9】表格實(shí)例（tabletag.html）表格實(shí)例Java方向軟測(cè)方向.NET方向,2020年5月23日,58,Java程序設(shè)計(jì)JSP程序設(shè)計(jì)Java程序設(shè)計(jì)JSP程序設(shè)計(jì)C#程序設(shè)計(jì)ASP.NET,2020年5月23日,59,JavaWeb框架技術(shù)數(shù)據(jù)庫(kù)技術(shù)軟件測(cè)試?yán)碚撥浖y(cè)試技術(shù).NETFramework技術(shù)數(shù)據(jù)庫(kù)技術(shù),2020年5月23日,60,2020年5月23日,61,3.2HTML常用標(biāo)簽,3.2.1列表標(biāo)簽及其應(yīng)用實(shí)例3.2.2多媒體和超鏈接標(biāo)簽及其應(yīng)用實(shí)例3.2.3表格標(biāo)簽及其應(yīng)用實(shí)例3.2.4表單標(biāo)簽及其應(yīng)用實(shí)例3.2.5框架標(biāo)簽及其應(yīng)用實(shí)例,2020年5月23日,62,3.2.4表單標(biāo)簽及其應(yīng)用實(shí)例,表單在網(wǎng)頁(yè)中用來(lái)供用戶填寫信息，以實(shí)現(xiàn)服務(wù)器獲得用戶信息，使網(wǎng)頁(yè)具有交互功能。,2020年5月23日,63,2020年5月23日,64,表單標(biāo)簽,表單語(yǔ)法結(jié)構(gòu)如下：,2020年5月23日,65,action屬性：,設(shè)置服務(wù)器上用來(lái)處理表單數(shù)據(jù)的處理程序地址，處理程序可以是JSP程序、CGI（CommonGatewayInterface，通用網(wǎng)關(guān)接口）程序、ASP.NET程序等，該屬性值可以是URL地址也可以是電子郵件地址。例如：action=http:/localhost/sample/ShopCart.jsp，表示當(dāng)用戶提交表單后，將調(diào)用服務(wù)器上的JSP頁(yè)面ShopCart.jsp來(lái)處理用戶的輸入。另外，采用電子郵件地址的格式是：action=mailto:接收用戶輸入信息的郵件地址。例如：action=mailto:youremail，表示把用戶的輸入信息發(fā)送到電子郵件地址youremail。,2020年5月23日,66,method屬性,設(shè)置處理程序從表單中獲得信息的方式，取值可為get或post。get方法將表單中的輸入信息作為查詢字符串附加在action指定的地址后（中間用“？”隔開）傳送到服務(wù)器。查詢字符串使用key=value的形式定義，如果有多個(gè)域，中間用“color:blue,2020年5月23日,95,2.使用id定義樣式表,在HTML頁(yè)面中id選擇符用來(lái)對(duì)某個(gè)單一元素定義單獨(dú)的樣式，定義id選擇符要在id名稱前加上一個(gè)“#”號(hào)。使用id定義樣式表的基本語(yǔ)法如下：#id名稱標(biāo)簽屬性:屬性值；標(biāo)簽屬性:屬性值；標(biāo)簽屬性:屬性值；例如：#samplefont-family:宋體;font-size:60pt，段落文本。,2020年5月23日,96,3.使用class定義樣式表,（1）標(biāo)簽名.類名標(biāo)簽屬性:屬性值；標(biāo)簽屬性:屬性值；標(biāo)簽屬性:屬性值；例如：h1.centertext-align:center，該center類的樣式只能用在標(biāo)簽上。（2）.類名標(biāo)簽屬性:屬性值；標(biāo)簽屬性:屬性值；標(biāo)簽屬性:屬性值；例如：.textfont-family:宋體;color:red;段落文本，,2020年5月23日,97,3.3CSS基礎(chǔ)知識(shí),3.3.1CSS樣式表定義3.3.2HTML中加入CSS的方法及其應(yīng)用實(shí)例3.3.3CSS的優(yōu)先級(jí)及其應(yīng)用實(shí)例3.3.4CSS基本屬性及其應(yīng)用實(shí)例,2020年5月23日,98,3.3.2HTML中加入CSS的方法及其應(yīng)用實(shí)例,在HTML中加入CSS的方法主要有三種：嵌入式樣式表內(nèi)聯(lián)式樣式表外聯(lián)式樣式表,2020年5月23日,99,1.嵌入式樣式表,例如：我愛(ài)我的祖國(guó)這個(gè)樣式表只是讓當(dāng)前的標(biāo)簽對(duì)中的文字為紅色，字體大小為10pt。,2020年5月23日,100,2.內(nèi)聯(lián)式樣式表,內(nèi)聯(lián)式樣式表利用標(biāo)簽對(duì)將樣式表定義在HTML文檔的標(biāo)簽對(duì)之間，內(nèi)聯(lián)式樣式表的作用范圍是本HTML文檔。,2020年5月23日,101,【例3-15】?jī)?nèi)聯(lián)式樣式表實(shí)例（style1.html）內(nèi)聯(lián)樣式表實(shí)例內(nèi)聯(lián)式樣式表，本標(biāo)題字體大小為13磅，字體顏色為紅色本段文字字體大小為9磅，顏色為藍(lán)色,2020年5月23日,102,2020年5月23日,103,3.外聯(lián)式樣式表,外聯(lián)式樣式表是將定義好的CSS單獨(dú)放到一個(gè)以.css為擴(kuò)展名的純文本文件中，再使用標(biāo)簽鏈接到網(wǎng)頁(yè)中。,2020年5月23日,104,【例3-12】外聯(lián)式樣式表使用,（1）創(chuàng)建樣式表StyleSheet.css。pbackground-color:yellow;color:blue;font-style:italic.textfont-family:宋體;font-size:20pt;text-decoration:underline（2）在網(wǎng)頁(yè)上引用樣式表。外聯(lián)式樣式表實(shí)例本標(biāo)題文字字體大小為20磅，有下劃線本段文字背景顏色黃色，字體顏色藍(lán)色，斜體,2020年5月23日,105,2020年5月23日,106