HTML là ngôn ngữ cơ bản và quan trọng nhất trong phát triển web, giúp tạo cấu trúc và trình bày nội dung trên các trang web. Trong bài viết này, chúng ta sẽ cùng nhau giải đáp những thắc mắc phổ biến nhất về HTML, đồng thời cung cấp các ví dụ cụ thể về thẻ (tags), thuộc tính (attributes) và các phần tử (elements). Qua đó, bạn sẽ hiểu rõ hơn về cách sử dụng HTML để xây dựng một trang web hoàn chỉnh và hiệu quả.
Tham Khảo Thêm Bài Viết " Bộ Ba Quyền Lực Trong Thế Giới Thiết Kế Web HTML : Thẻ (Tags), Thuộc Tính (Attributes) và Các Phần Tử (Elements) " Theo Link Sau : https://blog.khoz.vn/the-tags-thuoc-tinh-attributes-va-cac-phan-tu-elements-bo-ba-quyen-luc-trong-the-gioi-thiet-ke-web-html-cham-den-trai-tim
I. Hỏi Đáp :
Thiết kế DIV trong CSS là gì? Ứng Dụng?
Trong HTML, thẻ <div> (viết tắt của "division") là một phần tử khối (block-level element) được sử dụng để tạo ra các vùng hoặc nhóm nội dung trên trang web. Thẻ <div> thường được sử dụng như một vùng chứa (container) để bọc các phần tử khác, giúp tổ chức bố cục và áp dụng các kiểu dáng CSS cho nhóm phần tử đó.
CSS và Thiết Kế DIV
Thiết kế <div> trong CSS là quá trình áp dụng các thuộc tính CSS để tạo kiểu dáng, bố cục và hành vi cho các phần tử <div> trên trang web. Bằng cách sử dụng CSS, bạn có thể kiểm soát các đặc tính như kích thước, màu sắc, căn chỉnh, vị trí, lề, đệm, viền, đổ bóng, và thậm chí cả hiệu ứng động của <div>.
Ví Dụ Về Thiết Kế DIV:
<div class="container">
<div class="header">
<h1>Tiêu đề trang</h1>
</div>
<div class="content">
<p>Đây là nội dung chính của trang.</p>
</div>
<div class="footer">
<p>Đây là phần chân trang.</p>
</div>
</div>
/* CSS cho div */
.container {
width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
.header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
border-radius: 8px 8px 0 0;
}
.content {
margin: 20px 0;
}
.footer {
background-color: #ddd;
text-align: center;
padding: 10px 0;
border-radius: 0 0 8px 8px;
}
Ứng Dụng Của Thiết Kế DIV:
Bố cục trang web: Thẻ <div> thường được sử dụng để tạo các phần khác nhau của một trang web, như tiêu đề (header), thanh bên (sidebar), nội dung chính (main content), và chân trang (footer).
Tạo nhóm và vùng chứa: <div> có thể được sử dụng để nhóm các phần tử liên quan lại với nhau, ví dụ như nhóm các biểu mẫu, nhóm các phần tử điều khiển hoặc nhóm các phần tử nội dung.
Thiết kế Responsive: Bằng cách sử dụng CSS Flexbox hoặc Grid kết hợp với <div>, bạn có thể tạo các bố cục linh hoạt mà tự động điều chỉnh kích thước và vị trí của các phần tử dựa trên kích thước màn hình.
Hiển thị nội dung động: <div> là công cụ chính để chứa nội dung động trong các ứng dụng web hiện đại. Bạn có thể sử dụng JavaScript để thêm, bớt, hoặc thay đổi nội dung trong <div>, tạo ra các trải nghiệm người dùng phong phú mà không cần tải lại trang.
Thiết kế cột (column) trong CSS là gì? Ứng Dụng?
Thiết kế cột (column) trong CSS là một phương pháp tổ chức và bố trí nội dung trên trang web theo các cột, giúp tạo ra bố cục trực quan và dễ theo dõi. Việc sắp xếp nội dung thành các cột có thể được thực hiện bằng nhiều cách khác nhau, bao gồm sử dụng Flexbox, CSS Grid, hoặc các thuộc tính cột chuyên biệt (CSS Multi-column Layout).
Các Phương Pháp Thiết Kế Cột (Column) trong CSS
1. Sử dụng Flexbox: Flexbox là một công cụ mạnh mẽ trong CSS để sắp xếp các phần tử theo dạng hàng hoặc cột. Với flex-direction: column;, các phần tử con sẽ được sắp xếp theo chiều dọc (cột).
.container {
display: flex;
flex-direction: column;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 10px;
border: 1px solid #ccc;
}2. Sử dụng CSS Grid: CSS Grid là công cụ linh hoạt và mạnh mẽ nhất để tạo các bố cục lưới (grid). Nó cho phép bạn tạo bố cục với các hàng và cột phức tạp một cách dễ dàng.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightgreen;
padding: 20px;
border: 1px solid #ccc;
}3. Sử dụng Multi-column Layout: CSS Multi-column Layout là một phương pháp cụ thể để chia nội dung thành nhiều cột. Nó được sử dụng phổ biến để định dạng văn bản, bài báo, hoặc nội dung dài thành các cột nhỏ hơn để dễ đọc hơn.
.text-container {
column-count: 3;
column-gap: 20px;
}Ứng Dụng Của Thiết Kế Cột (Column Layout)
- Trang Tin Tức và Blog: Sử dụng thiết kế cột để chia văn bản dài thành nhiều cột giúp người đọc dễ dàng theo dõi nội dung, tương tự như cách bố cục của báo chí truyền thống.
- Bố Cục Giao Diện: Trong các ứng dụng web và trang web, thiết kế cột được sử dụng để tạo bố cục cho các phần tử như sản phẩm, bài viết, hoặc hình ảnh.
- Thiết Kế Responsive: Sử dụng cột giúp dễ dàng tạo ra các thiết kế đáp ứng (responsive) khi màn hình thay đổi kích thước. Ví dụ, trên màn hình lớn, bạn có thể hiển thị nội dung trong nhiều cột, nhưng trên màn hình nhỏ, các cột có thể được sắp xếp lại thành một cột duy nhất.
- Danh Sách và Bảng So Sánh: Các bảng so sánh sản phẩm hoặc danh sách tính năng có thể được thiết kế dễ dàng bằng cách sử dụng cột, giúp người dùng so sánh thông tin một cách trực quan.
Ngoài thiết kế DIV và Column còn có cách nào khác?
Ngoài thiết kế bằng DIV và Column, còn có nhiều phương pháp khác trong CSS để tổ chức bố cục và thiết kế giao diện trên trang web. Dưới đây là một số phương pháp phổ biến:
1. CSS Grid Layout
CSS Grid Layout là một hệ thống bố cục 2D mạnh mẽ và linh hoạt, cho phép bạn tạo ra các bố cục phức tạp với các hàng và cột.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 20px;
}
.header {
grid-column: 1 / span 3;
}
.sidebar {
grid-column: 1 / 2;
}
.main-content {
grid-column: 2 / 3;
}
.footer {
grid-column: 1 / span 3;
}2. CSS Flexbox
Flexbox là một mô hình bố cục 1D (một chiều) cho phép bạn căn chỉnh các phần tử theo chiều ngang hoặc dọc một cách dễ dàng.
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
padding: 10px;
}3. CSS Table Layout
Mặc dù ít được sử dụng cho thiết kế bố cục hiện đại, nhưng CSS Table Layout vẫn có thể hữu ích trong một số trường hợp.
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 20px;
border: 1px solid #ccc;
}4. CSS Positioning
Sử dụng thuộc tính position trong CSS cho phép bạn định vị các phần tử một cách chính xác so với khung chứa hoặc viewport.
.container {
position: relative;
width: 100%;
height: 500px;
}
.element {
position: absolute;
top: 50px;
left: 20px;
}5. CSS Multi-column Layout
CSS Multi-column Layout cho phép bạn chia nội dung thành nhiều cột, giúp việc đọc và trình bày nội dung dễ dàng hơn.
.article {
column-count: 3;
column-gap: 20px;
}6. CSS Frameworks (Bootstrap, Foundation, etc.)
Các framework CSS như Bootstrap, Foundation cung cấp các hệ thống lưới và các thành phần UI được tạo sẵn.
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>1. Thẻ Style Là Gì ? Bên Trong Thẻ Style chứa những Gì ?
Thẻ <style> trong HTML là một thẻ dùng để định nghĩa các kiểu (styles) CSS trực tiếp trong phần đầu (<head>) của tài liệu HTML. CSS (Cascading Style Sheets) là ngôn ngữ dùng để mô tả cách hiển thị các phần tử HTML trên trang web, bao gồm màu sắc, phông chữ, bố cục và nhiều thuộc tính khác.
2. Bên trong thẻ <style> chứa những gì?
<style>
Thuộc tính & giá trị
</style>
Bên trong thẻ <style>, bạn sẽ định nghĩa các quy tắc CSS để áp dụng cho các phần tử HTML trong trang. Một quy tắc CSS bao gồm một hoặc nhiều selector (bộ chọn) và các thuộc tính đi kèm với giá trị tương ứng.
Như vậy, thẻ <style> chứa các quy tắc CSS để định dạng các phần tử HTML trong trang.
2. Thẻ Div Là Gì ? Bên Trong Thẻ Div chứa Những Gì ?
Thẻ <div> trong HTML là một phần tử khối (block-level element) được sử dụng để nhóm các phần tử HTML lại với nhau và chia bố cục trang thành các khối logic. Từ "div" viết tắt của "division," có nghĩa là phân đoạn hoặc phân khu. Thẻ <div> thường được sử dụng để bao bọc một nhóm phần tử HTML khác nhằm mục đích áp dụng kiểu dáng (CSS) hoặc thao tác (JavaScript) trên toàn bộ nhóm đó.
3. Bên trong thẻ <div> chứa những gì?
<div>
Nội Dung Phần Tử
</div>
Bên trong thẻ <div> có thể chứa bất kỳ nội dung HTML hợp lệ nào, chẳng hạn như văn bản, hình ảnh, liên kết, các phần tử khác như thẻ <p>, <h1>, <img>, <a>, thậm chí là cả những thẻ <div> khác. Thẻ <div> không có tác động gì đến nội dung bên trong nó về mặt trực quan trừ khi được định dạng bằng CSS.
4. Margin trong css là gì ?
Trong CSS, "margin" là một thuộc tính được sử dụng để tạo khoảng cách bên ngoài của một phần tử, tức là khoảng cách giữa phần tử đó và các phần tử khác xung quanh. Margin có thể được thiết lập cho bốn cạnh của một phần tử: trên (top), phải (right), dưới (bottom), và trái (left).
Ví dụ về cú pháp của margin :
/* Thiết lập cùng một giá trị cho tất cả các cạnh */
margin: 10px;
/* Thiết lập các giá trị riêng cho từng cạnh: trên, phải, dưới, trái */
margin: 10px 15px 20px 25px;
/* Thiết lập margin chỉ cho cạnh trên và dưới */
margin: 10px 0;
/* Thiết lập margin cho từng cạnh riêng lẻ */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
Giải Thích :
margin: 10px; áp dụng một khoảng cách 10px cho tất cả bốn cạnh.
margin: 10px 15px 20px 25px; thiết lập margin theo thứ tự: trên, phải, dưới, trái.
Ngoài ra, margin có thể có các giá trị như auto, inherit, hoặc 0 để tùy chỉnh khoảng cách giữa các phần tử theo cách linh hoạt.
Ví dụ, margin: auto; thường được sử dụng để căn giữa một phần tử trong khung chứa của nó.
5. Padding trong css là gì ?
Trong CSS, "padding" là thuộc tính dùng để tạo khoảng cách bên trong của một phần tử, tức là khoảng cách giữa nội dung của phần tử đó và đường viền (border) của nó. Khác với margin (khoảng cách bên ngoài phần tử), padding làm tăng kích thước phần tử bằng cách đẩy nội dung vào phía trong.
Ví dụ về cú pháp của padding:
/* Thiết lập cùng một giá trị cho tất cả các cạnh */
padding: 10px;
/* Thiết lập các giá trị riêng cho từng cạnh: trên, phải, dưới, trái */
padding: 10px 15px 20px 25px;
/* Thiết lập padding chỉ cho cạnh trên và dưới */
padding: 10px 0;
/* Thiết lập padding cho từng cạnh riêng lẻ */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding: 10px; áp dụng một khoảng cách 10px cho tất cả bốn cạnh bên trong của phần tử.
padding: 10px 15px 20px 25px; thiết lập padding theo thứ tự: trên, phải, dưới, trái.
Các giá trị có thể dùng với padding:
length: Đơn vị cụ thể như px, em, rem, %, v.v.
percentage: Tính theo phần trăm của phần tử chứa nó.
inherit: Kế thừa giá trị từ phần tử cha.
Ví dụ, nếu bạn sử dụng padding: 20px;, điều này có nghĩa là sẽ có một khoảng cách 20px giữa nội dung của phần tử và đường viền của nó từ mọi phía, làm cho phần tử trông lớn hơn mà không thay đổi kích thước của nội dung
6. Display Trong CSS Là Gì ?
Trong CSS, thuộc tính display được sử dụng để xác định cách một phần tử HTML hiển thị trên trang web. Đây là một trong những thuộc tính quan trọng nhất vì nó ảnh hưởng đến cách bố trí (layout) của các phần tử trên trang.
Các giá trị phổ biến của thuộc tính display:
block: Phần tử được hiển thị như một khối (block-level element). Nó chiếm toàn bộ chiều ngang của khung chứa (container), và các phần tử khác sẽ được hiển thị bên dưới nó trên một dòng mới.
Ví dụ: <div>, <h1>, <p>, <section>.
inline: Phần tử được hiển thị trong dòng (inline-level element). Nó chỉ chiếm không gian vừa đủ cho nội dung của nó và không bắt đầu trên một dòng mới.
Ví dụ: <span>, <a>, <strong>, <img>.
inline-block: Kết hợp giữa block và inline. Phần tử hiển thị trong dòng như inline, nhưng có thể đặt chiều rộng, chiều cao và margin/padding như một phần tử block.
Ví dụ: Thường dùng cho các nút hoặc ảnh trong văn bản.
none: Phần tử không được hiển thị trên trang web, giống như nó không tồn tại. Nó không chiếm không gian nào trong bố cục.
Ví dụ: Sử dụng để ẩn các phần tử mà không xóa chúng khỏi mã HTML.
flex: Phần tử được hiển thị dưới dạng một hộp linh hoạt (flex container). Điều này giúp tạo các bố cục phức tạp hơn, nơi các phần tử con (flex items) có thể được căn chỉnh, sắp xếp theo chiều ngang hoặc chiều dọc với khoảng cách đều nhau.
Ví dụ: Thường dùng trong bố cục hiện đại.
grid: Phần tử được hiển thị dưới dạng một lưới (grid container). Nó cho phép tạo ra các bố cục phức tạp bằng cách phân chia không gian thành các hàng và cột.
Ví dụ: Sử dụng để tạo lưới bố cục trên trang web.
table: Phần tử được hiển thị dưới dạng một bảng HTML. Điều này có nghĩa là nó sẽ tuân theo các quy tắc bố cục của bảng.
Ví dụ: <table>, <tr>, <td>.
inherit: Phần tử sẽ kế thừa giá trị display từ phần tử cha.
Ví dụ sử dụng:
/* Phần tử này sẽ hiển thị như một khối */
div {
display: block;
}
/* Phần tử này sẽ hiển thị trong dòng */
span {
display: inline;
}
/* Phần tử này sẽ bị ẩn đi */
.hidden {
display: none;
}
/* Phần tử này sẽ được hiển thị với bố cục linh hoạt */
.container {
display: flex;
}
Sử dụng thuộc tính display đúng cách là rất quan trọng để xây dựng các giao diện web đẹp và hoạt động tốt, đảm bảo bố cục hiển thị một cách chính xác và phù hợp với yêu cầu thiết kế.
7. Position Trong CSS Là Gì ?
Trong CSS, thuộc tính position được sử dụng để xác định cách một phần tử được định vị trong tài liệu. Thuộc tính này ảnh hưởng đến cách phần tử được đặt trong dòng chảy của tài liệu và cách nó phản ứng với các phần tử khác.
Các giá trị của thuộc tính position:
static:
Đây là giá trị mặc định. Phần tử được đặt trong dòng chảy tự nhiên của tài liệu, tức là nó xuất hiện ở vị trí thông thường của nó dựa trên thứ tự trong mã HTML.
Phần tử có position: static; sẽ không bị ảnh hưởng bởi các thuộc tính top, right, bottom, left.
relative:
relative:
Phần tử được đặt tương đối so với vị trí ban đầu của nó trong dòng chảy tài liệu.
Sử dụng các thuộc tính top, right, bottom, left để di chuyển phần tử khỏi vị trí ban đầu của nó. Không giống absolute, vị trí của phần tử vẫn chiếm chỗ trong dòng chảy tài liệu.
Ví dụ: top: 10px; sẽ đẩy phần tử xuống dưới 10px so với vị trí ban đầu.
absolute:
Phần tử được đặt tương đối so với phần tử chứa gần nhất có position khác static. Nếu không có phần tử chứa nào có position khác static, phần tử sẽ được định vị tương đối so với viewport (khung nhìn của trình duyệt).
Khi phần tử có position: absolute;, nó được loại bỏ khỏi dòng chảy của tài liệu, và các phần tử xung quanh sẽ không nhận thấy nó.
fixed:
Phần tử được đặt cố định tương đối so với viewport. Ngay cả khi bạn cuộn trang, phần tử vẫn giữ nguyên vị trí của nó trên màn hình.
Ví dụ: Các thanh điều hướng cố định ở đầu hoặc cuối trang.
sticky:
Phần tử được đặt dựa trên sự kết hợp giữa relative và fixed. Nó hoạt động như relative cho đến khi đạt tới một điểm xác định (dựa trên top, right, bottom, left), và sau đó trở thành fixed.
inherit:
Phần tử sẽ kế thừa giá trị position từ phần tử cha.
Ví dụ sử dụng:
/* Phần tử này sẽ nằm ở vị trí tự nhiên của nó */
div.static {
position: static;
}
/* Phần tử này được di chuyển 10px xuống so với vị trí tự nhiên */
div.relative {
position: relative;
top: 10px;
}
/* Phần tử này sẽ được đặt cách mép trên của phần tử chứa 50px */
div.absolute {
position: absolute;
top: 50px;
left: 20px;
}
/* Phần tử này sẽ luôn nằm ở góc dưới bên phải của cửa sổ */
div.fixed {
position: fixed;
bottom: 0;
right: 0;
}
/* Phần tử này sẽ "dính" ở trên cùng khi cuộn đến nó */
div.sticky {
position: sticky;
top: 0;
}
Việc sử dụng thuộc tính position giúp bạn kiểm soát vị trí của các phần tử trên trang web một cách chính xác, tạo ra các hiệu ứng và bố cục phức tạp hơn.
8. Float: left; Float: right; Clear: both; là gì ?
Trong CSS, các thuộc tính float và clear được sử dụng để điều chỉnh cách các phần tử hiển thị và "nổi" trong dòng chảy tài liệu, tạo ra các bố cục linh hoạt hơn.
1. float
Thuộc tính float được sử dụng để đẩy phần tử sang một bên của khung chứa (container), cho phép các phần tử văn bản hoặc inline khác "nổi" xung quanh nó. Phần tử được thiết lập float sẽ được loại khỏi dòng chảy tài liệu thông thường và đặt ở phía trái hoặc phải của phần tử chứa nó.
Giá trị phổ biến của float:
float: left;: Phần tử sẽ "nổi" sang bên trái của khung chứa, các phần tử khác sẽ bao quanh nó từ bên phải.
float: right;: Phần tử sẽ "nổi" sang bên phải của khung chứa, các phần tử khác sẽ bao quanh nó từ bên trái.
float: none;: Đây là giá trị mặc định, phần tử sẽ không "nổi" và nằm ở vị trí tự nhiên của nó trong dòng chảy tài liệu.
float: inherit;: Phần tử sẽ kế thừa giá trị float từ phần tử cha.
Ví dụ:
/* Phần tử sẽ nổi sang bên trái */
img {
float: left;
}
/* Phần tử sẽ nổi sang bên phải */
aside {
float: right;
}
2. clear
Thuộc tính clear được sử dụng để kiểm soát việc phần tử sẽ hiển thị sau các phần tử đã "nổi" (floated). Khi sử dụng clear, bạn có thể đảm bảo rằng một phần tử không được bao quanh bởi các phần tử float trước đó.
Giá trị phổ biến của clear:
clear: left;: Phần tử sẽ được hiển thị dưới tất cả các phần tử nổi sang trái (float: left;).
clear: right;: Phần tử sẽ được hiển thị dưới tất cả các phần tử nổi sang phải (float: right;).
clear: both;: Phần tử sẽ được hiển thị dưới tất cả các phần tử nổi, bất kể là sang trái hay phải.
clear: none;: Đây là giá trị mặc định, phần tử sẽ không bị ảnh hưởng bởi bất kỳ phần tử nào nổi trước đó.
Ví dụ:
/* Phần tử này sẽ không hiển thị bên cạnh các phần tử nổi sang trái hoặc phải */
footer {
clear: both;
}
Cách sử dụng float và clear kết hợp
Giả sử bạn có một trang web với hai hình ảnh nổi sang trái và phải, và bạn muốn một đoạn văn bản xuất hiện bên dưới cả hai hình ảnh:
<div>
<img src="left-image.jpg" alt="Left Image" style="float: left;">
<img src="right-image.jpg" alt="Right Image" style="float: right;">
<p style="clear: both;">
This paragraph will appear below the floating images.
</p>
</div>
Trong ví dụ trên, thuộc tính clear: both; đảm bảo rằng đoạn văn bản sẽ không "chui" vào khoảng trống giữa hai hình ảnh và thay vào đó sẽ được đặt bên dưới cả hai hình ảnh.
Ứng dụng thực tế
float: left; và float: right; thường được sử dụng để tạo các bố cục dạng cột hoặc để căn chỉnh các hình ảnh, hộp văn bản, hoặc các thành phần giao diện khác trong trang.
clear: both; thường được sử dụng để tránh các phần tử "nổi" gây ảnh hưởng đến bố cục của phần tử tiếp theo trong dòng chảy tài liệu.
Nhờ các thuộc tính này, bạn có thể tạo ra các thiết kế linh hoạt và phức tạp hơn, mặc dù với sự xuất hiện của CSS Flexbox và CSS Grid, việc sử dụng float và clear đã giảm đáng kể trong các dự án hiện đại.
II. Ví Dụ HTML
Css & Div Tạo Nội Dung :
Mẫu nội dung văn bản & Product Card Số 1 :
<style>
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
.product-card {
display: flex;
flex-wrap: wrap;
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-image {
flex: 1 1 100px;
max-width: 150px;
margin-right: 20px;
}
.product-image img {
width: 100%;
height: auto;
border-radius: 5px;
}
.product-info {
flex: 2 1 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-description {
margin-bottom: 10px;
}
.buy-button {
background-color: #28a745;
color: white;
border: none;
padding: 10px;
text-align: center;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
.buy-button:hover {
background-color: #218838;
}
@media (max-width: 600px) {
.product-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.product-image {
margin-right: 0;
margin-bottom: 15px;
max-width: 100%;
}
}
</style>
<div class="container">
<p>Đây là đoạn văn bản ví dụ trước product card. Card này sẽ được chèn vào giữa đoạn văn bản này và có khoảng cách đều từ các cạnh của card. Văn bản này sẽ phủ kín khoảng trống ở hai bên trái và phải của card.</p>
<div class="product-card">
<div class="product-image">
<img src="https://via.placeholder.com/150" alt="Product Image">
</div>
<div class="product-info">
<div class="product-description">
<h3>Sản phẩm ABC</h3>
<p>Đây là mô tả ngắn gọn về sản phẩm. Nó bao gồm các thông tin nổi bật và tính năng chính của sản phẩm.</p>
</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
</div>
<p>Đây là đoạn văn bản ví dụ sau product card. Văn bản này cũng sẽ cách đều các cạnh của card và bao quanh nó. Văn bản sẽ tiếp tục phủ kín cả trên và dưới, bên trái và bên phải của card, tạo ra một bố cục gọn gàng và rõ ràng.</p>
</div>
( Các Ví Dụ Liên Tục Được Cập Nhật... )
Qua bài viết này, hy vọng bạn đã có cái nhìn rõ ràng hơn về cách HTML hoạt động, từ các thẻ cơ bản, thuộc tính đến những phần tử quan trọng. Nắm vững những kiến thức này sẽ giúp bạn xây dựng nền tảng vững chắc cho việc phát triển web. Hãy tiếp tục thực hành và khám phá thêm các tài nguyên khác để nâng cao kỹ năng của mình. Chúc bạn thành công trên hành trình học tập HTML!
