国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css偽元素

YPHP / 2003人閱讀

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

css中的偽元素

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

:first-line 文字的偽元素 
現(xiàn)在添加一個塊級標(biāo)簽和一個行內(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)在添加一個塊級標(biāo)簽和一個行內(nèi)標(biāo)簽，并設(shè)置它的偽類：
  html:
   我想人類可能會一直耐心維持這個稍微和平的局面，
        但是呢？？？我們現(xiàn)在知道世界上不是只有“中國人”，有無數(shù)個國家，種族。
    
如何證明呢？做點兒家務(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)第一個例子第一行的字體顏色，大小發(fā)生了改變，可是在設(shè)置中沒有對p標(biāo)簽直接設(shè)樣式，而是在p后面了一個：first-line,其實這就是偽類，html中并沒有這個元素，但可以用它設(shè)置第一行文字的特殊樣式，并且對行內(nèi)標(biāo)簽不起作用  
first:letter 也是偽類，也對行內(nèi)標(biāo)簽不起作用，但是它設(shè)置的內(nèi)容與第一個有不同，它是設(shè)置第一個字的特殊樣式。
：before

舉一個例子：






   我是一個小太陽

效果圖：

：after

*{

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




   快給我頒獎吧

效果圖：

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

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

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

   
 
 







效果圖

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116633.html

相關(guān)文章

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

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

    張遷 評論0 收藏0

  • CSS3偽類和偽元素

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

    mozillazg 評論0 收藏0

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

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

    BlackMass 評論0 收藏0

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

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

    Berwin 評論0 收藏0

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

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

    hedzr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<