十天學(xué)會divcss教程完整版完美整理完整代碼

十天學(xué)會divcss教程完整版完美整理完整代碼

ID:9002792

大?。?.38 MB

頁數(shù):180頁

時(shí)間:2018-04-14

十天學(xué)會divcss教程完整版完美整理完整代碼_第1頁
十天學(xué)會divcss教程完整版完美整理完整代碼_第2頁
十天學(xué)會divcss教程完整版完美整理完整代碼_第3頁
十天學(xué)會divcss教程完整版完美整理完整代碼_第4頁
十天學(xué)會divcss教程完整版完美整理完整代碼_第5頁
資源描述:

《十天學(xué)會divcss教程完整版完美整理完整代碼》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。

1、第一天 XHTMLCSS基礎(chǔ)知識歡迎大家學(xué)習(xí)《十天學(xué)會web標(biāo)準(zhǔn)》,也就是我們常說的DIV+CSS。不過這里的DIV+CSS是一種錯(cuò)誤的叫法,建議大家還是稱之為web標(biāo)準(zhǔn)。學(xué)習(xí)本系列教程需有一定html和css基礎(chǔ),也就是指您之前做過網(wǎng)頁,會用表格布局。如果您剛開始學(xué)習(xí)網(wǎng)頁制作,不知道什么是表格布局及html和css,建議您先去充電,否則學(xué)習(xí)本教程會非常吃力或者根本就聽不懂。由于時(shí)間關(guān)系,本教程只講解一些基礎(chǔ)知識,讓您從原來的表格布局跨入到web標(biāo)準(zhǔn)(div+css)布局,會使用web標(biāo)準(zhǔn)制作出常見的頁面,這也達(dá)到了本教程的目

2、的。本教程多以實(shí)例形式循序漸進(jìn)講解,實(shí)例涉及到哪些關(guān)鍵點(diǎn)或難點(diǎn)就講解什么,較少講解概念。因?yàn)楦拍钸@些東西很難說明白,或者說明白你也不一定能聽懂,聽懂了也不一定能理解。所以把概念留給大家以后再深入研究。由于章節(jié)關(guān)系,沒有把css和csshack單獨(dú)分出,只是在用到的時(shí)候穿插入講解了。html基礎(chǔ)和css基礎(chǔ)只在第一節(jié)中介紹了幾點(diǎn)重要的。下面我們開始第一天的學(xué)習(xí)一、xhtmlcss基礎(chǔ)知識首先說一下我們這節(jié)課的知識點(diǎn)1.文檔類型2.語言編碼3.html標(biāo)簽4.css樣式5.css優(yōu)先級6.css盒模型組成1)文檔類型當(dāng)我們用dre

3、amweaver新建一下html格式文檔時(shí),查看源代碼,會發(fā)現(xiàn)代碼最上部有如下這句話:這句話標(biāo)明本文檔是過渡類型,另外還有框架和嚴(yán)格類型,目前一般都采用過渡類型,因?yàn)闉g覽器對XHTML的解析比較寬松,允許使用HTML4.01中的標(biāo)簽,但必須符合XHTML的語法。許多朋友在制作頁面時(shí),往往喜歡把這句刪除掉

4、,在這里建議大家一定要保留這句話,刪除它后可能引起某些樣式表失效或其它意想不到的問題。2)語言編碼接下來我們還會發(fā)現(xiàn)這樣一句話:它標(biāo)示文檔的語言編碼。就像我們平時(shí)所說的漢語、英語一樣。這里的gb2312告訴瀏覽器,本文檔采用簡體中文編碼;還有一種常用的編碼是UTF-8編碼,它是國際通用的編碼。不管我們采用哪種編碼,有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣,要不就會出現(xiàn)亂碼。?

5、3)html標(biāo)簽html標(biāo)簽在頁面中都必須結(jié)束。成對的標(biāo)簽以“/標(biāo)簽名”結(jié)束,有些單一的標(biāo)簽在本身的結(jié)尾打上/來結(jié)束,這是xhtml代碼編寫的規(guī)范。成對的標(biāo)簽:{...}{...}

{...}
{...}

{...}

......單一的標(biāo)簽:
.......還需說明一點(diǎn)的是按xhtml規(guī)范,標(biāo)簽必須用小寫。4)css樣式加載css樣式有以下四種§外部樣式§內(nèi)部樣式§行內(nèi)樣式§導(dǎo)入樣式

6、khref="layout.css"rel="stylesheet"type="text/css"/>這種形式是把css單獨(dú)寫到一個(gè)css文件內(nèi),然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調(diào)用,其它頁面也可以調(diào)用,是最常用的一種形式。這種形式是內(nèi)部樣式表,它是以結(jié)尾,寫在源代碼的head標(biāo)簽內(nèi)。這樣的樣式表只能針對本頁有效。不能作用于其它頁面。行內(nèi)樣式

這種在標(biāo)簽內(nèi)

7、以style標(biāo)記的為行內(nèi)樣式,行內(nèi)樣式只針對標(biāo)簽內(nèi)的元素有效,因其沒有和內(nèi)容相分離,所以不建議使用。@importurl("/css/global.css");鏈接樣式是以@importurl標(biāo)記所鏈接的外部樣式表,它一般常用在另一個(gè)樣式表內(nèi)部。如layout.css為主頁所用樣式,那么我們可以把全局都需要用的公共樣式放到一個(gè)global.css的文件中,然后在layout.css中以@importurl("/css/global.css")的形式鏈接全局樣式,這樣就使代碼達(dá)到很好的重用性。5)css優(yōu)先級§id優(yōu)先級高于cl

8、ass§后面的樣式覆蓋前面的§指定的高于繼承§行內(nèi)樣式高于內(nèi)部或外部樣式§總結(jié):單一的(id)高于共用的(class),有指定的用指定的,無指定則繼承離它最近的6)css盒模型組成css盒模型是本節(jié)教程的重點(diǎn)。前面幾個(gè)知識點(diǎn),如果您會用表格布局的話,就非常好理解和掌握了。這里

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件,查看預(yù)覽時(shí)可能會顯示錯(cuò)亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時(shí)聯(lián)系客服。
3. 下載前請仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請聯(lián)系客服處理。