第一章 css的初步體驗

時間 2019-11-12

標籤第一章 css 初步體驗欄目 CSS 简体版

原文原文鏈接

一、CSS的概念html

CSS（Cascading Style Sheet）,中文譯爲層疊樣式表，它是用於控制網頁樣式並容許將樣式信息與網頁內容分離的一種標誌性語言。CSS是1996年有W3C審覈經過，而且推薦使用的。簡單的說，CSS的引入就是爲了使得HTML語言可以更好地適應頁面的美工設計。它以HTML語言爲基礎，提供了豐富的格式化功能，如字體、顏色、背景和總體排版等，而且網頁設計者能夠針對各類可視化瀏覽器設置不一樣的樣式風格，包括顯示器、打印機、打字機、投影儀和PDA等。瀏覽器

<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h2>CSS標記</h2>
<p>CSS標記的正文內容從這裏開始</p>
</body>
</html>

全部頁面都是有各類樣式的標記加上標記中間的內容組成的。在瀏覽網頁時，能夠經過瀏覽器中「查看源文件」的選項對頁面的源代碼進行查看，從而瞭解該網頁的組織結構等。框架

在學習製做網頁、學習HTML、CSS和JavaScript等各類語言時，多參考其餘網站的源代碼對快速掌握各類技巧並運用到實際製做中，是很是有好處的。（注：對於使用<frame>製做的網站，在IE7瀏覽器中若是使用菜單欄的「查看--源文件」，能夠查看整個父框架的源代碼。若是在頁面中的某個<frame>裏單擊鼠標右鍵，從彈出的菜單中選擇「查看源文件」命令，則查看的是<frame>對應子頁面的源代碼。）編輯器

二、傳統HTML的缺點工具

在CSS尚未被引入頁面設計以前，傳統的HTML語言要實現美工上的設計是十分麻煩的，若是但願標題變成藍色，並對字體進行相應的設置，則須要引入<font>標記，如佈局

<h2><font color="#0000FF" face="黑體">CSS標記</font></h2>

看上去修改並不很麻煩，而當頁面的內容不只僅只有一段而是整篇文章時就沒有那麼簡單了。須要對每一個標題的<font>標記都進行修改，假若是整個網站，這樣的工做量是沒法讓設計者接受的。
傳統HTML的缺陷遠不止上例中所反映的這一方面，相比CSS爲基礎的頁面設計方法，其所體現的劣勢主要有一下幾點：學習

（1）維護困難。爲了修改某個特殊標記的格式，須要花費不少的時間，尤爲對於整個網站而言，後期修改和維護的成本很高。字體

（2）標記不足。HTML自己的標記十分的少，不少標記都是爲網頁內容服務的，而關於美工樣式的標記，如文字間距、段落縮進等標記在HTML中很難找到。網站

（3）網頁過「胖」。因爲沒有統一對各類風格樣式進行控制，HTML的頁面每每體積過大，佔用掉了不少寶貴的寬帶。spa

（4）定位困難。在總體佈局頁面時，HTML對於各個模塊的位置調整閒的捉襟見肘，過多的<table>標記一樣也致使頁面的複雜和後期維護的困難。

三、CSS的引入

假若引入CSS對<h2>標記進行控制，那麼狀況將徹底不一樣，以下：

<html>
<head>
<title>頁面標題</title>
<style>
<!--
h2{
      font-family:黑體；
       color：blue；
}
-->
</style>
</head>
<body>
<h2>CSS標記1</h2>
<p>CSS標記的正文內容1</p>
<h2>CSS標記2</h2>
<p>CSS標記的正文內容2</p>
<h2>CSS標記3</h2>
<p>CSS標記的正文內容3</p>
<h2>CSS標記4</h2>
<p>CSS標記的正文內容4</p>
</body>
</html>

能夠發如今頁面中的<font>標記徹底消失了，取而代之的是最開始的<style>標記。
CSS對於網頁的總體控制較單純的HTML語言有了突破性的進展，而且後期修改和維護都十分方便。不只如此，CSS還提供各類豐富的格式控制方法，使得頁面設計者可以輕鬆地對應各類頁面效果。

四、如何編輯CSS

CSS文件與HTML文件同樣，都是純文本文件，所以通常的文字處理軟件均可以對CSS進行編輯。

記事本和UltraEdit等最經常使用的文本編輯工具對CSS的初學者尤爲有幫助。在網上也能找到不少CSS的編輯器或在線編輯器。這裏推薦Macromedia Dreamweaver 的純代碼模式。

Dreamweaver這款專業的網頁設計軟件在代碼模式下對HTML、CSS和JavaScript等代碼有着很是好的語法着色以及語法提示功能，而且自帶不少實例，對CSS的學習頗有幫助。

如圖能夠看出，對於CSS代碼，在默認狀況下都採用粉紅色進行語法着色，而HTML代碼中的標記則是藍色，正文內容在默認狀況下爲黑色。

並且對於每行代碼，前面都有行號進行標記，方便對代碼的總體規劃。

不管是CSS代碼仍是HTML代碼，都有很好的語法提示。在編寫具體CSS代碼時，按空格鍵或者回車鍵，均可以觸發語法提示。

當已經選定某個CSS樣式，例如上例中的color樣式，在其冒號後再按空格鍵是，Dreamweaver會彈出新的詳細提示框，讓用戶對相應的CSS的值進行直接選擇。

五、瀏覽器與CSS

網上的瀏覽器各式各樣，絕大多數瀏覽器對CSS都有很好的支持，所以設計者每每不用擔憂起設計的CSS文件不被用戶所支持。但目前主要的問題在與，各個瀏覽器之間對CSS不少細節的處理上存在差別，設計者在一種瀏覽器上設計的CSS效果，在其餘瀏覽器上的顯示效果極可能不同。就目前主流的兩大瀏覽器IE（Internet Explorer）與Firefox而言，在某些細節的處理上就不盡相同。能夠經過對CSS文件各個細節的嚴格編寫，使得各個瀏覽器之間達到基本相同的效果。

（注：一邊編寫HTML和CSS代碼，一邊在兩個不一樣的瀏覽器上進行預覽，及時地調整各個細節，這對深刻掌握CSS也是頗有好處的

Dreamweaver的「視圖」模式只能做爲設計是的參考來使用，絕對不能做爲最終顯示效果的依據，只有瀏覽器中的效果纔是你們所看到的。）