用DIVCSS做網(wǎng)站設(shè)計(jì)布局參考

1、用DIV+CSS 做網(wǎng)站設(shè)計(jì)布局參考第一節(jié)怎么改善現(xiàn)有網(wǎng)站一,用 CSS 定義元素外觀 如定義了 h1 h2 <li>等, 還可以繼續(xù)設(shè)置里面的值, h1 為紅色 14px , 前面不要圓點(diǎn)等. 如 li 二,用結(jié)構(gòu)化元素代替無意義的垃圾. 例:第一節(jié)<br /> 第二節(jié)<br /> 第三節(jié)<br /> 上例如下表現(xiàn)可能會(huì)更好 <ul> <li>第一節(jié)</li> <li>第二節(jié)</li> <li>第三節(jié)</li> </ul> 三,給每個(gè)表格和表單加上

2、ID 給表格或表單賦予一個(gè)惟一的,結(jié)構(gòu)的標(biāo)記,例如: 例如<table id="menu"> 接下來在抒寫樣式表的時(shí)候,制作者就可以創(chuàng)建一個(gè) menu 的選擇器,并且關(guān)鏈一個(gè) CSS 規(guī)則,用來告訴表格單元,文本標(biāo)簽和所有其他元素怎么去顯示,這樣不需要對(duì)每一個(gè) TD 標(biāo)簽附帶一些多余的,占用帶寬的表現(xiàn)層的高,寬,對(duì)齊和背景顏色等屬性.只要一個(gè)附著 的標(biāo)記 id="menu"就可以進(jìn)行表現(xiàn)的實(shí)現(xiàn). 四,為圖片添加 alt 屬性 為所有圖片都添加 alt 屬性,這樣在圖片不能顯示就會(huì)出現(xiàn)替換文字,這樣對(duì)正常用戶來說 可有可無,但對(duì)于純文本瀏覽器和

3、屏幕閱讀機(jī)的用戶來說是至關(guān)重要的.只有添加了 alt 屬 性,代碼才會(huì)被 W3C 正確性校驗(yàn)通過. 正確寫法如下:<img src="img/logo.gif" alt="大燕網(wǎng),點(diǎn)擊返回首頁."> 四,把表格用在它應(yīng)該出現(xiàn)的地方 使用層代替表格布局,并不是要拋棄表格,而是讓它回歸它本來的作用,放置表格數(shù)據(jù),如 一個(gè)學(xué)生的成績單或者一個(gè)出庫記錄等. 五,校驗(yàn) 校驗(yàn)是驗(yàn)證頁面是否符合標(biāo)準(zhǔn)的最直接有效的方法.校驗(yàn)方式:網(wǎng)址校驗(yàn),文件上傳校驗(yàn). 校驗(yàn)成功,會(huì)顯示"This page is Valid XHTML 1.0 Transitio

4、nal!" 校驗(yàn) CSS2 檢驗(yàn)網(wǎng)址:http;//css-validator/ 校驗(yàn)方式:網(wǎng)址校驗(yàn),文件上傳校驗(yàn),直接貼入代碼校驗(yàn). 校驗(yàn)成功,會(huì)顯示"恭喜恭喜,此文檔已經(jīng)通過 CSS 版本 2.1 校驗(yàn)!" 六,關(guān)于 Web 標(biāo)準(zhǔn)的誤區(qū) 1,拋棄表格布局的思維方式 當(dāng)抽掉 CSS 文件,剩下的就是最本質(zhì)的內(nèi)容.這樣才能在文本瀏覽器,手機(jī),PDA 等設(shè)備 中閱讀,才能隨時(shí)修改 CSS 實(shí)現(xiàn)改版. 2,正確使用 XHTML 標(biāo)簽 XHTML 的標(biāo)簽不是用來做"表現(xiàn)"的,而是用來定義結(jié)構(gòu)的,因此,對(duì)不同的內(nèi)容使用正 確的

5、 XHMTL 標(biāo)簽對(duì)于建立良好的文檔結(jié)構(gòu)是很重要的. 何處使用<h1>何處使用<p>都要合 理,這樣不僅便于理解文檔內(nèi)容,同時(shí)對(duì)于 CSS 編寫也很重要. 3,關(guān)于理解 CSS 靈活的運(yùn)用 CSS 選擇器來進(jìn)行 CSS 定義,將通用的樣式寫在外部 CSS 文件中,然后在頁面 內(nèi)調(diào)用,同時(shí)還可以將不同的 CSS 定義在幾個(gè)文件中. 對(duì)于多次引用的樣式可以用 CLASS 來定義,不需要每個(gè)元素都定義 ID;也不是一定要用 DIV, 有的內(nèi)容完全可以用<p>來代替, 同樣都是塊級(jí)元素, 一樣有盒模型的七個(gè)參數(shù), <div> 僅僅方便浮動(dòng). 4, &qu

6、ot;通過驗(yàn)證"并不是最終目的 W3C 校驗(yàn)僅僅是幫助制作者檢查 XHTML 代碼的書寫是否規(guī)范, CSS 的屬性是否都在 CSS2 的規(guī)范內(nèi).代碼的標(biāo)準(zhǔn)化僅僅是第一步,不是說通過校驗(yàn),網(wǎng)頁就標(biāo)準(zhǔn)化了. 讓網(wǎng)頁具有良好的結(jié)構(gòu), 更快的瀏覽速度, 更友好的界面以及對(duì)更多設(shè)備的支持才是最終目的.第二節(jié) DIV+CSS 做網(wǎng)站設(shè)計(jì)布局的優(yōu)勢分析市場的需求往往引起這個(gè)行業(yè)得很大改革, 文件下載與頁面顯示速度更快，使得很多網(wǎng)站已經(jīng)開始重構(gòu) Web，采用層(DIV)布局,并且使用層疊樣式表(CSS)來實(shí)現(xiàn)頁面的外觀. 一,Web 標(biāo)準(zhǔn):是一系列標(biāo)準(zhǔn)的集合.二,網(wǎng)頁主要由三部分組成:結(jié)構(gòu)(Stru

7、cture),表現(xiàn)(Presentation)和行為(Behavior).三,對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面: a) 結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括:XHTML 和 XML b) 表現(xiàn)標(biāo)準(zhǔn)語言主要包括:CSS c) 行為標(biāo)準(zhǔn)主要包括對(duì)象模型:(如 W3C DOM),ECMAScript 等. d) 根據(jù) W3C DOM 規(guī)范是一種 W3C 頒布的標(biāo)準(zhǔn),用于對(duì)結(jié)構(gòu)化文檔建立對(duì)象模型, 從而使用戶可以通過程序語言 (包括腳本) 來控制其內(nèi)部結(jié)構(gòu).簡單的理解,DOM 解決了 Netscaped 的 Javascript Microsoft Jscript 之間的沖突, 給予 WEB 設(shè)計(jì)師和開 發(fā)者一個(gè)標(biāo)準(zhǔn)的方法,讓

8、他們來訪問他們站點(diǎn)中的數(shù)據(jù),腳本和表現(xiàn)層對(duì)象.四,采用標(biāo)準(zhǔn)的好處: a) 文件下載與頁面顯示速度更快. b) 內(nèi)容能被更廣泛的設(shè)備所訪問 (包括屏幕閱讀機(jī), 手持設(shè)備, 搜索機(jī)器人, 打印機(jī), 電冰箱等) . c) 用戶能夠通過樣式選擇定制自己的表現(xiàn)界面. d) 所有頁面都能提供適于打印的版面.五,采用標(biāo)準(zhǔn)對(duì)網(wǎng)民有者的好處如下: a) 更少的代碼和組件,容易維護(hù). b) 帶寬要求降低(代碼更簡潔) ,成本降低. c) 更容易被搜索引擎搜索到. d) 改版方便,不需要改變頁面內(nèi)容.六,什么是內(nèi)容,表現(xiàn),結(jié)構(gòu)和行為 a) 內(nèi)容就是制作者放在頁面內(nèi)真正想要訪問者瀏覽的信息, 可以包含數(shù)據(jù), 文檔或者

9、 圖片等. b) 結(jié)構(gòu)用結(jié)構(gòu)將它格式化.分成標(biāo)題,正文和列表等.易于閱讀和理解. c) 表現(xiàn):雖然定義了結(jié)構(gòu)但是內(nèi)容還是原來的樣式?jīng)]有改變.例如,標(biāo)題字體沒有變 大, 正文的顏色也沒有變化, 沒有背景, 沒有修飾. 所有用來改變內(nèi)容外觀的東西, 稱之為"表現(xiàn)" . d) 行為就是對(duì)內(nèi)容的交互及操作效果,例如,使用 Javascript 判斷一些表單提交,或 者實(shí)現(xiàn)菜單的顯示和隱藏等. HTML 和 XHTML 頁面都是由"結(jié)構(gòu),表現(xiàn)和行為"這三方面組成的.內(nèi)容是基礎(chǔ), 然后是附加上去結(jié)構(gòu)和表現(xiàn),最后再對(duì)它們加點(diǎn)"行為" .七,DIV

10、與 CSS 結(jié)合的優(yōu)勢八,傳統(tǒng)的 HTML 3.2/4.0 標(biāo)簽里既有控制結(jié)構(gòu)的標(biāo)簽,如<p> <br> 等,也有控制表現(xiàn)的 標(biāo)簽如;<font> <h1> <background>等,還有本意是用來控制結(jié)構(gòu)卻被用來控制表現(xiàn)的 標(biāo)簽<table>,結(jié)構(gòu)與表現(xiàn)標(biāo)簽混雜在一起.九,網(wǎng)站制作者往往會(huì)遇到如下問題:1，,改版:例如需要把標(biāo)題文字替換成紅色,下邊結(jié)變成一像素灰色的虛線,那么就要一頁 一頁的修改.CSS 的出現(xiàn),解決了"批量修改表現(xiàn)"的問題,最廣泛的被制作者接受 的 CSS 屬性,例如,控制字體的大

11、小顏色,超鏈接,表格的背景色等.2, 數(shù)據(jù)的利用:本質(zhì)上講,所有頁面信息都是數(shù)據(jù),例如,CSS 所有屬性的解釋,就 可以建立一個(gè)數(shù)據(jù)庫,數(shù)據(jù)就存在數(shù)據(jù)查詢,處理和交換的問題.由于結(jié)構(gòu)表現(xiàn)混雜在 一起, 裝飾圖片, 文字被層層的表格嵌套拆分. 從哪里開始是標(biāo)題, 從哪里開始是說明, 哪些是附加信息不需要打印?如果靠軟件是無法判斷的, 唯一的方法是人工處理. 這要 如何解決呢,就是要內(nèi)容,結(jié)構(gòu)與表現(xiàn)分離. 例如 <h1>說明資料</h1> h1 font:"宋體" 14px; color:#000; border-bottom:1px solid #CC

12、C; 如果把上例改為紅色,粗體,下邊線為紅色虛線可以直接修改 h1 的樣式 h1 font:"宋體" 14px bold; color:#F00; border-bottom:1px dashed #F00; 第三節(jié)一,HTML 與 XHTML 打開一個(gè)網(wǎng)頁,查看它的源代碼,就會(huì)看到一些有規(guī)律的英文代碼,這些組成網(wǎng)頁的代碼就 是超文本鏈接標(biāo)示語言(Hypertext Markup Language,html)"超文本"就是指網(wǎng)頁內(nèi)包含 圖片,鏈接甚至音樂,程序等非文字元素, "標(biāo)示"就是說它不是程序,只是于文字及標(biāo)記 組合而成. 瀏覽

13、器或其它可以瀏覽網(wǎng)頁的設(shè)備將這些"HTML"語言翻譯過來,并照定義的格式顯示出 來,轉(zhuǎn)化成最終看到的網(wǎng)頁. 二,常用的 HTML 標(biāo)簽 1, 標(biāo)題 <h1>到<h6> 2,段落 段落內(nèi)也可以包含其他的標(biāo)簽,如圖片標(biāo)簽<img>,換行標(biāo)簽<br>,鏈接標(biāo)簽<a>等 3,換行標(biāo)簽 <br />強(qiáng)制換行 為了向 XHTML 過度,最好養(yǎng)成關(guān)閉標(biāo)簽的好習(xí)慣,為空標(biāo)簽加上"/"如<img /> <br /> 4,鏈接 鏈接可以分為超鏈接和錨點(diǎn),這兩種標(biāo)簽都是使用錨標(biāo)簽&

14、lt;a>來建立. <a href="" alt="">鏈接文字</a> 5,列表 有三種 無序列表,列表項(xiàng)目前面有黑色的圓點(diǎn) <ul> <li></li> </ul> 有序列表,列表項(xiàng)目前面有數(shù)字序號(hào). <ol> <li></li> </ol> 釋義列表是一列事物以及與其相關(guān)的解釋. <dl> <dt></dt> <dd></dd> </dl> 6,圖片 圖

15、像(images)是由<img>標(biāo)簽定義的,<img>也是一個(gè)空標(biāo)簽. <img src="url" alt="圖片解釋" title=""> 給頁面的圖像都加上 alt 標(biāo)簽是一個(gè)好習(xí)慣,它有助于更好的顯示信息,而對(duì)純文本瀏覽器 或者關(guān)閉了圖片顯示功能的瀏覽器會(huì)很有用. 注:不加 alt 標(biāo)簽,就不能通過 w3c 布局校驗(yàn). 7,表格 表格的<table><tr><th><td>等標(biāo)簽都可以設(shè)置寬度,高度,背景色等多種屬性.可是一般不 推薦在 HTM

16、L 內(nèi)定義這些屬性,而應(yīng)將其統(tǒng)一定義到 CSS 樣式表內(nèi),以方便修改. 8,層 層(div)稱為定位標(biāo)記,其作用是設(shè)置文字表格圖片等的擺放位置. <div></div> 若想靈活地使用層來布局頁面,就要深刻理解層的含義,它和表格,標(biāo)題等標(biāo)簽不同,它沒 有實(shí)際的意義,只是一個(gè)"容器" ,用來放置其它元素,然后利用 CSS 樣式從而布置這個(gè)容 器的擺放位置. 9,范圍 范圍(span)和層的作用類似,只是<span>標(biāo)簽一般應(yīng)用在行內(nèi),用以定義一個(gè)小塊需要特別標(biāo)示的內(nèi)容,<span>標(biāo)簽需要通過 CSS 樣式表才能發(fā)揮作用. 10

17、,框架 使用框架(Frames),可以在一個(gè)瀏覽器窗口中顯示多個(gè)頁面. 所有的框架都放在一個(gè)總的 HTML 文件中,這個(gè)檔案只記錄了該框架如何分割,不會(huì)顯示 任何資料,所以沒有<body>標(biāo)記,瀏覽器通過解釋這個(gè)總文件而將其中劃分的各個(gè)框架分 別對(duì)應(yīng)的 HTML 文件顯示出來. <frameset>用來劃分框架,每一框架由一個(gè)<frame>標(biāo)簽所標(biāo)示,<frame>必須在<frameset> 標(biāo)簽內(nèi)使用. <frame>標(biāo)簽的 src 屬性指向在此窗口內(nèi)打開的 HTML 頁面. Name 屬性為框架窗口定義了名稱,這個(gè)名稱

18、可以用在鏈接的 target 屬性內(nèi). 框架雖然讓頁面的表現(xiàn)形式變得靈活起來, 但是不支持框架的瀏覽器 (例如可上網(wǎng)手機(jī)的瀏 覽器)將無法瀏覽網(wǎng)頁內(nèi)容,要打印一個(gè)框架頁面也會(huì)很麻煩,同時(shí)制作頁面的過程也會(huì)變 得更加復(fù)雜. 目前比較常用的框架是<iframe>, 它是 ie 專用的標(biāo)簽. 其作用是在一個(gè)頁面插入框架以顯示 另外一個(gè)文件. 注:目前大部分非 IE 瀏覽器也支持<iframe>標(biāo)簽,不過<iframe>與<frame>一樣也有缺點(diǎn), 例如在手持設(shè)備上還是不支持. 11,表單 <fieldset><legend>基

19、本信息</legend> </fieldset> <form action="dreamdu.php" method="post" enctype="multipart/form-data" id="dreamdu"> <fieldset> <legend>用戶名與密碼:</legend> <input name="hiddenField" type="hidden" value="hid

20、denvalue" /> <label for="username">用戶名:</label> <input type="text" id="username" value="" /> <label for="pass">密碼:</label> <input type="password" id="pass" /> </fieldset> <field

21、set> <legend>性別:</legend> <input type="radio" value="1" id="sex" /> <label for="boy">男</label> <input type="radio" value="2" id="sex" /> <label for="girl">女</label> <

22、input type="radio" value="3" id="sex" /> <label for="sex">保密</label> </fieldset> <fieldset> <legend>我最喜愛的:</legend> <input type="checkbox" value="1" id="fav" /> <label for="comp

23、uter">計(jì)算機(jī)</label> <input type="checkbox" value="2" id="fav" /> <label for="trval">旅游</label> <input type="checkbox" value="3" id="fav" /> <label for="buy">購物</label> <

24、/fieldset> <fieldset> <legend>對(duì)夢之都的意見:</legend> <label for="select">你對(duì)夢之都的感覺</label> <select size="1" id="select"> <option>很全面,很好</option> <option>一般般吧,還要努力</option> <option>有很多問題,不過還可以</option>

25、</select> </fieldset> <fieldset> <legend>夢之都編程語言選擇:</legend> <label for="multipleselect">你想在夢之都學(xué)習(xí)的編程語言</label> <select size="10" multiple="multiple" id="multipleselect"> <option>XHTML</option> <opt

26、ion>CSS</option> <option>JAVASCRIPT</option> <option>XML</option> <option>PHP</option> <option>C#</option> <option>JAVA</option> <option>C+</option> <option>PERL</option> </select> </fieldset> &l

27、t;fieldset> <legend>我要在夢之都學(xué):</legend> <label for="WebDesign">選擇一個(gè)你在夢之都最想學(xué)的</label> <select id="WebDesign"> <optgroup label="client"> <option value="HTML">HTML</option> <option value="CSS">CSS&l

28、t;/option> <option value="javascript">javascript</option> </optgroup> <optgroup label="server"> value="PHP">PHP</option> <option value="ASP">ASP</option>value="JSP">JSP</option> </optgroup&g

29、t;<option <optgroup label="database"> value="Access">Access</option> value="MySQL">MySQL</option> <option <option <option <optionvalue="SQLServer">SQLServer</option> </optgroup> </select> </fieldse

30、t> <fieldset> <legend>個(gè)人化信息:</legend> <label for="myimage">個(gè)性照片上傳</label> <input type="file" id="myimage" size="35" maxlength="255" /> <label for="contactus">聯(lián)系我們</label><textarea cols=&

31、quot;50" rows="10" id="contactus"> dreamer dreamduat163dotcom </textarea> </fieldset> <fieldset> <legend>提交:</legend> <input type="submit" value="submit" id="submit" /> <input type="reset" valu

32、e="reset" id="reset" /> </fieldset> </form> 12,注釋 HTML<!-> CSS 表中/*/ 三,升級(jí)到 XHTML HTMLA 發(fā)展到今天存在以下三個(gè)主要缺點(diǎn): 手機(jī),PDA,信息家電都不能直接顯示 HTML 由于 HTML 代碼不規(guī)范,臃腫,瀏覽器需要足夠智能和龐大才能正確顯示 HTML. 于是 W3C 又制定了 XHTML,XHTML 是 HTML 向 XML 過渡的一個(gè)橋梁. XML 是 Web 發(fā)展的趨勢, XHTML 是當(dāng)前替代 HTML4.0 標(biāo)記語言的標(biāo)

33、準(zhǔn), 使用 XHTML1. 0,只要遵守一些簡單規(guī)則,就可以設(shè)計(jì)出既適合 XML 系統(tǒng),又適合當(dāng)前大部分 HTML 瀏 覽器的頁面,這個(gè)指導(dǎo)方針可以使 Web 平滑的過渡到 XML. XHTML 能與其他基于 XML 的標(biāo)記語言, 應(yīng)用程序及其協(xié)議進(jìn)行良好的交互工作, XHTML 是 Web 標(biāo)準(zhǔn)家族的一部分,能很好地用在無線設(shè)備等其他用戶代理上. 在網(wǎng)站設(shè)計(jì)方面,XHTML 可幫助作者去掉表現(xiàn)層代碼的惡習(xí),幫助制作者養(yǎng)成標(biāo)記校驗(yàn)來 測試頁面工作的習(xí)慣.第四節(jié) XHTML 和 HTML 的比較1,選擇 DTD 定義文檔的類型 DOCTYPE 是 document type 的簡寫, 用來說明本

34、文件用的 XHTML 或者 HTML 是什么版本. 在 XHTML 中必須聲明文檔的類型,以便于瀏覽器知道正瀏覽的文檔是什么類型的. 其中的 DTD(如 xhtml1-transitional.dtd)叫文檔類型定義,里面包含了文檔的規(guī)則,瀏覽器 就根據(jù)定義的 DTD 來解釋頁面的標(biāo)識(shí),并展現(xiàn)出來. XHTML1.0 提供了以下三種 DTD 聲明可供選擇 過渡的(Transitional):要求寬松的 DTD,它允許繼續(xù)使用 HTML4.01 的標(biāo)識(shí)(但是要符 合 XHTML 的寫法) 嚴(yán)格的(strict)要求嚴(yán)格的 DTD,不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性 框架的(Frameset):專門針

35、對(duì)框架頁面使用. 注:DW8 只在選擇文檔類型,軟件會(huì)自動(dòng)插入相應(yīng)的 DOCTYPE. 2,設(shè)定一個(gè)名字空間(NameSpace) 一個(gè)名字空間是收集元素類型和屬性名字的一個(gè)詳細(xì)的 DTD,名字空間聲明允許通過一個(gè) 在線地址指向來識(shí)別名字空間,只要直接在 DOCTYPE 聲明后面添加如下代碼: <html XMLns=/1999/xhtml> 自動(dòng)添加的. 3,定義語言編碼 為了被瀏覽器正確解釋和通過標(biāo)識(shí)校驗(yàn),所有的 XHTML 文檔都必須聲明它們所使用的編 碼語言. <meta http-equiv="Content-Type&qu

36、ot; content="text/html; charset="GB2312"> 4,XHTML 語言一定要被正確地嵌套使用 在 HTML 里一些元素可以不正確嵌套也能正常顯示 <p> <li> How are you? </p> </li> 在 XHTML 里必須正確嵌套才能正常顯示 <p> <li> How are you? </li> </p> 5,XHTML 文件一定要有正確的組織結(jié)構(gòu) 所有的 XHTML 應(yīng)該正確地嵌套在以<html>開始以

37、</html>結(jié)束的元素里面,其它的元素可 以有子元素,并且子元素也要被正確的嵌套在它們的父元素內(nèi). 如: <html> <head> </head> <body> </body> </html> 6,標(biāo)簽名字一定要用小寫字母 因?yàn)?XHTML 是 XML 的一種,而 XML 對(duì)大小寫是敏感的. 7,所有的 XHTML 元素一定要關(guān)閉 8,所有的屬性名字必須小寫 9,屬性值必須帶上英文雙引號(hào) 10,屬性的簡寫被禁止 checked checked="checked" selected sel

38、ected="selected" 11,用 ID 屬性代替 name 屬性 在 XHTML 里除了表單之外,name 屬性不能使用,應(yīng)該用 id 來替換. 如<img src="img/cat.jpg" name="cat" /> <img src="img/cat.jpg" name="cat" id="cat" /> 12,lang 屬性 lang 屬性可以應(yīng)用于幾乎所有的 XHTML 元素,它指定了元素中內(nèi)容的語言屬性. 如果在一個(gè)元素中應(yīng)用 l

39、ang 屬性,必須加上 xml:lang 屬性,如: <div lang="no" xml:lang="no"> Norge </div> 如何轉(zhuǎn)換現(xiàn)有的結(jié)構(gòu)為 XHTML 1. 要將一個(gè) HTML 轉(zhuǎn)換成 XHTML,一般可以依照以下步驟進(jìn)行. 2. 添加一個(gè) DOCTYPE 定義,過渡型,一般是目前理想的選擇. 3. 標(biāo)簽和屬性名都要小寫. 4. 5. 6. 所有的屬性值都加上英文引號(hào). 關(guān)閉空標(biāo)簽.如<img /> <br />,在后面不要忘了加/. 校驗(yàn)網(wǎng)站. 第四節(jié)層疊樣式表 CSS 一,樣式表分

40、類: 內(nèi)聯(lián)式樣式表,<style="color:red"> 嵌入式樣式表,<style type="text/css"> color:red </style> 外部式樣式表.<link rel="stylesheet" href="style/basic.scc" type="text/css"> 層疊樣式表(CSS,Cascading Style Sheet)二,規(guī)則 基本規(guī)則:選擇符和聲明 聲明包括(屬性:值) 例:Pcolor:red; fo

41、nt-size:14px; html,bodypadding:0;margin:0 *margin:0 選擇符: 1,類型選擇符(就是 HTML 文檔中的元素 2, 類選擇符(以點(diǎn)開頭,名字自定) 3, ID 選擇符(以#開頭,名字自定) 類選擇符和 ID 選擇符的區(qū)別: 類選擇符可以重復(fù)使用,且可以用在任意元素上,使用任意次. ID 屬性應(yīng)該是唯一的,只有擁有該 ID 的元素才會(huì)應(yīng)用該樣式.ID 選擇符的優(yōu)先權(quán)高于類 選擇符. 三,CSS 偽類 偽類是讓頁面呈現(xiàn)豐富表現(xiàn)力的好東西.之所以稱之為"偽",是因?yàn)樗鼈冎付ǖ膶?duì)象在文 檔中并不存在,它們指定的是元素的某種狀態(tài). 應(yīng)

42、用最廣泛的鏈接四種狀態(tài)(a:link, a:visited, a:hover ,a:active) 偽元素:對(duì)文檔虛構(gòu)的元素進(jìn)行定義. First-letter(設(shè)置元素內(nèi)第一個(gè)字符的樣式表屬性.) First-line(設(shè)置元素內(nèi)第一行的樣式表屬性.) Before(設(shè)置在元素前發(fā)生的內(nèi)容.)IE 不支持 after(設(shè)置在元素后發(fā)生的內(nèi)容.)IE 不支持 偽類與 CSS 類偽類可以與 CSS 類配合使用: <head> <style type="text/css"> span width:0.7em; line-height:80%; float

43、:left; font-family:"宋體",courier; font-size:400%; </style>三,為首字母,首行加特效 first-line <head> <style type="text/css"> p:first-line color:red; font-variant:small-caps;/*小寫字母轉(zhuǎn)為大寫字母*/ p: first-letter:400%; </style> </head> <body> <p>You can use th

44、e:first-line pseudo-element to add a special effect to the first line of a 四,CSS2 before 偽元素(可用于在某個(gè)元素之前插入某些內(nèi)容) h1;before content:url(mama.wav) CSS2 after 偽元素(可用于在某個(gè)元素之后插入某些內(nèi)容) h1;after content:url(mama.wav) 五,鼠標(biāo)指針 大燕網(wǎng)編輯整理 <span style="cursor: auto">Auto</span><br /> <s

45、pan style="cursor: crosshair">Crosshair</span><br /> <span style="cursor: default">Default</span><br /> <span style="cursor: pointer">Pointer</span><br /> <span style="cursor: hand">Hand</span><

46、br /> <span style="cursor: move">Move</span><br /> <span style="cursor: e-resize">e-resize</span><br /> <span style="cursor: ne-resize">ne-resize</span><br /> <span style="cursor: nw-resize">nw-res

47、ize</span><br /> <span style="cursor: n-resize">n-resize</span><br /> <span style="cursor: se-resize">se-resize</span><br /> <span style="cursor: sw-resize">sw-resize</span><br /> <span style="cur

48、sor: s-resize">s-resize</span><br /> <span style="cursor: w-resize">w-resize</span><br /> <span style="cursor: text">text</span><br /> <span style="cursor: wait">wait</span><br /> <span style=&

49、quot;cursor: help">help</span><br />第五節(jié) 文檔結(jié)構(gòu)一,HTML 樹型結(jié)構(gòu) HTML head body title H1 p ul li meta ul li li二,繼承 CSS 的一個(gè)主要特征是繼承,依賴于子孫關(guān)系,它允許樣式不僅應(yīng)用于某個(gè)特定的元素-同時(shí)也應(yīng)用于它的后代. . 但有的屬性是不能繼承的:例:border padding margin background table(td 要 單 獨(dú) 定義 特殊性規(guī)定了不同的權(quán)重,權(quán)重越高的會(huì)優(yōu)先使用. P 特殊性 1 類特殊性 10 ID 特殊性 100 層疊時(shí)

50、,按規(guī)則的前后順序決定其權(quán)重. 重要性,自己定義最高權(quán)重. (!important) 三,元素分類 adisplay:block;/*a 默認(rèn)的分類為內(nèi)聯(lián)元素,此規(guī)則將其定義為塊級(jí)元素.*/ 常用的分類 1, 塊級(jí)元素(display:bolck)(每個(gè)塊級(jí)元素都從新一行開始, 其后的元素也需要另起一行開始) 2,內(nèi)聯(lián)元素(display:inline)(不需要在新行內(nèi)顯示,而且也不強(qiáng)迫其后的元素?fù)Q行,內(nèi)聯(lián)元 素可以為任何其他元素的子元素. ) 3,列表項(xiàng)(display:list-item)(在 HTML 內(nèi)只有 LI 默認(rèn)是此類型,此類元素的表現(xiàn)形式和列 表類似. ) 4,隱藏元素(dis

51、play:none)(不會(huì)顯示出來,也不會(huì)占據(jù)任何位置. ) 第六節(jié),盒模型 Padding-left =40px 內(nèi)容寬度 width=200px Padding-right= 40px Border-left= 10px Margin-right =20px Border-right =10px Margin-right =20px 寬度=20+10+40+200+40+10+20=440px; 關(guān)于盒模型還有以下幾點(diǎn)需要注意: 邊界值可以為負(fù) 邊框默認(rèn)的樣式為不顯示 padding 不可為負(fù) 塊級(jí)元素,未浮動(dòng)的垂直相鄰元素的上邊界和下邊界會(huì)發(fā)生合并,例有上下兩個(gè)元素, 上元素的下邊界為

52、10px,下元素的下邊界為 5px,則實(shí)際兩個(gè)元素的間距為 10px.(為較大 的值) 大燕網(wǎng)編輯整理 浮動(dòng)元素(無論左浮或右浮)邊界不壓縮,且若浮動(dòng)不聲明寬度,則其寬度趨向于 0, 即壓縮其內(nèi)容能承受的最小寬度. 內(nèi)聯(lián)元素,例如 a,定義上下邊界不會(huì)影響到行高. 如果盒中沒有內(nèi)容,則即使定義了寬度和高度都為 100%,實(shí)際上只占 0%,因此不會(huì)被顯 示,需要特別注意. 二,瀏覽器的兼容問題 1,IE5.5 的盒模型錯(cuò)誤 關(guān)于瀏覽器兼容問題,在制作過程中,遇到最多的是 windows ie 5.5 及以前版本對(duì)于盒模型 理解上的錯(cuò)誤. 處理方法:在父元素或子元素中使用 padding 本身不使

53、用 2,IE 浮動(dòng)和對(duì)齊的錯(cuò)誤 如果在 CSS 中將元素和 float 和 text-align 設(shè)為一致,則在 IE 中邊界會(huì)被顯示為聲明值的兩 倍. 解決辦法:display:inline; 例:#float_right text-align:right; float:right; margin:0 5px; display:inline; 3,無序列表 UL 的 padding 與 margin ul 標(biāo)簽在 FF 中默認(rèn)是有 padding 值的,而在 IE 中只有 margin 默認(rèn)有值,所以先定義 ulmargin:0;padding:0;就能解決大部分問 題 4,FORM 標(biāo)簽

54、這個(gè)標(biāo)簽在 IE 中,將會(huì)自動(dòng) margin 一些邊距,而在 FF 中 margin 則是 0,因此,如果想顯示一致,所以最好在 css 中指定 margin 和 padding 樣式 ul,formmargin:0;padding:0;給定義死了 三,縮寫技巧 1,border margin padding background font 2,利用通配符 *margin:0 ; padding:0; border:0; 所有元素的邊界和填充邊框都為 0,這樣是為了避免某些未聲明的元素因?yàn)闉g覽器默認(rèn)樣式 而造成的錯(cuò)位情況. 4, 繼承 子元素自動(dòng)繼承父元素的屬性值,例顏色,-字體等,對(duì)于這些可

55、繼承的屬性,不要重復(fù)定 義. 5, 組合 某些屬性相同的選擇符可以一起定義.之間用逗號(hào)分隔. 大燕網(wǎng)編輯整理 Body,table,#massbroder:1px solid #333333; 6,0px 與 0 0 不用加單位. 常見兼容問題: 1.DOCTYPE 影響 CSS 處理 2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行 3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 設(shè)置 pad

56、ding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要 用 !important 多設(shè)一個(gè) height 和 width5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式 6,div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè) DIV 一樣高 line-height:200px; 然后插入文字, 就垂直居中了缺點(diǎn)是要控制內(nèi)容不 要換行 7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀, hand 僅 IE 可以 8.FF: 鏈接加邊框和

57、背景色,需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行. 參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò) 位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格. 9,友善地對(duì)待 Netscape 4 Body Font-family:Verdana,sans-serif; /*因?yàn)?Netscape 4,無法理解這個(gè)繼承問題*/ p,td,ul,ol,li,dl,dt,dd Font-family:Verdana,sans-serif; /*所以再分組對(duì)各元素進(jìn)行定義.*/ 學(xué)習(xí) CSS 制作網(wǎng)頁總結(jié)的一些

58、經(jīng)驗(yàn)使用 DIV+CSS 排版不是用換個(gè)標(biāo)簽然后再去按照表格的方式去排版,而是做到內(nèi)容與表 現(xiàn)的分離. 1: ID 用于標(biāo)識(shí)頁面單獨(dú)元素以及持久行的結(jié)構(gòu)性元素 方便 JS 的調(diào)用 類用于標(biāo)識(shí)同一頁面可重復(fù)定義使用的結(jié)構(gòu)性元素 ID 與類的命名需與表現(xiàn)形式無關(guān) : leftContent 而使用有意義的定義方式: sideBar 等等. 命名方式遵循"駝峰式大小寫 (標(biāo) 志符由多個(gè)單詞組成 除首詞首字母小寫外 其余單詞首字母均大寫)" 2:避免濫用類 當(dāng)類型的結(jié)構(gòu)需要不一樣的表現(xiàn)時(shí) 記得什么是層疊樣式表 具體結(jié)構(gòu) : 等可使用如下方式: div.sideBar p定義即后代選

59、擇器 定義即后代選擇器+ID 或類選擇器 中的 p a h1 等可使用如下方式: 定義即后代選擇器 組合方式. 組合方式. 3:DIV 與 SPAN IV(塊級(jí)框)用于對(duì)塊級(jí)元素的分組 SPAN(行內(nèi)框)用于對(duì) : (塊級(jí)框) (行內(nèi)框) 行內(nèi)元素分組標(biāo)識(shí) div 是一個(gè)塊級(jí)元素,可以包含段落,表格等內(nèi)容,用于放置不同的內(nèi)容.一般我們?cè)诰W(wǎng)頁 通過 div 來布局定位網(wǎng)頁中的每個(gè)區(qū)塊. Span 是一個(gè)內(nèi)聯(lián)元素,沒有實(shí)際意義,它的存在純粹是為了應(yīng)用樣式,給一段內(nèi)容加上< span></span>標(biāo)記可以通過在 span 上定義樣式來設(shè)定其內(nèi)容樣式. 4:對(duì)于頁面基本默認(rèn)的

60、方式可以選擇通用選擇器(*標(biāo)識(shí))進(jìn)行定義 * paddin :對(duì)于頁面基本默認(rèn)的方式可以選擇通用選擇器( 標(biāo)識(shí) 標(biāo)識(shí)) 面基本默認(rèn)的方式可以選擇通用選擇器 g:0; margin:0; : 5: body 也是可以添加 ID 和類的 這樣就可以為其添加特別樣式. 這樣就可以為其添加特別樣式. 6:樣式表中導(dǎo)入樣式表需在頂端 覆蓋規(guī)則為本身樣式覆蓋導(dǎo)入樣式. 樣式表中導(dǎo)入樣式表需在頂端 覆蓋規(guī)則為本身樣式覆蓋導(dǎo)入樣式. 7:CSS 樣式表細(xì)分化 顏色 布局 風(fēng)格 表單 均可分離 這樣對(duì)以后的修改和風(fēng)格設(shè) : 計(jì)更方便. 計(jì)更方便. 8:盒模型:內(nèi)外 :盒模型: 外 以下是引用片段: 以下是引用片

61、段: contentwidth height(補(bǔ)充:height 只有在父元素定義了絕對(duì)高度時(shí)其%才有意 義) border padding(內(nèi)補(bǔ)丁)-"填充" background-image background-color margin(外補(bǔ)丁)-"空白邊"透明 可為負(fù)值 記住:在 css 中 width 是指內(nèi)容區(qū)域的寬度 IE/WIN 與盒模型: IE5.5/IE6 怪異模式下: 元素框總寬度=content.width+margin.width FireFox/Opera/. width+margin.width : 元素框總寬度=conte

62、nt.width+padding.width+border. 差異在于: IE5.5/IE6 怪異模式下 width=有效 content.width+padding.width+b order.width 內(nèi)補(bǔ)丁和邊框被算在內(nèi)容寬度里面 #selectwidth:750px;padding:10px;border:5px IE 怪異模式:總寬度: 750p x FF/OP:780px IE 怪異模式:有效內(nèi)容寬度:750-20-10 FF/OP:750 IE6 正常模式下:同于 FF/OP 處理方法:在父元素或子元素中使用 padding 本身不使用 空白邊疊加:當(dāng)兩個(gè)空白邊疊加時(shí) 頂或底邊

63、將會(huì)疊加 實(shí)際空白邊高度=空白邊大的 值 例: 以下是引用片段: 以下是引用片段: <div id="top" style="margin:0 0 10px 0;"></div><div id="bottom" style="margin:20px 0 0 0; "></div> 空白邊高度為 20px 但是如果這個(gè)時(shí)候你添加邊框或則填充,將不再疊加 /定位機(jī)制/ BOX 模型解釋不一致問題 在 FF 和 IE 中的 BOX 模型解釋不一致導(dǎo)致相差 2px 解決方 法

64、:divmargin:30px!important;margin:28px; 注意這兩個(gè) margin 的順序一定不 能寫反, important 這個(gè)屬性 IE 不能識(shí)別,但別的瀏覽器可以識(shí)別.所以在 IE 下其實(shí)解 釋成這樣: div maring:30px;margin:28px重復(fù)定義的話按照最后一個(gè)來執(zhí)行,所 以不可以只寫 margin:xx px!important; dth:500px; /for ff+ie6.0 #box width:600px; /for ie6.0- wi #box width:600px!important /for ff width:6 00px; /

65、for ff+ie6.0 width /*/:500px; /for ie6.0- 例:margin 10px; border:6px 1px 1px 1px; width:768px !important; height:34px !importan; width/*/:770px; height/*/: 41px; Firefox 等瀏覽器識(shí)別出"聲明(!important),接受"width:768px". " " IE5.x 不認(rèn)識(shí)"聲明(!important),則接受第二次定義的"width:770px" " . IE6 首先接受第一次定義的"width=768px;",而接下來無法解釋/*/ 這個(gè)空的注 " 9:相對(duì)定位(relative):相對(duì)于其默認(rèn)初始位置 絕對(duì)定位:相對(duì)父級(jí)元素或畫布, :相對(duì)定位( ):相對(duì)于