12CSS与JavaScript-麻辣学园.PDFVIP

1 第 1 2 章 CSS 與 JavaScript 12-1 宣告CSS 3 12-2 使用CSS 7 12-2-1 標準用法8 12-2-2 進階用法10 12-2-3 樣式宣告衝突時的優先順序 14 12-3 動態樣式 16 12-3-1 動態變更樣式 17 12-3-2 非標籤內動態變更樣式21 12-4 元件定位 27 12-5 隱藏元件 錯誤! 尚未定義書籤。 Java Script 徹底剖析 2 CSS？這是什麼東東啊？！相信你看到這三個字母時必定與 偶一樣：丈二金剛摸不著頭腦，其實 CSS 的全名是〔Casciding Style Sheet〕，以字面上來解釋就是〔連(串)接樣式表〕，這種說 法不要說是剛接觸的你，連偶都搞不懂！簡單的說，就是網頁的 格式設定啦！ 使用 CSS 有什麼好處呢？ 通吃瀏覽器：CSS 樣式表，不管瀏覽者是使用何種瀏覽器 來觀賞網頁皆能表現出網頁獨特的風格，不單是市場上使用率最 高 的 Microsoft Internet Explorer (IE) 與 Netscape Communicator 瀏覽器支援，甚至許多非主流的瀏覽器，如 Emacs-W3、Arena等，都有支援解析的能力。 網路環保：在大家全力推廣全民上網的同時，出現了一個 嚴重的危機〔網路頻寬不足〕，一方面是因為上網人口的急速增 加造成頻寬不足，但最大的原因是網頁設計者在網頁設計過程中 使用了大量的圖片，圖片檔的體積大 ，在傳輸的過程中消耗了大 量的網路資源，而 CSS 的出現將使這個問題獲得部分疏解，CSS 可使用單純的文字來達到與圖片相同的表現效果！也就是說：一 段簡短的文字就可以取代體積龐大的 圖片！不但傳輸速度加 快，同時也獲得與圖片相同的視覺效果。 特立獨行的風格：一個人氣旺盛的網站之所以吸引人就 是因為擁有獨一無二的風格！舉例來說：在 CSS 樣式表出現之 前 ， 幾 乎 所 有 網 頁 中 的 超 鏈 結 文 字 都 會 加 上 底 線 (Under Java Script 徹底剖析 第 12 章 CSS 與 JavaScript 3 Line) ，而且並無特色變化，如果加上 CSS 語法那可就大大不 同啦！下方的兩個超鏈結文字樣式，你喜歡哪一個？ 網頁維護容易：為了維持我們特立獨行的網站風格，同 時也為了維持網頁的一致性，我們可以建立一個獨立的 CSS 樣 式表檔案，讓我們建立的每一個網頁樣式都能參照此一樣式檔 案，當此一樣式檔案內容改變後，所有有參照此一樣式檔案的網 頁外觀也就會全部跟著改觀了，因此我們不必一一的修改各個網 頁來達到網站風格的一致性，如果你維護的網頁只有幾頁，或許 並不會感受到它的便利性，如果是上百頁甚至數百頁，你就會體 會到它所帶來的便利性啦！ 12-1 宣告 CSS 要宣告 CSS 樣式表首先你必須具備有 HTML 網頁語法的基 礎！也就是你必須了解網頁原始碼中標籤的意義，在此我們假設 Java Script 徹底剖析 4 你已經