• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:綠色安全純凈官方版,體驗當今速度最快的瀏覽器!

      CSS中font-weight屬性怎樣運用

      時間:2018-12-24作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      使用CSS的font-weight屬性可以設置文字的粗細,如果你想讓文字更加的突出可以使用CSS的font-weight屬性讓文字加粗,這樣的話就會比較顯眼了,所以,接下來的這篇文章我們就來給大家介紹一下CSS中font-weight屬性的用法。

      font-weight

      我們下來準備一個HTML代碼

      代碼如下

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="sample.css">
      </head>
      <body>
      <p class="sample1">加粗ABCabc123</p>
      <p class="sample2">加粗ABCabc123</p>
      </body>
      </html>

      然后我們在CSS中應用font-weight屬性

      font-weight屬性的使用方法

      我們先來看最基本的屬性值normal和bold

      p.sample1 {font-weight:normal; }
      p.sample2 {font-weight:bold; }

      normal是默認值,初始值被設定為這個。設置bold值字體會變粗

      在瀏覽器中顯示效果如下

      font-weight

      下面我們來看看用數字指定文字的粗細

      我們先來將上述HTML代碼更改一下

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="sample.css">
      </head>
      <body>
      <p class="sample1">加粗ABCabc123</p>
      <p class="sample2">加粗ABCabc123</p>
      <p class="sample3">加粗ABCabc123</p>
      </body>
      </html>

      CSS代碼如下

      p.sample1 {font-weight:200; }
      p.sample2 {font-weight:400; }
      p.sample3 {font-weight:800; }

      在數值中指定的種類有100 / 200 / 300 / 400 / 500 / 600 / 600 / 600 / 800 / 900的9個階段,實際上在瀏覽器中只設定了兩種,在頁面上只顯示了最下面的800。(在值700以上的情況下和bold一樣的顯示)

      font-weight

      最后,我們來看一下bolder和lighter

      我們來看具體的例子

      HTML代碼與上述相同

      CSS代碼如下

      body {font-weight:bold; }
      p.sample1 {font-weight:inherit; }
      p.sample2 {font-weight:bolder; }
      p.sample3 {font-weight:lighter; }

      在瀏覽器上顯示效果如下

      2345截圖20181210162926.png

      第一行文字繼承了父元素,所以顯示加粗

      第二行文字設置為bolder表示比父元素粗,所以與第一行元素一樣。

      第三行被設置為比父元素的bold更細,變成了普通的粗細。

      以上就是CSS中font-weight屬性怎么使用的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。






      關鍵詞:CSS中font-weight屬性怎樣運用




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产