整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一級標題至六級標題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不同等級的標題標簽對比</title>
</head>
<body>
<h1>頭條號</h1>
<h2>頭條號</h2>
<h3>頭條號</h3>
<h4>頭條號</h4>
<h5>頭條號</h5>
<h6>頭條號</h6>
</body>
</html>天說了CSS字體屬性的大小，font-family, 今天我們來一起學習下字體屬性的字體粗細 font-weight
還是使用昨天的那首詩，讓詩句中的最后一句顯示粗體，看下效果:
可以看到最后一句顯示粗體了，我們來查看下對應的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體粗細和樣式</title>
<style>
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長久，千里共嬋娟。</p>
</body>
</html>
字體粗細中的參數包括: normal | bold | bolder | lighter | number(自定義)
我們來試試lighter和number自定義吧
可以看到紅框的字體都已經設置好了，對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體粗細和樣式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p class="lighter">明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p class="number">我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長久，千里共嬋娟。</p>
</body>
</html>
這里需要記住的一點，number自定義數字后不需要加上px
那么是否可以對標題的字體進行粗細設置呢？
答案是可以的，一起來看下
可以看到標題中的字體變為正常的了，對應的代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體粗細和樣式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
h2 {
font-weight: normal;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p class="lighter">明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p class="number">我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長久，千里共嬋娟。</p>
</body>
</html>
加上了對h2的字體設置
好的，今天就是我們對字體粗細的學習，大家加油，十一馬上就要結束了，88
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>輸出：
其他格式：
<strong>這個文本是加粗的</strong>
<em>這個文本是斜體的</em>
<big>這個文本字體放大</big>
<small>這個文本是縮小的</small>
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目。 |
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
