如何使用CSS3 調節 tab的高度

2022-09-24 05:45:11 字數 936 閱讀 5394

包含大量**的網頁(比如文件或教程)在樣式上面對著無法迴避的挑戰。我們通常使用

元素來顯示**,它們具有瀏覽器所賦予的預設樣式。這些預設樣式往往是:

pre, code pre

這遠不足以解決**展示所獨有的種種挑戰。這其中最大的乙個問題在於,即使 tab 非常適合用來縮排** ① ,但人們在網頁中卻常常有意避開tab。這是因為瀏覽器會把其寬度顯示為 8 個字元!看看下面第乙個圖就可以發現這麼寬的縮排是多麼難看、多麼浪費:這段**甚至已經裝不進這個容器了!

乙個新的 css 屬性 tab-size可以控制這個情況。這個屬性接受乙個數字(表示字元數)或者乙個長度值(這個不那麼實用)。我們通常希望把它設定為 4 (表示 4 個字元的寬度)或

2 ,後者是最近更為流行的縮排尺寸。

html主體部分:

// default tab size

while (true)

}

// tab-size: 2;

while (true)

}

// tab-size: 4;

while (true)

}

// tab-size: 0;

while (true)

}

css

pre pre:nth-of-type(2) pre:nth-of-type(3) pre:nth-of-type(4) code
最後效果

如何使用 CSS3 偽類

在 這些新的 css3 偽類之前,先簡要回顧追溯一下這些在 web 應用中常常被誤解的 css 選擇器。在 1996 年,當 css1 的規範完成後,一些偽類選擇器已被囊括在內,其中許多你幾乎每天都在使用。例如 這些狀態都可以被應用到某個元素,通常是以 a 偽類名 css2 來了和 lang 新偽類...

如何使用 CSS3 新增投影

本主題將向你介紹如何使用 windows internet explorer 9 和 cascading style sheets,level 3 css3 向布局元素的外部或內部新增投影。你甚至可以為使用 internet explorer 9 中新提供的圓角支援所建立的圓角曲線新增陰影。本主題包...

CSS 3 漸變的使用

css3 漸變 gradients 可以讓您在兩個或多個指定的顏色之間顯示平穩的過渡。css3 定義了兩種型別的漸變 gradients 為了建立乙個線性漸變,您必須至少定義兩種顏色結點。顏色結點即您想要呈現平穩過渡的顏色。同時,您也可以設定乙個起點和乙個方向 或乙個角度 div 第乙個引數表示線性...