Tiêu đề cơ bản
Một số dạng tiêu đề cơ bản, thường dùng, chỉ vài dòng code HTML/CSS nhưng mang lại hiệu quả tốt.
Dạng cơ bản
Dạng tiêu đề cơ bản với font-weight: bold và border-bottom
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border-bottom: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản có border left
Dạng tiêu đề cơ bản với font-weight: bold;, border-bottom và border-left.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border-bottom: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
}
.headline span {
border-left: 5px solid #f00;
display: block;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Chúng ta cũng có thể sử dụng một số thuộc tính padding canh chỉnh khoảng cách cho phù hợp với từng design khác nhau:
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border-bottom: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding-bottom: 2px;
}
.headline span {
border-left: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản border-top
Thử tùy chỉnh vị trí của border-left sang border-top để thấy dạng khác của tiêu đề, sử dụng thuộc tính display: block để border được hiển thị tốt hơn:
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border-bottom: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding-bottom: 2px;
}
.headline span {
border-top: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản border-right
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border-bottom: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding-bottom: 2px;
}
.headline span {
border-right: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản border-bottom
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border-bottom: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding-bottom: 2px;
}
.headline span {
border-bottom: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản có border-left và các border xung quanh
Dạng tiêu đề cơ bản với font-weight: bold, border-left và border xung quanh.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding: 2px;
}
.headline span {
border-left: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản có border-top và các border xung quanh
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding: 2px;
}
.headline span {
border-top: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản có border-right và các border xung quanh
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding: 2px;
}
.headline span {
border-right: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Dạng cơ bản có border-bottom và các border xung quanh
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
border: 1px solid #ccc;
font-size: 160%;
font-weight: bold;
padding: 2px;
}
.headline span {
border-bottom: 5px solid #f00;
display: block;
padding-left: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>