成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css偽元素

xiaodao / 704人閱讀

摘要：中的偽元素什么是偽元素可以先看一下幾個(gè)小例子文字的偽元素現(xiàn)在添加一個(gè)塊級(jí)標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類字體間距效果如下文字的偽元素現(xiàn)在添加一個(gè)塊級(jí)標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類我想人類可能會(huì)一直耐心維持這個(gè)稍微和平的

css中的偽元素

什么是偽元素？
可以先看一下幾個(gè)小例子：

:first-line 文字的偽元素 
現(xiàn)在添加一個(gè)塊級(jí)標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類：


 css:
  p:first-line{
      font-size: 20px;
      color:aquamarine;
      word-spacing: 20px;  /*字體間距*/
  }
  span::first-line{
      font-size: 200px;
      color:red;
      word-spacing: 20px;
  }
     



效果如下:

:first-letter 文字的偽元素 
現(xiàn)在添加一個(gè)塊級(jí)標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類：
  html:
   我想人類可能會(huì)一直耐心維持這個(gè)稍微和平的局面，
        但是呢？？？我們現(xiàn)在知道世界上不是只有“中國人”，有無數(shù)個(gè)國家，種族。
    
如何證明呢？做點(diǎn)兒家務(wù)活？不行，5歲小孩也能做。
    媽媽的單位在頤和園附近，我家住在公主墳，這段路程約莫有20里，是夠遠(yuǎn)的！

  css:
  p:first-letter{
      font-size: 35px;
      color:aquamarine;
  }
  span::first-letter{
      font-size: 50px;
      color:red;
  }

效果如下:
小結(jié) 
看完了這兩例子，你們可以發(fā)現(xiàn)第一個(gè)例子第一行的字體顏色，大小發(fā)生了改變，可是在設(shè)置中沒有對(duì)p標(biāo)簽直接設(shè)樣式，而是在p后面了一個(gè)：first-line,其實(shí)這就是偽類，html中并沒有這個(gè)元素，但可以用它設(shè)置第一行文字的特殊樣式，并且對(duì)行內(nèi)標(biāo)簽不起作用  
first:letter 也是偽類，也對(duì)行內(nèi)標(biāo)簽不起作用，但是它設(shè)置的內(nèi)容與第一個(gè)有不同，它是設(shè)置第一個(gè)字的特殊樣式。
：before

舉一個(gè)例子：






   我是一個(gè)小太陽

效果圖：

：after

*{

        margin: 0;
       padding: 0;
    }
  .main{
     width: 300px;
     height:60px;
     margin: 20px auto ;
     position: relative;
  }
  span:after{
     content: url("./img/1.gif");
  }




   快給我頒獎(jiǎng)吧

效果圖：

小結(jié) 
看完了前兩個(gè)，再看第三個(gè)和第四個(gè)你會(huì)發(fā)現(xiàn)，前兩個(gè)是對(duì)文字的偽類，而第三個(gè)和第四個(gè)是它那一塊偽類，它對(duì)行級(jí)標(biāo)簽也起作用   
在上面的兩個(gè)例子中可以看到  
：before    在元素之前添加內(nèi)容

：after 在元素之后添加內(nèi)容
：before 和 ：after 不僅可以在前面或后面添加內(nèi)容，還可以畫一些小圖標(biāo)

以下是我用 ：before 畫的一個(gè)簡易的放大鏡

   
 
 







效果圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112643.html

相關(guān)文章

  • 我終于理解了偽類和偽元素

    摘要：偽類和偽元素，對(duì)于絕大多數(shù)同學(xué)來說，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間的區(qū)別，以致于混淆概念。除了上面這個(gè)本質(zhì)區(qū)別以外，在中，偽類用單冒號(hào)表示而偽元素用雙冒號(hào)表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對(duì)于絕大多數(shù)同學(xué)來說，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間...

    張遷 評(píng)論0 收藏0

  • CSS3偽類和偽元素

    作為一個(gè)CSS3初學(xué)不久者來說，很容易混淆單冒號(hào)（:）和雙冒號(hào)（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因?yàn)閮烧呖雌饋硖嘞窳?，就像孿生兄弟。但實(shí)際上，他們的區(qū)別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號(hào)（:）偽類和雙冒號(hào)（::）偽元素有什么相同和不同點(diǎn)（另外在CSS2中單冒號(hào): 也叫做偽對(duì)象，具體可看看http://www.mb5u.com/tool/cs...

    mozillazg 評(píng)論0 收藏0

  • 偽元素 ::after 和 ::before 應(yīng)該這么用（一）

    摘要：偽元素被當(dāng)做的樣式來進(jìn)行展現(xiàn)，用法和普通的元素用法是一樣的。中的偽元素使用個(gè)冒號(hào)，在中，為了區(qū)分偽類和偽元素，規(guī)定偽元素使用個(gè)冒號(hào)。偽元素的特點(diǎn)優(yōu)點(diǎn)不占用節(jié)點(diǎn)，減少節(jié)點(diǎn)數(shù)。不僅塊級(jí)元素可以設(shè)置偽元素，大部分行級(jí)元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時(shí)候，偽元素可以通過 css 給 HTML 添加一個(gè)元素（叫標(biāo)簽也行），這個(gè)元素在文檔樹中是找不到的。偽元素被當(dāng)做 CSS ...

    BlackMass 評(píng)論0 收藏0

  • 談?wù)?em>css偽類與偽元素

    摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素?？梢酝ㄟ^對(duì)父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

    Berwin 評(píng)論0 收藏0

  • 談?wù)?em>css偽類與偽元素

    摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素。可以通過對(duì)父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

    hedzr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

xiaodao

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<