整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web開發學習筆記(21)-CSS(8)字體/鏈接/列表

          1)字體的屬性

          • font 屬性
          • font-family 屬性
          • font-size 屬性
          • font-weight 屬性
          • font-style 屬性

          字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示:

          屬 性

          可 取 值

          描 述

          font

          font-style、font-variant、font-weight、font-size(或 line-height)、font-family

          在一個聲明中設置所有的字體屬性

          font-family

          字體名稱、inherit

          設置字體類型

          font-size

          xx-small、x-small、small、medium(默認)、large、x-large、xx-large smaller、larger length、%、inherit

          設置字體大小

          font-weight

          normal(默認)、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold)

          設置字體粗細

          font-style

          normal、italic、oblique、inherit

          設置字體風格

          例子,

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
              <style>
                h3 {
                  font-size: 20px;
                  font-family: 隸書;
                  line-height: 28px;
                }
                span {
                  font: italic 16px 華文彩云;
                }
              </style>
            </head>
            <body>
              <h3>Web 前端技術</h3>
              <span
                >在當今社會中,Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
                系統,就必須掌握 Web 前端技術。</span
              >
            </body>
          </html>

          顯示為,

          (2)CSS 中鏈接標簽可用的偽類:

          • a:link
          • a:hover
          • a:active
          • a:visited

          CSS 中,偽類是添加到選擇器的關鍵字,給指定元素設置一些特殊狀態,我們以 : 開頭。

          鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。

          狀態

          效果

          a:link

          普通的、未被訪問的鏈接。

          a:hover

          鼠標指針位于鏈接的上方。

          a:active

          鏈接被單擊的時刻。

          a:visited

          用戶已訪問的鏈接。

          針對超鏈接的上述四種狀態設置樣式規則,能起到美化超鏈接的作用。例如,為了完成下對超鏈接的顯示要求,編寫的 CSS 樣式代碼如下。

          狀 態

          顏 色

          背 景 色

          文 本 修 飾

          未訪問

          藍色

          無下畫線

          鼠標移到

          黑色

          #DDDDDD

          下畫線

          正單擊

          紅色

          #AAAAAA

          刪除線

          已訪問

          綠色

          無下畫線

          對于超鏈接的偽類,我們推薦的使用順序是::link - :visited - :hover - :active。

          例子,

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
              <style>
                * {
                  text-decoration: none;
                }
                a:link {
                  color: red;
                }
                a:visited {
                  color: blue;
                }
                a:hover {
                  color: green;
                }
                a:active {
                  color: yellow;
                }
              </style>
            </head>
            <body>
              <a href="#">這是一個鏈接</a>
            </body>
          </html>
          

          顯示為,

          為什么要按照這樣的順序來使用呢? 調整幾個偽類的順序,看看會發生什么。

          我們把 a:link 放到最后,效果如下:

          從圖中可以發現其中的樣式屬性都被覆蓋了。

          (3)列表相關的樣式屬性:

          • list-style 屬性
          • list-style-image 屬性
          • list-style-position 屬性
          • list-style-type 屬性

          屬 性

          可 取 值

          描 述

          list-style

          list-style-type、list-style-position、list-style-image

          在一個聲明中設置所有的列表屬性

          list-style-image

          URL、none

          設置圖像為列表項標志

          list-style-position

          inside、outside、inherit

          設置列表中列表項標志的位置

          list-style-type

          disc(默認)、circle、square、decimal 等

          設置列表項標志的類型

          例子,

          wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

          設置字體樣式的基本標簽是<font></font>,被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中,<font></font>容易被多重嵌套,如<font 屬性1=值1><font 屬性2=值2>文本</font></font>。還有一種情況是標簽嵌套錯位,如<font><p>文本</font></p>。為了規范代碼的編寫,避免不必要的錯誤,讀者在初學時一定要謹慎。

          2、設置文字的顏色 color 是標簽的屬性之一,用于設置文字顏色。color是<font></font>標簽的屬性之一,用于設置文字顏色。例子如:淺紅色文字:<font color="#dd0000">51UM博客即湯湯個人博客網站,是一個和草根站長們一起學習分享網站SEO優化技術、web前端開發為主的個人博客網站。</font>

          3、設置文字的尺寸 size 也是標簽的屬性,用于設置文字大小。size 的值為1-7, 默認為3。我們可以 size 屬性值之前加上“+”“-”字符,來指定相對于字 、 號初始值的增量或減量。例子如: size為1:<font size="-2">HTML學習</font>

          4、使文字傾斜,用雙標簽<i></i>可使被作用文字傾斜,達到特殊的效果,例如文章的日期。<em></em>被稱為強調標簽,也是斜體,目前使用比<i></i>標簽更頻繁,其編寫方法如下:

          <i>這是斜體文字</i>

          <em>這也是斜體文字</em>

          5、 使文字加粗,用雙標簽<b></b>可使被作用文字加粗,是文字更加醒目,例如文章的標題部分。<strong></strong>被稱為特別強調標簽,也是文字加粗,目前使用比<b></b>標簽更頻繁,其編寫方法如下:

          <b>這是粗體文字</b>

          <strong>這也是粗體文字</strong>

          除注明外的文章,均為來源:湯久生博客(QQ:1917843637),轉載請保留本文地址,謝謝!

          、成品效果

          2、源碼:利用 網頁抬頭、標題標簽、段落標簽、水平線、換行、字體加粗

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <!--網頁抬頭-->

          <title>中央氣象局</title>

          </head>

          <body>

          <!--大標題-->

          <h2>中央氣象臺發布暴雨藍色預警 北京地區局部地區有大雨</h2>

          <p>

          <!-- 二標題 -->

          <h5>2021-08-07 21:00 來源:中國新聞網</h5>

          <hr>

          <!-- 三標題 -->

          <h4>(原標題:中央氣象臺發布暴雨藍色預警)</h4>

          <!-- 四標題 -->

          <h4>中新網8月07日電 中央氣象臺8月07日發布暴雨藍色預警!</h4>

          <!--正文 ↓-->

          <p>

          <strong>北京市氣象臺7日6時發布北京地區天氣預報:</strong>今天白天晴間多云,北轉南風二三級,

          <em>最高氣溫33℃;夜間晴轉多云,</em>南轉北風一二級,最低氣溫23℃。今日是立秋節氣。

          雙休日氣溫較高,濕度大,體感悶熱,戶外注意防暑降溫勤補水。<ins>地質災害風險較高,

          請避免前往河道、山區游玩。</ins>周日夜間將有雷陣雨天氣,請及時關注臨近預報。

          </body>

          </html>


          主站蜘蛛池模板: 亚洲AV噜噜一区二区三区| 国产伦精品一区二区免费| 99精品一区二区免费视频| 亚洲一区视频在线播放| 国产综合一区二区在线观看| 精品国产免费观看一区| 久久久精品人妻一区二区三区| 人妻av综合天堂一区| 农村人乱弄一区二区| 波多野结衣一区在线观看| 亚洲丰满熟女一区二区v| 国产一区二区三区高清在线观看| 伊人色综合视频一区二区三区| 中文字幕一区二区三区四区| 亚洲Av无码国产一区二区| 日本不卡一区二区三区视频| 一区二区三区四区无限乱码| 亚洲AV成人精品日韩一区| 鲁丝片一区二区三区免费| 伊人久久大香线蕉AV一区二区| 三上悠亚精品一区二区久久| 狠狠爱无码一区二区三区| 精品国产乱码一区二区三区| 丝袜无码一区二区三区| 波多野结衣一区二区免费视频| 日韩人妻不卡一区二区三区| 夜夜爽一区二区三区精品| 波多野结衣电影区一区二区三区 | 中文字幕日韩精品一区二区三区 | 精品国产一区二区三区无码| 精品aⅴ一区二区三区| 精品免费AV一区二区三区| 国产精品成人99一区无码 | 日本高清不卡一区| 国产在线精品一区免费香蕉 | 精品国产一区二区三区在线| 亚洲日本va一区二区三区| 麻豆高清免费国产一区| 精品一区二区三区在线观看视频| 日韩人妻一区二区三区蜜桃视频 | 丰满人妻一区二区三区视频|