Tiêu đề cơ bản

Trở về

  • 1,727

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: boldborder-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-bottomborder-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>

Hiển thị trình duyệt:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.