Chương 2: Lập Trình Giao Diện Web với HTML & CSS
PHẦN 1: HTML – HYPERTEXT MARKUP LANGUAGE
1. Giới Thiệu HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để xây dựng cấu trúc và nội dung của các trang web. HTML không phải là ngôn ngữ lập trình — nó là ngôn ngữ đánh dấu (markup), nghĩa là dùng các thẻ để mô tả ý nghĩa và cách trình bày nội dung.
HTML do Tim Berners-Lee phát minh và được tổ chức W3C (World Wide Web Consortium) chuẩn hóa vào năm 1994.
Mối quan hệ giữa HTML và CSS:
HTML → Quy định CẤU TRÚC và NỘI DUNG của trang web
CSS → Quy định CÁCH HIỂN THỊ (giao diện) của trang web2. Đặc Điểm của HTML
- HTML sử dụng các thẻ (tags) để định dạng và tổ chức dữ liệu.
- HTML không phân biệt chữ hoa và chữ thường —
<P>và<p>là như nhau. - Các trình duyệt không báo lỗi cú pháp HTML. Nếu viết sai, trang web chỉ hiển thị không đúng như mong muốn chứ không có thông báo lỗi.
3. Thẻ HTML (Tag)
3.1 Khái niệm
Thẻ là các chỉ thị dùng để định dạng nội dung, cho trình duyệt biết cách hiển thị một đoạn văn bản, hình ảnh, liên kết, v.v.
Cấu trúc cơ bản của một thẻ có thuộc tính:
<tên_thẻ thuộc_tính_1="giá_trị_1" thuộc_tính_2="giá_trị_2">
Nội dung
</tên_thẻ>Ví dụ cụ thể:
<body bgcolor="#ffffff"></body>Trong đó:
body— tên thẻbgcolor— thuộc tính của thẻ<body>#ffffff— giá trị của thuộc tính (có thể dùng nháy đơn hoặc nháy kép)
3.2 Phân loại thẻ
Có hai loại thẻ HTML:
Thẻ đôi (Two-sided): Có thẻ mở và thẻ đóng, chứa nội dung ở giữa.
<p>Đây là một đoạn văn bản.</p>
<u>Văn bản gạch chân</u>Thẻ đơn (One-sided): Không có thẻ đóng, không chứa nội dung.
<br>
<img src="/posts/course/se4/nt208/anh.jpg">3.3 Thuộc tính của thẻ
Thuộc tính bổ sung thêm thông tin hoặc điều chỉnh hành vi cho thẻ. Một thẻ có thể có nhiều thuộc tính.
<tên_thẻ tên_TT1="giá_trị1" tên_TT2="giá_trị2">Lưu ý quan trọng:
- Có thể thay đổi thứ tự các thuộc tính mà không gây lỗi.
- Thẻ đóng viết bình thường, không lặp lại thuộc tính:
</tên_thẻ> - Mỗi trình duyệt có thể hỗ trợ các thẻ và thuộc tính khác nhau; chỉ các thẻ cơ bản là giống nhau trên mọi trình duyệt.
4. Cấu Trúc Trang HTML Cơ Bản
<!DOCTYPE html>
<html>
<head>
<title>Hello page</title>
</head>
<body>
Chao mung ban den voi <u>HTML</u>!
</body>
</html>Giải thích từng phần:
<!DOCTYPE html>— Khai báo kiểu tài liệu, cho trình duyệt biết đây là HTML5.<html>— Thẻ gốc bao bọc toàn bộ trang.<head>— Phần đầu trang, chứa thông tin meta, tiêu đề, liên kết CSS, v.v. Nội dung trong<head>không hiển thị trực tiếp trên trang.<title>— Tiêu đề hiển thị trên tab trình duyệt.<body>— Phần thân trang, chứa toàn bộ nội dung hiển thị cho người dùng.
5. Soạn Thảo Văn Bản trong HTML
Văn bản gõ trực tiếp trong <body> sẽ được hiển thị trên trang. Tuy nhiên, HTML xử lý khoảng trắng theo cách đặc biệt:
Các ký tự đặc biệt thường dùng:
| Ký tự muốn hiển thị | Mã HTML |
|---|---|
| Khoảng trắng thêm | |
Dấu nhỏ hơn < | < |
Dấu lớn hơn > | > |
Dấu ngoặc kép " | " |
Ký hiệu bản quyền © | © |
Ghi chú trong HTML:
<!-- Đây là ghi chú, không hiển thị trên trang web -->6. Thẻ Định Dạng Ký Tự
6.1 Các thẻ định dạng cơ bản
<b>Chữ đậm (Bold)</b>
<i>Chữ nghiêng (Italic)</i>
<u>Chữ gạch chân (Underline)</u>
<sup>Chỉ số trên (Superscript)</sup>
<sub>Chỉ số dưới (Subscript)</sub>6.2 Thẻ <font> — Tùy chỉnh font chữ
<font face="Arial" size="3" color="#FF0000">Nội dung</font>Thuộc tính của <font>:
face="tên font"— Tên font chữ, ví dụ:Arial,Times New Romansize="kích thước"— Kích thước từ 1 đến 7color="màu"— Màu chữ, viết theo tên tiếng Anh (red,blue) hoặc mã hex (#FF0000)
Quy tắc màu hex #RRGGBB:
#FFFFFF— Trắng#000000— Đen#FF0000— Đỏ#00FF00— Xanh lá#0000FF— Xanh dương
6.3 Ví dụ đầy đủ về định dạng ký tự
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Định dạng ký tự</title>
</head>
<body>
<p><i><font color="#FF0000">Chào các bạn đến với Lập trình Ứng dụng Web</font></i></p>
<!-- Ví dụ chỉ số trên và dưới -->
<font size="3">
AX<sup>2</sup> + BX + C = 0
<br>
C + O<sub>2</sub> = CO<sub>2</sub>
</font>
</body>
</html>Kết quả hiển thị:
- Dòng 1: Chữ nghiêng màu đỏ
- Dòng 2: Phương trình bậc hai với số mũ ở trên
- Dòng 3: Phản ứng hóa học với chỉ số ở dưới
7. Tiêu Đề, Đoạn Văn, Ngắt Dòng
7.1 Thẻ tiêu đề <h1> đến <h6>
HTML cung cấp 6 cấp tiêu đề, kích thước giảm dần từ <h1> (to nhất) đến <h6> (nhỏ nhất). Sau mỗi tiêu đề, văn bản tự động xuống dòng mới.
<h1>Giám đốc</h1>
<h2>Phó Giám đốc</h2>
<h3>Nhân viên</h3>
<h4>Thực tập sinh</h4>Thuộc tính căn lề align:
<h1 align="center">Tiêu đề căn giữa</h1>
<h2 align="right">Tiêu đề căn phải</h2>
<h2 align="left">Tiêu đề căn trái (mặc định)</h2>7.2 Thẻ đoạn văn <p>
Dùng để nhóm một đoạn văn bản lại. Trình duyệt tự thêm khoảng cách trên và dưới mỗi đoạn.
<p align="justify">Đây là một đoạn văn bản được căn đều hai bên.</p>7.3 Thẻ ngắt dòng <br>
Xuống dòng ngay tại vị trí đó, không tạo khoảng cách như <p>.
Dòng thứ nhất<br>
Dòng thứ hai8. Chèn Ảnh
Dùng thẻ đơn <img> để nhúng hình ảnh vào trang.
<img src="/posts/course/se4/nt208/duong_dan_anh.jpg" alt="Mô tả ảnh" width="300" height="200" border="0">Giải thích các thuộc tính:
| Thuộc tính | Ý nghĩa | Ví dụ |
|---|---|---|
src | Đường dẫn đến file ảnh | src="/posts/course/se4/nt208/images/logo.png" |
alt | Chú thích hiển thị khi ảnh lỗi hoặc khi rê chuột lên | alt="Logo công ty" |
width | Chiều rộng (pixel hoặc %) | width="300" hoặc width="50%" |
height | Chiều cao (pixel hoặc %) | height="200" |
border | Độ dày đường viền xung quanh ảnh | border="0" (không viền) |
align | Căn chỉnh ảnh so với văn bản | align="left", align="right" |
9. Danh Sách (List)
HTML hỗ trợ hai loại danh sách:
9.1 Danh sách có thứ tự (Ordered List)
<ol>
<li>Bước 1: Cài đặt môi trường</li>
<li>Bước 2: Viết code HTML</li>
<li>Bước 3: Mở trình duyệt xem kết quả</li>
</ol>Hiển thị: 1, 2, 3, …
9.2 Danh sách không có thứ tự (Unordered List)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Hiển thị: dấu chấm tròn hoặc gạch đầu dòng.
9.3 Danh sách lồng nhau
Một phần tử <li> có thể chứa một danh sách con:
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>10. Siêu Liên Kết (Hyperlink)
Siêu liên kết cho phép người dùng điều hướng giữa các trang, file, hoặc địa chỉ email bằng cách nhấp chuột.
Thuật ngữ:
- Đối tượng liên kết: Phần văn bản hoặc hình ảnh mà người dùng nhấp vào.
- Đích liên kết: Địa chỉ sẽ được mở ra.
10.1 Cú pháp cơ bản
<a href="đích_liên_kết">Đối tượng liên kết</a>10.2 Các dạng liên kết thường dùng
Liên kết đến trang khác trong cùng website:
<a href="trangkhac.html">Đến trang khác</a>Liên kết đến website khác:
<a href="https://www.google.com" target="_blank">Mở Google trong tab mới</a>Liên kết gửi email:
<a href="mailto:example@gmail.com">Gửi email cho chúng tôi</a>Liên kết thực thi JavaScript:
<a href="javascript:alert('Hello!')">Nhấn vào đây</a>Thuộc tính target:
| Giá trị | Ý nghĩa |
|---|---|
_self | Mở trong cửa sổ/tab hiện tại (mặc định) |
_blank | Mở trong tab/cửa sổ mới |
11. Bảng Biểu (Table)
HTML coi bảng gồm nhiều dòng, mỗi dòng gồm nhiều ô, và chỉ ô mới chứa dữ liệu.
11.1 Cấu trúc thẻ
| Thẻ | Mục đích |
|---|---|
<table> | Tạo bảng (mỗi bảng chỉ có 1 cặp thẻ này) |
<tr> | Tạo một dòng (table row) |
<th> | Tạo ô tiêu đề (tự động in đậm và căn giữa) |
<td> | Tạo ô dữ liệu (table data) |
11.2 Ví dụ bảng cơ bản
<table border="1">
<tr>
<th>Họ tên</th>
<th>Môn học</th>
<th>Điểm</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>HTML</td>
<td>9.5</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>CSS</td>
<td>8.0</td>
</tr>
</table>11.3 Thuộc tính của <table>
| Thuộc tính | Ý nghĩa |
|---|---|
border="n" | Độ dày đường viền bảng. border="0" là không có viền |
width, height | Kích thước bảng (pixel hoặc %) |
cellspacing="n" | Khoảng cách giữa hai ô liền kề |
cellpadding="n" | Khoảng cách từ cạnh ô đến nội dung bên trong |
bgcolor="màu" | Màu nền của toàn bảng |
background="url" | Ảnh nền cho bảng |
11.4 Thuộc tính của <td> và <th>
| Thuộc tính | Ý nghĩa |
|---|---|
bgcolor, background | Màu hoặc ảnh nền riêng cho từng ô |
width, height | Kích thước ô |
align | Căn ngang: left, right, center, justify |
valign | Căn dọc: top, middle, bottom |
colspan="n" | Ô này chiếm n cột (gộp cột) |
rowspan="n" | Ô này chiếm n dòng (gộp dòng) |
nowrap | Không cho phép nội dung ô tự xuống dòng |
11.5 Ví dụ gộp ô (colspan, rowspan)
<table border="1">
<tr>
<th colspan="3">Bảng điểm học kỳ 1</th>
</tr>
<tr>
<td rowspan="2">Nguyễn Văn A</td>
<td>Toán</td>
<td>8.5</td>
</tr>
<tr>
<td>Lý</td>
<td>7.0</td>
</tr>
</table>12. Form và Các Điều Khiển Nhập Liệu
Form cho phép người dùng nhập dữ liệu và gửi về server để xử lý.
12.1 Thẻ <form>
<form name="tenForm" action="url_xu_ly" method="POST">
<!-- Các điều khiển nhập liệu đặt ở đây -->
</form>Thuộc tính quan trọng:
| Thuộc tính | Ý nghĩa |
|---|---|
action | Địa chỉ server nhận dữ liệu khi submit |
method | Phương thức gửi: GET (mặc định) hoặc POST |
12.2 Textbox — Hộp nhập văn bản một dòng
<!-- Ô nhập văn bản thường -->
<input type="text" name="hoten" value="Nguyễn Văn A">
<!-- Ô nhập mật khẩu (ký tự bị che) -->
<input type="password" name="matkhau">12.3 Checkbox — Hộp chọn nhiều lựa chọn
<input type="checkbox" name="monhoc" value="html" checked> HTML
<input type="checkbox" name="monhoc" value="css"> CSS
<input type="checkbox" name="monhoc" value="js"> JavaScriptvalue: Giá trị gửi về server nếu ô này được chọn.checked: Mặc định ô này đã được chọn.- Checkbox cho phép chọn nhiều lựa chọn cùng lúc.
12.4 Radio Button — Nút chọn một lựa chọn
<input type="radio" name="gioitinh" value="nam" checked> Nam
<input type="radio" name="gioitinh" value="nu"> Nữ12.5 Nút lệnh (Button)
<!-- Nút gửi dữ liệu về server -->
<input type="submit" value="Đăng ký">
<!-- Nút xóa toàn bộ dữ liệu đã nhập, trả về mặc định -->
<input type="reset" value="Nhập lại">
<!-- Nút thông thường, xử lý bằng JavaScript -->
<input type="button" value="Nhấn vào đây">12.6 Combo Box — Hộp danh sách xổ xuống
Chỉ hiển thị một lựa chọn tại một thời điểm, nhấn mũi tên để xổ danh sách.
<select name="thanhpho">
<option value="hn">Hà Nội</option>
<option value="hp">Hải Phòng</option>
<option value="hcm" selected>Hồ Chí Minh</option>
<option value="dn">Đà Nẵng</option>
</select>selected: Phần tử này được chọn mặc định.
12.7 Listbox — Hộp danh sách hiển thị nhiều dòng
<select name="danhsach" size="4" multiple>
<option value="hn">Hà Nội</option>
<option value="hp">Hải Phòng</option>
<option value="hcm">Hồ Chí Minh</option>
<option value="dn">Đà Nẵng</option>
<option value="hue">Huế</option>
</select>size="4": Hiển thị 4 dòng cùng lúc.multiple: Cho phép giữ Ctrl để chọn nhiều phần tử.
12.8 TextArea — Hộp nhập văn bản nhiều dòng
<textarea name="noidung" rows="5" cols="40">
Nội dung mặc định ở đây...
</textarea>rows: Số dòng hiển thị.cols: Số ký tự trên mỗi dòng (chiều rộng ước tính).
12.9 Ví dụ form đầy đủ
<form action="dangky.php" method="POST">
<p>Họ tên: <input type="text" name="hoten"></p>
<p>Mật khẩu: <input type="password" name="matkhau"></p>
<p>Giới tính:
<input type="radio" name="gt" value="nam" checked> Nam
<input type="radio" name="gt" value="nu"> Nữ
</p>
<p>Sở thích:
<input type="checkbox" name="st" value="doc"> Đọc sách
<input type="checkbox" name="st" value="nhac" checked> Nghe nhạc
</p>
<p>Thành phố:
<select name="tp">
<option value="hn">Hà Nội</option>
<option value="hcm" selected>Hồ Chí Minh</option>
</select>
</p>
<p>Giới thiệu: <br>
<textarea name="gioithieu" rows="4" cols="40"></textarea>
</p>
<input type="submit" value="Đăng ký">
<input type="reset" value="Nhập lại">
</form>13. Thẻ Meta
Thẻ <meta> đặt trong <head>, cung cấp thông tin về trang web cho trình duyệt và công cụ tìm kiếm. Thẻ này không hiển thị trực tiếp trên trang.
<!-- Mô tả trang web (hiển thị trong kết quả tìm kiếm Google) -->
<meta name="description" content="Trang học HTML và CSS cho sinh viên CNTT">
<!-- Từ khóa tìm kiếm -->
<meta name="keywords" content="HTML, CSS, lập trình web, học HTML">
<!-- Tác giả -->
<meta name="author" content="Đỗ Thị Hương Lan">
<!-- Tự động chuyển trang sau 5 giây -->
<meta http-equiv="refresh" content="5;url=trangmoi.html">
<!-- Khai báo mã ký tự (quan trọng để hiển thị tiếng Việt) -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Ngày hết hạn cache trang -->
<meta http-equiv="expires" content="Mon, 01 Jan 2025 00:00:00 GMT">PHẦN 2: CSS – CASCADING STYLE SHEETS
1. Giới Thiệu CSS
CSS (Cascading Style Sheets) là ngôn ngữ dùng để mô tả cách hiển thị các thành phần HTML trên trang web. Nếu HTML quy định cái gì có trên trang, thì CSS quy định trông như thế nào.
Lợi ích chính của CSS:
- Tách biệt nội dung (HTML) và giao diện (CSS) — dễ bảo trì.
- Có thể tái sử dụng một file CSS cho nhiều trang web.
- Thay đổi giao diện toàn bộ website chỉ bằng cách sửa một file CSS duy nhất (cascading).
2. Cú Pháp CSS Cơ Bản
selector {
property: value;
property2: value2;
}Ví dụ:
body {
background: #FFF;
color: #FF0000;
font-size: 14pt;
}
.username {
font-size: 10pt;
font-weight: bold;
}
#title {
text-transform: uppercase;
font-style: italic;
}Giải thích 3 thành phần:
- Selector: Đối tượng áp dụng style. Có thể là tên thẻ HTML (
body,h1,p), class (.username), hoặc ID (#title). - Property: Thuộc tính cần thiết lập (
color,font-size,background, …). - Value: Giá trị của thuộc tính (
red,14pt,#FFF, …).
Ghi chú trong CSS
selector {
property1: value1; /* Ghi chú dòng 1 */
property2: value2; /* Ghi chú dòng 2 */
}3. Phân Loại CSS
graph TD
A[CSS] --> B[1. Inline Style Sheet]
A --> C[2. Embedding Style Sheet]
A --> D[3. External Style Sheet]
3.1 Inline Style Sheet
Định nghĩa style trực tiếp trong thuộc tính style của từng thẻ HTML.
<h1 style="color: yellow; font-size: 24px;">Tiêu đề màu vàng</h1>
<p style="color: red; text-align: center;">Đoạn văn màu đỏ, căn giữa</p>3.2 Embedding Style Sheet
Nhúng khối CSS vào bên trong thẻ <style> đặt trong <head> của trang HTML. Style chỉ áp dụng cho trang đó.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000;
}
h1 {
color: red;
margin-left: 40px;
}
p {
font-size: 14px;
color: white;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>3.3 External Style Sheet
Tất cả CSS được lưu trong file riêng có đuôi .css. Liên kết đến file này từ mọi trang HTML cần dùng. Đây là cách được sử dụng phổ biến nhất trong thực tế.
File mystyle.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}File HTML sử dụng CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>3.4 So Sánh 3 Loại CSS
| Tiêu chí | Inline | Embedding | External |
|---|---|---|---|
| Cú pháp | <p style="color:red;"> | <style> .class{...} </style> | <link href="style.css"> |
| Phạm vi | Từng thẻ | Một trang HTML | Nhiều trang HTML |
| Ưu điểm | Ưu tiên cao nhất, dễ kiểm soát từng thẻ | Không cần file riêng | Tái sử dụng cho toàn site, trình duyệt cache lại |
| Nhược điểm | Phải khai báo trong từng thẻ, khó bảo trì | Phải khai báo lại cho từng trang | Lần đầu cần tải thêm file .css |
4. Độ Ưu Tiên CSS (Specificity)
Khi nhiều rule CSS cùng áp dụng cho một phần tử, rule có độ ưu tiên cao hơn sẽ được áp dụng. Thứ tự ưu tiên từ cao xuống thấp:
1. Inline Style Sheet (cao nhất)
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default (thấp nhất)Ví dụ: Nếu External CSS quy định h1 { color: blue; } nhưng Inline CSS quy định <h1 style="color: red;">, thì chữ sẽ hiển thị màu đỏ vì Inline có độ ưu tiên cao hơn.
5. Selector trong CSS
Selector xác định phần tử HTML nào sẽ được áp dụng style.
| Loại | Cú pháp | Phạm vi ảnh hưởng | Ví dụ |
|---|---|---|---|
| Element | h1 { } | Tất cả thẻ <h1> trong tài liệu | h1 { color: red; } |
| ID | #tenid { } | Thẻ có id="tenid" (duy nhất trong trang) | #para1 { color: green; } |
| Class | .tenclass { } | Tất cả thẻ có class="tenclass" | .note { color: red; } |
5.1 Ví dụ Element Selector
<style>
p {
text-align: center;
color: red;
}
</style>
<p>Đoạn này bị ảnh hưởng.</p>
<p id="para1">Đoạn này cũng bị ảnh hưởng.</p>
<p>Và đoạn này cũng vậy.</p>Tất cả thẻ <p> đều căn giữa và màu đỏ.
5.2 Ví dụ ID Selector
<style>
#para1 {
text-align: center;
color: red;
}
</style>
<p id="para1">Hello World!</p>
<p>Đoạn này KHÔNG bị ảnh hưởng.</p>Chỉ thẻ có id="para1" bị ảnh hưởng.
5.3 Ví dụ Class Selector
<style>
.center {
text-align: center;
color: red;
}
</style>
<h1 class="center">Tiêu đề đỏ, căn giữa</h1>
<p class="center">Đoạn văn đỏ, căn giữa</p>
<p>Đoạn này không bị ảnh hưởng</p>6. CSS Box Model
Mỗi phần tử HTML được trình duyệt coi như một hộp chữ nhật gồm 4 lớp từ trong ra ngoài:
+---------------------------+
| margin |
| +---------------------+ |
| | border | |
| | +---------------+ | |
| | | padding | | |
| | | +---------+ | | |
| | | | content | | | |
| | | +---------+ | | |
| | +---------------+ | |
| +---------------------+ |
+---------------------------+- Content: Nội dung thực sự (văn bản, hình ảnh).
- Padding: Khoảng cách từ nội dung đến đường viền. Nền (background) của phần tử lan rộng vào vùng padding.
- Border: Đường viền bao quanh padding và nội dung.
- Margin: Khoảng cách bên ngoài border, ngăn cách phần tử này với phần tử khác. Margin trong suốt.
Tính kích thước thực tế của phần tử:
Tổng chiều rộng = width + padding-left + padding-right + border-left + border-right + margin-left + margin-rightdiv {
width: 300px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}7. CSS Layout — Định Vị Phần Tử
7.1 Thuộc tính position
selector { position: giá_trị; }| Giá trị | Mô tả |
|---|---|
static | Mặc định. Phần tử nằm theo luồng bình thường của tài liệu. |
relative | Định vị tương đối so với vị trí ban đầu của chính nó. Không ảnh hưởng các phần tử khác. |
absolute | Định vị tuyệt đối so với phần tử cha gần nhất có position: relative hoặc absolute. Thoát khỏi luồng bình thường. |
fixed | Định vị cố định theo cửa sổ trình duyệt. Không di chuyển khi cuộn trang. |
inherit | Kế thừa giá trị position từ phần tử cha. |
Ví dụ position: absolute kết hợp z-index:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; /* Nằm phía sau các phần tử khác */
}z-index quy định thứ tự chồng lấp: giá trị cao hơn nằm phía trên.
7.2 Thuộc tính float
float dùng để đẩy phần tử sang trái hoặc phải, cho phép các phần tử khác bao quanh nó.
img {
float: left; /* Ảnh nằm bên trái, văn bản bao quanh bên phải */
}
.sidebar {
float: right; /* Cột phụ nằm bên phải */
width: 200px;
}| Giá trị | Ý nghĩa |
|---|---|
left | Đẩy phần tử về bên trái, nội dung khác bao quanh bên phải |
right | Đẩy phần tử về bên phải, nội dung khác bao quanh bên trái |
none | Không float (mặc định) |
Ứng dụng phổ biến của float:
- Tạo bố cục nhiều cột.
- Đặt ảnh và văn bản bên cạnh nhau.
- Tạo thanh điều hướng nằm ngang.
8. Tổng Kết Luồng Học
graph LR
A[HTML: Cấu trúc nội dung] --> B[CSS: Định dạng giao diện]
B --> C[Inline CSS]
B --> D[Embedding CSS]
B --> E[External CSS]
E --> F[Tái sử dụng toàn site]
D --> G[Phạm vi một trang]
C --> H[Phạm vi một thẻ]