一，內容生成器：content

? ? ? 補充before和after偽類選擇器：

? ? ? 1）:將內容添加到某個選擇器定義的單個或者多個元素的每一個實例之前或者之后

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

? ? ? content的作用：

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

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

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

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

?? ? 常用的值：url：添加圖像；

? ? ? ? ? ? ? 文本；

? ? ? ? ? ? ? 計數器：？

二，計數器：（引導語，大家之前如果想實現給無序列表前面加序號怎么處理？？？使用list-style-type：的decimal值。現在呢，咱們要get一個新技能用計數器counter-reset屬性實現和它相同的效果）

?? 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:

?? ? ? <h1>1111</h1>

?? ? ? <h1>2222</h1>

?? ? ? <h1>3333</h1>

?? ? ? CSS:

?? ? ? body{

? ? ? ? ? ? counter-reset: demo;

? ? ? ? }

?? ? ? ? h1:before{

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

? ? ? ? }

? ? ? ? h1{

?

? ? ? ? ? ? counter-increment: demo;

? ? ? ? }

三，多列：

? ? 1，（引導語：讓文本呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然后換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大屏幕顯示器，頁面設計中需要限制文本的寬度，讓文本按多列呈現，就像報紙上的新聞排版一樣。）

? ? 2，之前換行用什么？？？

?? ? 答：長單詞換行

? ? ? ? word-wrap : normal/break-word;

?? ? ? ? 文本換行

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

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

轉載于:https://www.cnblogs.com/yzybc/p/5663590.html

總結

以上是生活随笔為你收集整理的css内容生成器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。