什麼是CSS和它在哪裡使用?

什麼是級聯樣式表?

網站由許多獨立的部分組成,包括圖像,文本和各種文檔。 這些文檔不僅包括可以鏈接到各種頁面(如PDF文件)的文檔,還包括用於構建頁面的文檔,例如用於確定頁面結構和CSS(層疊樣式表)文檔的HTML文檔決定頁面的外觀。 本文將深入研究CSS,介紹它是什麼以及它在今天的網站上的用處。

一個CSS歷史課程

CSS最初是在1997年開發的,作為Web開發人員定義他們創建的網頁的外觀的方式。 它的目的是讓網絡專業人士將網站代碼的內容和結構與視覺設計分開 ,這在此之前是不可能的。

結構和样式的分離允許HTML執行更多的功能,它最初基於內容的標記,而不必擔心頁面本身的設計和佈局,通常稱為“外觀和感覺”的頁面。

直到2000年左右,當網頁瀏覽器開始使用這種標記語言的基本字體和顏色以外,CSS才得到普及。 今天,所有的現代瀏覽器都支持CSS級別1,大部分CSS級別2,甚至是CSS級別3的大多數方面。 隨著CSS不斷發展並引入新的樣式,Web瀏覽器開始實現模塊,為這些瀏覽器帶來新的CSS支持,並為網頁設計師提供強大的新樣式工具。

在過去的很多年裡,有些精選的網頁設計師拒絕將CSS用於網站的設計和開發,但這種做法現在幾乎已經從行業中消失了。 CSS現在是網頁設計中廣泛使用的標準,你很難找到今天在這個行業工作的人,他們至少對這種語言沒有基本的了解。

CSS是一個縮寫

如前所述,術語CSS代表“層疊樣式表”。 讓我們稍微分解一下這個短語,以更充分地解釋這些文檔的功能。

“樣式表”一詞是指文檔本身(如HTML,CSS文件實際上只是可以用各種程序編輯的文本文檔)。 樣式表多年來一直用於文檔設計 。 它們是佈局的技術規格,無論是打印還是在線。 印刷設計師長期以來一直使用樣式表來確保他們的設計印刷完全符合他們的規格。 網頁的樣式表具有相同的用途,但還具有附加的功能,即告訴Web瀏覽器如何呈現正在查看的文檔。 今天,CSS樣式表也可以使用媒體查詢來改變頁面查找不同設備和屏幕大小的方式 。 這非常重要,因為它允許根據用於訪問它的屏幕以不同的方式呈現單個HTML文檔。

級聯是“級聯樣式表”這個術語的特殊部分。 Web樣式表旨在通過該表單中的一系列樣式級聯,如瀑布上方的河流。 河中的水沖擊瀑布中的所有岩石,但只有底部的水影響到水流的確切位置。 網站樣式表中的級聯也是如此。

每個網頁至少受到一個樣式表的影響,即使網頁設計師沒有應用任何樣式。 該樣式表是用戶代理樣式表 - 如果沒有提供其他說明,也稱為Web瀏覽器用來顯示頁面的默認樣式。 例如,默認情況下,超鏈接的顏色為藍色,並加下劃線。 這些樣式來自Web瀏覽器的默認樣式表。 但是,如果網頁設計者提供其他說明,瀏覽器將需要知道哪些說明優先。 所有瀏覽器都有自己的默認樣式,但許多默認樣式(如帶藍色下劃線的文本鏈接)均在所有或最主流的瀏覽器和版本中共享。

作為瀏覽器默認的另一個例子,在我的Web瀏覽器中,默認字體是“ Times New Roman ”,大小為16。但是,我訪問的幾乎沒有任何頁面以該字體系列和大小顯示。 這是因為級聯定義了由設計者自己設置的第二個樣式表來重新定義字體大小和系列,並覆蓋了我的Web瀏覽器的默認值。 您為網頁創建的任何樣式表將比瀏覽器的默認樣式具有更多特異性,因此這些默認值僅適用於樣式表不覆蓋它們的情況。 如果您希望鏈接為藍色並加下劃線,則不需要執行任何操作,因為這是默認設置,但如果您網站的CSS文件顯示鏈接應為綠色,則該顏色將覆蓋默認的藍色。 下劃線將保留在此示例中,因為您沒有另行指定。

CSS在哪裡使用?

CSS也可以用來定義在網頁瀏覽器以外的其他媒體上查看網頁的外觀。 例如,您可以創建一個打印樣式表來定義網頁的打印方式。 由於導航按鈕或Web表單等網頁項目在打印頁面上沒有任何用途,因此打印樣式表可用於在打印頁面時“關閉”這些區域。 雖然在許多網站上並不是很常見的做法,但創建打印樣式表的選項是強大且有吸引力的(根據我的經驗 - 大多數網絡專業人員不這麼做只是因為網站的預算範圍並不要求完成此額外工作)。

為什麼CSS很重要?

CSS是網頁設計師可以學習的最強大的工具之一,因為它可以影響網站的整個視覺外觀。 寫得很好的樣式表可以快速更新,並允許網站在屏幕上直觀地更改優先順序,從而向訪問者顯示價值和重點,而不需要對底層HTML標記進行任何更改。

CSS的主要挑戰是需要學習很多東西 - 並且隨著瀏覽器每天都在變化,今天運行良好的東西可能沒有什麼意義,因為新的樣式會被支持,而其他的則會因為某種原因而下降或失寵。

因為CSS可以級聯和組合,並且考慮不同的瀏覽器如何以不同的方式解釋和實現這些指令,所以CSS比純HTML更難以掌握。 CSS在瀏覽器中的變化也是HTML的一種方式。 但是,一旦開始使用CSS,您會發現利用樣式表的強大功能將為您設置網頁佈局和定義外觀提供令人難以置信的靈活性。 一路走來,您將收集過去為您工作的風格和方法的“一攬子技巧”,您將在未來構建新的網頁時再次轉向。

Jennifer Krynin的原創文章。 17/5/17由Jeremy Girard編輯,