css2中一些隱藏的進階屬性用法總結

counter-increment

你是否經常希望你可以讓一個有序列表或一篇文章的所有標題自動編號？不幸的是，目前尚未有CSS3屬性支援。但是在CSS 2.1中，counter-increment 提供了一個解決方案。這就意味著它已經出現好些年了，而且在IE8中就已經支援了。

配合:before 偽元素和content 屬性，counter-increment可以為所有的HTML標籤新增自動的編號。即便是嵌套的編碼也是支援的。

範例

要為標題編碼，先將計算器重設一下:

   body {counter-reset: thecounter}

下面的樣式讓每一個4a249f0d628e2318394fd9b75b4636b1標題都有一個」Section」的前綴，然後其後面的數字自動的遞增1(這是預設的，可以省略掉)，這裡thecounter是計算器的名稱:

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}

範例

對於一個嵌套編碼的列表，重新設計計數器，然後關掉c34106e0b4e09414b63b2ea253ff83d6的自動編碼，因為它是無嵌套的:

ol {
counter-reset: section;
list-style-type: none;
}

然後，每個25edfb22a4f469ecb59f1190150159c6設定為自動編號，分割符號是一個點(.)，後面跟著一個空格

li:before {
counter-increment: section;
content: counters(section,".")"";
}

HTML程式碼：

<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 1.1 -->
<li>item</li> <!-- 1.2 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<ol>

瀏覽器支援: CSS 2.1.，所有的現代瀏覽器，IE 7+.

#quotes

你會因為你的CMS不知道如何正確轉換引用符號而糾結麼？那就開始使用quotes屬性吧。這樣你就可以自訂任何符號了。然後你就可以用:before和:after偽元素為任何期望的元素指定引號了，悲催的是，webkit瀏覽器不支援這個屬性－經測試，chrome 11已經開始支援這個屬性了（之前的版本沒有測試）。

範例

前面的兩個符號決定第一級引用內容的引號，後面的兩個用於二級引用，以此類推：

q {
quotes: '«' '»' "‹" "›";
}

下面兩行用來指定引號：

q:before {content: open-quote}
q:after {content: close-quote}

這樣，e388a4556c0f65e1904146cc1a846bee1244aa79a84dea840d8e55c52dc97869This is a very 1244aa79a84dea840d8e55c52dc97869nice9c3e8ae475e7f023c5ba43842c1b434e quote.9c3e8ae475e7f023c5ba43842c1b434e0cba36f12cf561cef14ffa62bcdafa2c看起來將會是醬紫的：
«This is a very ‹nice› quote.»

瀏覽器支援: CSS 2.1.,除了WebKit，IE 7和IE6的所有現代瀏覽器。不過chrome是支援的。 。 。

問題：要直接的新增符號，CSS文件必須設定為UTF-8嗎？這是一個很糾結的問題。遺憾的是，我不能給一個明確的答案。我的經驗是，不必要設定什麼特定的字元集，然後utf-8字元集可能會出錯，因為它顯示錯掉的字元(例如”»”)。而是用iso-8859-1 字元集，一切就都是正常的。

W3C這樣描述：「由於上個例子中由'quotes'定義的引號方便的定位在電腦鍵盤上，高品質的字元則需要不同的10646字元集。」

#你或許聽過但是沒有記住的CSS3屬性

接近尾聲，讓我們重溫一些不太流行的以及不像border-radius和box-shadow那樣被廣泛需求的CSS3屬性。

text-overflow

或許你會常常遇到這個問題：某個容器對於其內的文字來說太小了，然後你不得不用javascript來截斷字符串並添加” …”符號以避免文字溢出。

忘掉它吧！採用CSS3和text-overflow: ellipsis，如果文字比它的容器的寬度要長的話，你就可以強製文字以”…”結束它。唯一的要求是設定overflow:hidden。不幸的是，Firefox不支援這個屬性，但似乎會在最近的版本中提供支援。

範例

div {
width: 100px;
text-overflow: ellipsis;
}

瀏覽器支援: CSS 3，所有瀏覽器的最新版本，除了Firefox，IE從IE6開始支持，據說Firefox到6.0也會提供支援的－希望如此吧。

word-wrap

當文字在一個比較窄的容器中時，它的某個部分可能會因為太長而不能正確的換行。例如連結就常常引起問題。如果你不想用overflow: hidden隱藏溢出的文字，那麼你就可以設定 word-wrap 為break-word，它可以讓字串在到達容器的寬度限制時換行。

範例

div {
width: 50px;
word-wrap: break-word;
}

瀏覽器支援: CSS 3，所有現代瀏覽器。

resize

如果你在使用Firefox或Chrome，那麼你肯定注意到了文字方塊的右下角預設有個小的手柄，它可以讓你調整它們的大小。這個標準的行為由CSS3 屬性 resize: both實作。

但是它並不僅限於textarea。它可以用於所有的HTML元素。 horizo​​ntal 和 vertical 值用於控制調整水平方向還是垂直方向。

請注意：對於display:block元素，如果設定了overflow:visible，resize屬性將會無效(這一點原文描述不詳－by 神飛)。

瀏覽器支援: CSS3, 除了Opera和IE以為的其它最新的瀏覽器。

background-attachment

##

当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。

浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

text-rendering

随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。

浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

transform: rotateX/transform: rotateY

如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

示例

如果你鼠标经过这个元素，它将会旋转180°，倒转过来:

div:hover {
transform: rotateY(180deg);
}

小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

以上是css2中一些隱藏的進階屬性用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！