Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là phần tử khối (Block Elements) và phần tử nội tuyến (Inline Elements). Vậy phần tử khối (Block Elements) là gì? và phần tử nội tuyến (Inline Elements) là gì? Tôi sẽ viết kỹ trong bài này.
1. Phần tử khối (Block Element) là gì?
1.1 Ví dụ
Như hình trên bạn thấy cặp thẻ <h2></h2> và phần tử nội dung trong nó (nguyenbinh) được gọi là phần tử khối.
Như hình trên bạn thấy cặp thẻ <p></p> và phần tử nội dung trong nó (Tôi tên … nhạc sến.) được gọi là phần tử khối.
Tương tự cặp thẻ <div></div> và phần tử nội dung trong nó được gọi là phần tử khối.
1.2 Định nghĩa
Một phần tử khối (Block Element) luôn luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (chiều rộng của nó trải dài từ trái qua phải).
1.3 Một số thẻ thuộc kiểu phần tử khối
+ <div>
+ <h1> đến <h6>
+ <p>
+ <form>
1.4 Một số đều cần biết về thẻ <div>
Thẻ <div> là một phần tử khối và có thể dùng để chứa các phần tử khác.
Thẻ <div> không có thuộc tính bắt buộc, nhưng cả hai thuộc tính style và class đều phổ biến.
Khi được sử dụng cùng với CSS, thẻ <div> có thể được sử dụng để tạo kiểu các khối nội dung như hình trên. (hình ở mục 1.1)
2. Phần tử nội tuyến (Inline Element) là gì?
2.1 Ví dụ
Như hình trên bạn thấy cặp thẻ <span></span> và phần tử nội dung trong nó (nguyenbinh) được gọi là phần tử nội tuyến.
2.2 Định nghĩa
Một phần tử nội tuyến không bắt đầu trên một dòng mới và chiều rộng của nó phụ thuộc vào chiều rộng phần nội dung của nó.
2.3 Một số thẻ thuộc kiểu phần tử nội tuyến
+ <span>
+ <a>
+ <img>
2.4 Một số đều cần biết về thẻ <span>
Thẻ <span> là một phần tử nội tuyến, nó thường được dùng để chứa văn bản và định dạng cho văn bản.
Thẻ <span> không có thuộc tính bắt buộc, nhưng cả hai thuộc tính style và class đều phổ biến.
Khi được sử dụng cùng với CSS, thẻ <span> có thể được sử dụng để tạo kiểu các phần của văn bản như hình trên. (hình ở mục 2.1)
3. Thuộc tính class
Thuộc tính class có thể dùng cho phần tử khối (Block Elements) và phần tử nội tuyến (Inline Elements)
3.1 Thuộc tính class dùng cho phần tử khối chẳng hạn dùng cho thẻ <div>
Như hình trên ta có 03 phần tử <div> cùng dùng một thuộc tính class với cùng một giá trị.
3.2 Thuộc tính class dùng cho phần tử nội tuyến chẳng hạn dùng cho thẻ <span>
4. Các bài tập
4.1 Bài tập 1
Thêm lớp “cities” vào phần tử <div>
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div>
<h2>Đây là tiêu đề</h2>
<p>Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.</p>
<p>Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.</p>
</div>
</body>
</html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Đây là tiêu đề</h2>
<p>Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.</p>
<p>Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.</p>
</div>
</body>
</html>
4.2 Bài tập 2
Tạo một lớp với tên “binhnet”
Thêm thuộc tính color với giá trị là màu đỏ (red) vào lớp trên.
Cuối cùng thêm lớp “binhnet” vào thẻ <span> và thẻ <p>.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Đây là <span>tiêu đề</span> ta dùng h1</h1> <p>Đây là một đoạn văn bản.</p> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
.binhnet {
color:red;
}
</style>
</head>
<body>
<h1>Đây là <span class="binhnet">tiêu đề</span> ta dùng h1</h1>
<p class="binhnet">Đây là một đoạn văn bản.</p>
</body>
</html>
4.3 Bài tập 3
Tạo một lớp với tên là “binhnet”. Thêm kiểu vào lớp đó như sau:
– Màu nền là màu đen.
– Màu chữ là màu trắng.
– 20 pixels padding và margin.
Thêm lớp “binhnet” vào thẻ <div>.
<!DOCTYPE html> <html> <head> </head> <body> <div> <h2>Đây là tiêu đề</h2> <p>Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.</p> <p>Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.</p> </div> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
.binhnet {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="binhnet">
<h2>Đây là tiêu đề</h2>
<p>Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.Đây là đoạn văn.</p>
<p>Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.Đây là đoạn văn khác.</p>
</div>
</body>
</html>
5. Lời cuối bài
Đến đây là kết thúc bài về phần tử khối (Block Elements) và phần tử nội tuyến (Inline Elements) trong HTML. Qua bài sau tôi sẽ hướng dẫn các bạn cách chèn một khung trang web (iframe) vào trang web.
The post [HTML bài 23] Phần tử khối (Block Elements) và phần tử nội tuyến (Inline Elements) appeared first on Học online.
from WordPress http://ift.tt/2wk34ga
via IFTTT
Không có nhận xét nào:
Đăng nhận xét