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小時內與您取得聯系。