Tiêu đề với background-image
Sử dụng background-image cho tiêu đề, là một kỹ thuật đơn giản nhưng sẽ giúp nhiều trong việc làm hấp dẫn hơn cho một tiêu đề.
Background image repeat-x
Dạng tiêu đề với background-image
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
font-size: 160%;
font-weight: bold;
padding: 0 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>
Hiển thị trình duyệt:
Background image repeat-x với border
Dạng tiêu đề với background-image và border
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
border: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding: 5px 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>
Hiển thị trình duyệt:
Thử thêm border-top vào ta sẽ thấy tiêu đề dễ nhìn hơn.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
border: 1px solid #ccc;
border-top: 3px solid #f00;
font-size: 160%;
font-weight: bold;
padding: 5px 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>
Hiển thị trình duyệt:
Với cách sử dụng tiêu đề linh hoạt như trên ta dễ dàng thêm bớt nội dung tiêu đề tùy thích.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
border: 1px solid #ccc;
border-top: 3px solid #f00;
font-size: 160%;
font-weight: bold;
padding: 5px 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2<br />
Đây là dạng tiêu đề rất dài và linh hoạt</h2>
</body>
</html>