|
|
|
|
|
在HTML里,h1、h2、h3常常用作標(biāo)題、副標(biāo)題、小標(biāo)題的標(biāo)簽。為了讓標(biāo)題樣式好看,我們會對h1、h2、h3的樣式設(shè)置一番。本文提供一款漂亮的 h1 h2 h3 標(biāo)題CSS樣式,這個樣式已被很多網(wǎng)站使用。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*標(biāo)題h1 h2 h3樣式*/
#content {
color: black;
font: 0.875em/1.5em"微軟雅黑", "PTSans", "Arial", sans-serif;
font-size: 16px;
}
#content h1,h2,h3 {
width:90%;
}
#content h1 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微軟雅黑", "宋體", "黑體", Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 8px 5px;
text-shadow: 2px 2px 3px #222222;
}
#content h2 {
background: #2B6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微軟雅黑", "宋體", "黑體", Arial;
font-size: 15px;
font-weight: bold;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}
#content h3 {
background: #5B9600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微軟雅黑", "宋體", "黑體", Arial;
font-size: 13px;
font-weight: bold;
height: 24px;
line-height: 20px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}
</style>
</head>
<body>
<div id="content">
<h1>標(biāo)題</h1>
<h2>副標(biāo)題</h2>
<h3>小標(biāo)題</h3>
</div>
</body>
</html>
代碼解釋
1、#content
是div
容器。
2、<h1></h1>
、<h2></h2>
、<h3></h3>
是標(biāo)題標(biāo)簽。
1、background
設(shè)置背景顏色。
2、border-radius
設(shè)置邊角。
3、box-shadow
設(shè)置盒子陰影。
4、text-shadow
設(shè)置文字陰影。
5、font-size
設(shè)置文字大小。
CSS各個樣式屬性都很常見,其他的就不用多做解釋了。
相關(guān)文章