HTML與CSS概述.ppt

第1章 X HTML與CSS概述 本章簡介 制作網(wǎng)頁的基礎是使用HTML HyperTextMarkupLanguage 超文本置標語言 其核心思想是 需要設置什么樣式 就使用相應的HTML標記或者屬性 然而僅僅依靠HTML會遇到很多不可解決的問題 為此 HTML逐步地發(fā)展到了XHTML 與此同時 CSS 層疊樣式表 也應運而生 本章簡單介紹HTML XHTML和CSS三者之間的關系 以及CSS的基礎 重點理解使用CSS的核心原理 打開瀏覽器并在地址欄中輸入一個網(wǎng)站的地址 可以看到相應的網(wǎng)頁內容 網(wǎng)頁可用很多種類型的內容作為網(wǎng)頁元素 其中 文字是最基本的網(wǎng)頁元素 此外還包括靜態(tài)的圖形和動畫 以及音頻 視頻等其他形式的多媒體文件 網(wǎng)頁的最終目的就是給訪問者顯示有價值的信息 并留下最深刻的印象 1 1網(wǎng)頁的基礎概念 使用瀏覽器軟件顯示網(wǎng)頁 1 2Web標準 網(wǎng)頁相關的技術走入實用階段僅短短十幾年的時間 就發(fā)生了很多重要的變化 其中最重要的一點是 Web標準 這一理念被廣泛地接受 1 2 1標準的重要性 互聯(lián)網(wǎng)是另一個 標準 輩出的領域 連接到互聯(lián)網(wǎng)的各種設備的品牌繁多 功能各不相同 因此必須依靠嚴謹合理的標準 才能使這些紛繁復雜的設備都能協(xié)同工作 Web標準 也是互聯(lián)網(wǎng)領域中的標準 實際上 它并不是一個標準 而是一系列標準的集合 1 2 2 Web標準 概述 網(wǎng)頁主要由3個部分組成 結構 Structure 表現(xiàn) Presentation 和行為 Behavior 結構 表現(xiàn) 和 行為 分別對應于3種非常常用的技術 即 X HTML CSS和JavaScript 也就是說 X HTML用來決定網(wǎng)頁的結構和內容 CSS用來設定網(wǎng)頁的表現(xiàn)樣式 JavaScript用來控制網(wǎng)頁的行為 結構 表現(xiàn) 和 行為 的關系 1 3HTML與XHTML HTML與XHTML基本上可以認為它們是一種語言的不同階段 類似于文言文和白話文之間的關系 因此它們也經常被寫作 X HTML 下面講述它們的淵源和區(qū)別 1 3 1追根溯源 X HTML是所有上網(wǎng)的人每天都離不開的基礎 所有網(wǎng)頁都是使用 X HTML編寫的 隨著網(wǎng)絡技術日新月異的發(fā)展 HTML也不斷地改進 因此可以認為XHTML是HTML的 嚴謹版 HTML在初期 為了能更廣泛地被接受 因此大幅度放寬了標準的嚴格性 如標記可以不封閉 屬性可以加引號 也可以不加引號等 這導致出現(xiàn)了很多混亂和不規(guī)范的代碼 這不符合標準化的發(fā)展趨勢 影響了互聯(lián)網(wǎng)的進一步發(fā)展 1 3 2文檔類型的含義與選擇 由于同時存在不同的規(guī)范和版本 為了使瀏覽器能夠兼容多種規(guī)范 規(guī)范中規(guī)定可以使用文檔類型 DOCTYPE 指令來聲明使用哪種規(guī)范解釋該文檔 目前 常用HTML或者XHTML作為文檔類型 而規(guī)范又規(guī)定 在HTML和XHTML中各自有不同的子類型 如包括嚴格類型和過渡類型的區(qū)分 過渡類型兼容以前版本定義的 而在新版本已經廢棄的標記和屬性 嚴格類型則不兼容已經廢棄的標記和屬性 建議讀者使用XHTML1 0Transitional XHTML1 0過渡類型 這樣設計者可以按照XHTML的標準書寫符合Web標準的網(wǎng)頁代碼 同時在一些特殊情況下還可以使用傳統(tǒng)的做法 1 3 3XHTML與HTML的重要區(qū)別 盡管目前瀏覽器都兼容HTML 但是為了使網(wǎng)頁能夠符合標準 設計者應該盡量使用XHTML規(guī)范來編寫代碼 使用中需要注意以下事項 1 在XHTML中標記名稱必須小寫2 在XHTML中屬性名稱必須小寫3 在XHTML中標記必須嚴格嵌套4 在XHTML中標記必須封閉5 在XHTML中即使是空元素的標記也必須封閉6 在XHTML中屬性值用雙引號括起來7 在XHTML中屬性值必須使用完整形式 1 4 X HTML與CSS 為了解決HTML結構標記與表現(xiàn)標記混雜在一起的問題 引入了CSS這個新的規(guī)范來專門負責頁面的表現(xiàn)形式 因此 X HTML與CSS的關系就是 內容結構 與 表現(xiàn)形式 的關系 由 X HTML確定網(wǎng)頁的結構內容 而通過CSS來決定頁面的表現(xiàn)形式 1 4 1CSS標準 CSS CascadingStyleSheet 中文譯為層疊樣式表 它是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內容分離的一種標記性語言 CSS是1996年由W3C審核通過 并且推薦使用的 簡單地說 CSS的引入就是為了使HTML語言更好地適應頁面的美工設計 它以HTML語言為基礎 提供了豐富的格式化功能 如字體 顏色 背景 整體排版等 并且網(wǎng)頁設計者可以針對各種可視化瀏覽器 包括顯示器 打印機 打字機 投影儀 PDA等 來設置不同的樣式風格 CSS的引入隨即引發(fā)了網(wǎng)頁設計一個又一個的新高潮 使用CSS設計的優(yōu)秀頁面層出不窮 1 4 2傳統(tǒng)HTML的缺點 1 維護困難 為了修改某個特殊標記 如上例中的標記 的格式 需要花費很多的時間 尤其對于整個網(wǎng)站而言 后期修改和維護的成本很高 2 標記不足 HTML本身的標記很少 很多標記都是為網(wǎng)頁內容服務的 而關于美工樣式的標記 如文字間距 段落縮進等標記在HTML中很難找到 3 網(wǎng)頁過 胖 由于沒有統(tǒng)一對各種風格樣式進行控制 因此HTML的頁面往往 體積 過大 占用了很多寶貴的帶寬 4 定位困難 在整體布局頁面時 HTML對于各個模塊的位置調整顯得捉襟見肘 過多的其他標記同樣也導致頁面的復雜和后期維護的困難 1 4 3CSS的引入 CSS對于網(wǎng)頁的整體控制較單純的HTML語言有了突破性的進展 并且后期修改和維護都十分方便 不僅如此 CSS還提供了各種豐富的格式控制方法 使得網(wǎng)頁設計者能夠輕松地應對各種頁面效果 這些都將在后續(xù)章節(jié)中逐一介紹 最核心的變化是 原來由HTML同時承擔的 內容 和 表現(xiàn) 雙重任務 現(xiàn)在分離了 內容仍然由HTML負責 而表現(xiàn)形式則是由標記中的CSS代碼負責 1 4 4如何編輯CSS CSS文件與HTML文件一樣 都是純文本文件 因此一般的文字處理軟件都可以對CSS進行編輯 記事本和UltraEdit等最常用的文本編輯工具對CSS的初學者都很有幫助 Dreamweaver代碼模式下同樣對CSS代碼有著非常好的語法著色以及代碼提示功能 對CSS的學習很有幫助 Dreamweaver的代碼模式 1 4 5瀏覽器與CSS 網(wǎng)上的瀏覽器各式各樣 絕大多數(shù)瀏覽器對CSS都有很好的支持 因此設計者往往不用擔心其設計的CSS文件不被瀏覽器所支持 但目前主要的問題在于 各個瀏覽器對CSS很多細節(jié)的處理上存在差異 設計者在一種瀏覽器上設計的CSS效果 在其他瀏覽器上的顯示效果很可能不一樣 就目前主流的兩大瀏覽器IE InternetExplorer 與Firefox而言 在某些細節(jié)的處理上就不盡相同 IE本身在