1. 程式人生 > >什麽是CSS

什麽是CSS

link 文本格式 理解 ref 例如 ont 瀏覽器 自動更新 cad

CSS是Cascading Style Sheet的縮寫。譯作”層疊樣式表單“。是用於(增強)控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。使用CSS樣式可以控制許多僅使用HTML無法控制的屬性。HTML是一種標記性語言。當在瀏覽器中打開一個HTML網頁時,瀏覽器將讀取該網頁中的HTML標簽,並根據內置的解析規則將網頁元素呈現出來。css(層疊樣式表)決定瀏覽器將如何描述html元素的表現形式。換而言之,CSS就是描述HTML元素的規則。CSS目前最新版本為CSS3,CSS能夠根據不同使用者的理解能力,簡化或者優化寫法,針對各類人群,有較強的易讀性。

CSS層疊樣式表是一系列格式設置的規則,它們控制網頁內容的外觀。使用CSS設置頁面格式時,可以將內容與表現形式分開。網頁內容(即HTML代碼)駐留在HTML文件自身中,而用於定義代碼表現形式的CSS規則駐留在另一個文件(外部樣式表)或HTML文檔的另一部分(通常為文件頭部分)中。使用CSS可以更加靈活地控制具體的頁面外觀,從精確的布局定位到特定的字體和樣式。

CSS允許控制HTML無法獨自控制的許多屬性。例如,可以為選定的文本指定不同的字體大小和單位(像素、磅值等)。通過CSS可以用像素為單位來設置字體大小,從而可以確保在多個瀏覽器中以更一致的方式處理頁面布局和外觀。除設置文本格式外,還可以使用CSS控制網頁中塊級別元素的格式和定位。例如,可以設置塊級別元素的邊距和邊框,其他文本周圍的浮動文本等。

CSS格式設置規則由選擇器和聲明兩部分組成,其中選擇器是標識格式元素的術語(如p、h1、類名或id),聲明用於定義元素樣式。

CSS的主要優點是提供了便利的更新功能。設計網站時,可以創建一個CSS樣式表文件,然後將網站中的所有網頁都連接到該樣式表文件,這樣很容易為Web站點內的所有網頁提供一致的外觀和風格。當更新某一樣式屬性時,使用該樣式的所有網頁的格式都會自動更新為新樣式,而不必逐頁進行修改。

在實際應用中,一般有以下三種級聯方式。

1. 外聯式
外聯式樣式表中,CSS 代碼作為文件單獨存放,如以 style.css 文件包含所有樣式。在 HTML 中的外部級聯采用 <link> 標記或者 @import 語句來引入。示例代碼如下:

<link rel="stylesheet" href="style.css" type="text/css" /> //link 鏈接
@import url("style.css"); [email protected] 導入

<link> 和 @import 的異同可參考此文:CSS 外部引用中 link 與 @import 的區別。

2. 內聯式
門戶網站的 CSS 代碼通常采用嵌入式,即通常所說的內聯方式 (Inline Style),其使用 <style> 標記將樣式定義為內部塊對象。示例代碼如下:

<style type="text/css">
<!--
body
-->
</style>

內聯 CSS 可以有效減少 HTTP 請求,提升頁面性能,緩解服務器壓力。由於瀏覽器加載完 CSS 才能渲染頁面,因此能防止 CSS 文件無法讀取而造成頁面裸奔的現象。

3. 嵌入式
最初級的 CSS 寫法即把代碼直接添加於所修飾的標記元素。示例代碼如下:

<div style="font-family:Arial,Helvetica,sans-serif;">芒果</div>

這樣做雖然更為直觀,但很大程度上加大了頁面體積,不符合結構與表現分離的設計思想。

總體而言,外聯和內聯各有優點,可綜合實際情況選擇適合的級聯方式。

以上內容部分來自網絡。如有侵權,請告知後立即刪除。

什麽是CSS