整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1）字體的屬性
字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
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 中鏈接標簽可用的偽類：
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-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>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
