CSS中first-letter的使用方法

CSS中first-letter的使用方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了靈壽免費建站歡迎大家使用！

使用First-letter可以將樣式應(yīng)用于塊元素的第一個字符，可以用于選取指定選擇器的首字母，那么，我們可以怎么使用CSS中first-letter呢？下面我們就來具體看看first-letter的用法。

以下圖片就是應(yīng)用了“first-letter”的效果

只有第一個字符為彩色且字體大小設(shè)置為300％。

接下來我們就來看看first-letter的具體使用方法

first-letter的寫法如下

p：first-letter{
   / *描述你想要應(yīng)用的CSS樣式* / 
 }

這是由p指定的塊元素。

它指向<p>標簽的p，如果要應(yīng)用<h2>標簽，可以將其更改為h2。

我們來看具體的示例

代碼如下

HTML代碼

<html>
  <head>
    <meta charset="utf-8">
    <title>first-letter</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <p>
    </p>
  </body>
</html>

CSS代碼

sample.css

p:first-letter{
  color:#5bc0de;
  font-size:300%;
}

運行結(jié)果

在瀏覽器上顯示如下所示的效果

CSS中first-letter的使用方法

p后面是“：”（冒號），而不是“.”

如果只是弄錯了這一點就完全不適用了，所以要注意。

而且，如前面所說的，p是塊元素。塊元素指的是<p>標簽的p，如果要將其應(yīng)用于<h2>，將其更改為h2就可以了。

我們在{}中寫下的CSS樣式。也就是說，只要寫一個你最想應(yīng)用于第一個字符的樣式就可以了。

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS中first-letter的使用方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：CSS中first-letter的使用方法
本文鏈接：http://muchs.cn/article4/picoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站設(shè)計公司、軟件開發(fā)、外貿(mào)建站、App設(shè)計、手機網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容