css中內容生成器

一,內容生成器:content函數

      補充before和after僞類選擇器:url

      1):將內容添加到某個選擇器定義的單個或者多個元素的每個實例以前或者以後設計

      2)與before選擇器配合使用(同理你們想下會不會有after?);orm

      content的做用:繼承

     1,做用:在被選元素的內容前面插入內容;ci

     2,用法:使用content屬性指定要插入的內容;rem

     3,能夠設置插入內容的樣式;字符串

     content的使用做用:對HTML內容修飾;get

     經常使用的值:url:添加圖像;it

              文本;

              計數器:?

二,計數器:(引導語,你們以前若是想實現給無序列表前面加序號怎麼處理???使用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(規定列之間的中間分割線寬度、樣式和顏色規則)。

相關文章
相關標籤/搜索