css內容生成器

一，內容生成器：content

補充before和after偽類選擇器：

1）:將內容新增到某個選擇器定義的單個或者多個元素的每乙個例項之前或者之後

2）與before選擇器配合使用（同理大家想下會不會有after？）；

content的作用：

1，作用：在被選元素的內容前面插入內容；

2，用法：使用content屬性指定要插入的內容；

3，可以設定插入內容的樣式；

content的使用作用：對html內容修飾；

常用的值：url：新增影象；

文字；計數器：？

1），counter-reset屬性：

作用：設定某個選擇器出現次數的計數器的值，預設為 0。利用這個屬性可以設定或重置為任何值，可以是正值或負值。如果沒有提供 number，則預設為 0。

2），使用注意點：

如果使用display: none，則無法重置計數器。如果使用visibility: hidden，則可以重置計數器。

3），必須結合counter() 函式和counter-increment 屬性使用

a，counter（）函式：

counter() 函式用於為指定計數器建立計數字串；

寫法：語法為：counter(name) ：name 為計數器的名稱

b，counter-increment 屬性：counter-increment：有三個值：none，id number，inherit（規定應該從父元素繼承 counter-increment 屬性的值）屬性設定某個選取器每次出現的計數器增量。預設增量是 1。

寫法：counter-increment:id number;（id 定義將增加計數的選擇器、id 或 class。

number 定義增量。number 可以是正數、零或者負數。）

demo:

html:

css:

body{

counter-reset: demo;

h1:before{

content: "第" counter(demo)"章" ":";

h1{counter-increment: demo;

三，多列：

2，之前換行用什麼？？？

答：長單詞換行

word-wrap : normal/break-word;

文字換行

word-break : normal/break-all/keep-all;

3，不管想讓一段文字呈多少列顯示，你需要的只是兩個屬性：column-count（列的具體個數）和 column-width（列寬）column-gap（列之間的縫隙間隔寬度）column-rule（規定列之間的中間分割線寬度、樣式和顏色規則）。