資訊專欄INFORMATION COLUMN
摘要：要配合和屬性使用。，給同級(jí)元素增加計(jì)數(shù)器用于標(biāo)識(shí)自增計(jì)數(shù)器的作用范圍，為自定義名稱，為起始編號(hào)默認(rèn)為。
**單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素，不過(guò)瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫(xiě)法，
比如:first-line、:first-letter、:before、:after等，單冒號(hào)(:)兼容性更好**
div::after{
content: "普通字符串";
content: attr(父元素的html屬性名稱);
content: url(圖片、音頻、視頻等資源的url);
/* 使用unicode字符集，采用4位16進(jìn)制編碼，但不同的瀏覽器顯示存在差異，而且移動(dòng)端識(shí)別度更差*/
content: "21e0";
/* content的多個(gè)值可以任意組合，各部分通過(guò)空格分隔 */
content: """ attr(title) """;
/* 自增計(jì)數(shù)器，用于插入數(shù)字/字母/羅馬數(shù)字編號(hào) */
content: counter(, );
/* 以父附屬元素的qutoes值作為content的值*/
content: open-quote | close-quote | no-open-quote | no-close-quote;
}
插入純文字
content:"string"，或content:none不插入內(nèi)容
h1::after{
content:"h1后插入內(nèi)容"
}
h2::after{
content:none
}
字符集
插入圖片13900001390
.phoneNumber::before{ content:"260E"; font-size: 16px; }
content屬性也可以直接在元素前/后插入圖片
h3::after{
content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}
插入元素的屬性值
content屬性可以直接利用attr獲取元素的屬性，將其插入到對(duì)應(yīng)位置。
這是鏈接 a:after{ content:attr(href); }計(jì)數(shù)器
counter 調(diào)用計(jì)數(shù)器，可以不使用列表元素實(shí)現(xiàn)序號(hào)功能。
counter 要配合 counter-increment 和 counter-reset屬性使用。
content: counter(, ); : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
counter-reset: [
用于標(biāo)識(shí)自增計(jì)數(shù)器的作用范圍，
counter-increment: [
用于標(biāo)識(shí)計(jì)數(shù)器與實(shí)際關(guān)聯(lián)的范圍，
qutoes大標(biāo)題
中標(biāo)題
小標(biāo)題
小標(biāo)題
中標(biāo)題
小標(biāo)題
小標(biāo)題
大標(biāo)題
中標(biāo)題
小標(biāo)題
小標(biāo)題
中標(biāo)題
小標(biāo)題
小標(biāo)題
h1::before{ content:counter(h1)"."; } h1{ counter-increment:h1; counter-reset:h2; } h2::before{ content:counter(h1) "-" counter(h2); } h2{ counter-increment:h2; counter-reset:h3; margin-left:40px; } h3::before{ content:counter(h1) "-" counter(h2) "-" counter(h3); } h3{ counter-increment:h3; margin-left:80px; }
大標(biāo)題
h1{ quotes:"(" ")"; /*利用元素的quotes屬性指定文字符號(hào)*/ } h1::before{ content:open-quote; } h1::after{ content:close-quote; }
中標(biāo)題
h2{ quotes:""" """; /*添加雙引號(hào)要轉(zhuǎn)義*/ } h2::before{ content:open-quote; } h2::after{ content:close-quote; }
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117232.html
摘要：一無(wú)繼承性的屬性規(guī)定元素應(yīng)該生成的框的類型文本屬性垂直文本對(duì)齊規(guī)定添加到文本的裝飾文本陰影效果空白符的處理設(shè)置文本的方向盒子模型的屬性，，，，，，，，，，，，，，，，，，，，，，，，，背景屬性一.無(wú)繼承性的屬性 1.display：規(guī)定元素應(yīng)該生成的框的類型 2.文本屬性：vertical-align：垂直文本對(duì)齊 text-decoration：規(guī)定添加到文本的裝飾 ...
摘要：水平居中水平居中沒(méi)有什么好說(shuō)的啦，對(duì)于行內(nèi)元素使用對(duì)于塊級(jí)元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對(duì)居中絕對(duì)定位已知寬高負(fù)要考慮兼容性浮動(dòng)元素垂直居中父元素 水平居中 水平居中沒(méi)有什么好說(shuō)的啦，對(duì)于行內(nèi)元素使用text-align;對(duì)于塊級(jí)元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）; 垂直居中...
摘要：由于近期的項(xiàng)目中出現(xiàn)了不規(guī)則的邊框和圖形，所以重新溫習(xí)一下的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗(yàn)更佳，關(guān)鍵一點(diǎn)是更加有趣以下幾個(gè)例子主要是運(yùn)用了中偽元素等屬性來(lái)完成的，我們先了解下它們的基本原理。由于近期的項(xiàng)目中出現(xiàn)了不規(guī)則的邊框和圖形， 所以重新溫習(xí)一下CSS3的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗(yàn)更佳，關(guān)鍵一點(diǎn)是更加有趣！ 以下幾個(gè)例子主要是運(yùn)用了css3中b...
摘要：，，層疊樣式表，請(qǐng)留意層疊概念。為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫(xiě)法。常見(jiàn)偽類。常見(jiàn)偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。CSS，cascading style sheet，層疊樣式表，請(qǐng)留意層疊概念。 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫(xiě)法。 常見(jiàn)偽類——:hover,:link,:active,:targ...
閱讀 1076·2021-10-14 09:42
閱讀 1368·2021-09-22 15:11
閱讀 3285·2019-08-30 15:56
閱讀 1243·2019-08-30 15:55
閱讀 3612·2019-08-30 15:55
閱讀 888·2019-08-30 15:44
閱讀 2027·2019-08-29 17:17
閱讀 2070·2019-08-29 15:37
