Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
I. Lý thuyết trọng tâm
1. Phân loại phần tử khối và nội tuyến
Các thẻ (hay phần tử) HTML được chia làm hai loại: khối (block level) và nội tuyến (inline level).
1.1. Phần tử khối (Block level)
Các phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web.
Ví dụ trong Hình 16.1, dòng chữ “Thư Bác Hồ gửi học sinh” được thể hiện ở dạng khối, chiếm toàn bộ chiều ngang.
1.2. Phần tử nội tuyến (Inline level)
Các phần tử nội tuyến là các phần tử nhúng bên trong một phần tử khác, không tự động xuống dòng.
Ví dụ trong Hình 16.1, cụm từ “Việt Nam” là một phần tử nội tuyến, được nhúng trong phần tử p.
1.3. Bảng phân loại phần tử
Mặc định, các phần tử HTML sẽ thuộc một trong hai loại khối hoặc nội tuyến:
| Phần tử loại khối | Phần tử loại nội tuyến |
|---|---|
| h1 – h6, p, div, address, nav, article, section, aside, form, header, footer, table, hr, ol, ul, li, canvas | b, span, a, img, em, strong, sub, sup, var, samp, cite, dfn, kbd, pre, code, q, i, u, del, ins, mark, br, label, textarea, input, script |
1.4. Thuộc tính display
Chúng ta có thể thay đổi loại phần tử HTML bằng thuộc tính display. Các giá trị của thuộc tính này bao gồm:
| Giá trị | Ý nghĩa |
|---|---|
block |
Chuyển thành phần tử khối |
inline |
Chuyển thành phần tử nội tuyến |
none |
Làm ẩn (không hiển thị) phần tử trên trang web |
Ví dụ: CSS sau sẽ đổi loại phần tử span từ dạng mặc định là inline sang block:
span {
display: block;
text-indent: 2em;
color: red;
}
p {color: blue;}
2. Thiết lập định dạng khung bằng CSS
Trong phần này, chúng ta sẽ làm quen với cách định dạng khung, viền cho các phần tử HTML. Cần lưu ý:
- Với phần tử dạng khối: Khung được xác định với đầy đủ tính chất (chiều cao, chiều rộng)
- Với phần tử nội tuyến: Khung chỉ có thể thiết lập mà không có thông số chiều cao, chiều rộng
2.1. Mô hình khung (Box Model)
Mỗi phần tử HTML đều có một khung bao quanh với các thông số chính như sau:
Cấu trúc khung từ trong ra ngoài:
- Phần nội dung (Content): Vùng chứa văn bản và hình ảnh
- Vùng đệm (Padding): Khoảng cách từ nội dung đến đường viền
- Đường viền (Border): Khung bao quanh vùng đệm
- Lề khung (Margin): Khoảng cách từ đường viền đến các phần tử xung quanh
2.2. Các thuộc tính định dạng khung
Các thuộc tính liên quan đến khung của một phần tử HTML được mô tả trong bảng sau. Lưu ý: Các thuộc tính này đều không có tính kế thừa.
| Thuộc tính | Ý nghĩa |
|---|---|
width |
Chiều rộng của khung. Thuộc tính này chỉ áp dụng cho phần tử dạng khối. |
height |
Chiều cao khung. Thuộc tính này chỉ áp dụng cho phần tử dạng khối. |
padding |
Vùng đệm, khoảng cách từ vùng text đến đường viền ngoài của khung. |
margin |
Lề khung, khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh (nếu có). |
border-color |
Màu của viền khung. |
border-width |
Độ dày của đường viền khung. |
border-style |
Kiểu đường viền khung. Các giá trị có thể là: none, solid, dotted, dashed, double, inset, outset, ridge, groove. |
border |
Thuộc tính này có thể gán giá trị đồng thời các thuộc tính border-width, border-style và border-color. |
Ví dụ về thuộc tính border:
{border: 2px solid red;}
2.3. Ví dụ định dạng khung
Cho đoạn mã HTML:
<body>
<h1>Lịch sử CSS</h1>
<p>Ý tưởng của CSS do kĩ sư <em>Håkon Wium Lie</em>, người Na Uy,
thiết lập năm 1994 trong khi làm việc với Tim Berners-Lee
tại viện hạt nhân CERN.</p>
</body>
Mẫu định dạng CSS:
h1 {
border: 5px ridge blue;
width: 200px;
padding: 10px;
margin: 20px;
}
em {
border: 2px double red;
}
3. Một số bộ chọn đặc biệt của CSS
Trên một trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Vậy làm thế nào để phân biệt và định dạng riêng cho từng nhóm phần tử?
3.1. Bộ chọn lớp (class)
Trong thực tế, có thể có nhu cầu định dạng cho một nhóm phần tử có cùng ý nghĩa, ví dụ các đoạn văn bản liên quan đến một sự kiện hoặc một số đoạn văn bản quan trọng cần nhấn mạnh. Trong các trường hợp này, thiết lập bộ chọn lớp class cho các phần tử đó để có thể thiết lập định dạng chung.
Cú pháp:
.tên_lớp {thuộc_tính: giá_trị;}
Ví dụ:
.warning {color: red;} /* chữ màu đỏ cho các đoạn văn bản thuộc lớp warning */
.test { /* chữ màu xanh và in đậm cho lớp test */
color: blue;
font-weight: bold;
}
Áp dụng trong HTML:
<body>
<p class="test">Thông tin đang test</p>
<p class="warning">Thông tin cần warning.</p>
</body>
Kết quả: Đoạn văn bản thứ nhất có chữ màu xanh và in đậm, đoạn văn bản thứ hai có chữ màu đỏ.
Một số định dạng hay gặp với bộ chọn lớp:
| Bộ chọn | Ý nghĩa |
|---|---|
.test |
Áp dụng cho tất cả các phần tử có lớp tên là test |
.test.warning |
Áp dụng cho tất cả các phần tử có tên lớp đồng thời là test và warning. Ví dụ: <p class="test warning">...</p> |
p.test |
Áp dụng cho tất cả các phần tử p có gắn lớp tên test |
3.2. Bộ chọn ID
Chúng ta đã biết cách thiết lập và gắn mã định danh id cho từng phần tử trong tệp HTML. Mỗi phần tử chỉ có một mã định danh id duy nhất trong một trang web.
CSS cho phép thiết lập các mẫu định dạng với các phần tử có id tương ứng.
Cú pháp:
#tên_id {thuộc_tính: giá_trị;}
Ví dụ:
#home {color: red;} /* chữ màu đỏ cho phần tử với id="home" */
p#home {font-size: 150%;} /* cỡ chữ 150% cho phần tử p có id="home" */
3.3. Bộ chọn thuộc tính
Một tính chất quan trọng khác của CSS là có thể thiết lập bộ chọn là thuộc tính. Các định dạng này sẽ được thiết lập và áp dụng cho các phần tử nếu được gắn với thuộc tính cụ thể nào đó.
Ví dụ:
[href] {border: 1px solid blue;}
/* áp dụng cho tất cả các phần tử có thuộc tính href, ví dụ các phần tử a */
a[target="_blank"] {color: red; font-weight: bold;}
/* áp dụng chữ màu đỏ và in đậm cho tất cả các thẻ a với thuộc tính target="_blank" */
3.4. Quy tắc đặt tên id và class
Khi đặt tên cho id và class cần tuân thủ các quy tắc sau:
- Tên của id và class phân biệt chữ in hoa, in thường
- Tên bắt buộc phải có ít nhất một ký tự không là số
- Không bắt đầu bằng số
- Không chứa dấu cách và các ký tự đặc biệt khác
- Một phần tử có thể thuộc nhiều lớp khác nhau, đặt các tên lớp cách nhau bởi dấu cách
Ví dụ: Phần tử p thuộc đồng thời ba lớp là “test”, “more” và “once”:
<p class="test more once">Đoạn chương trình cần kiểm tra.</p>
Thầy Phạm Thành Danh
(Người kiểm duyệt, ra đề)
Chức vụ: Trưởng ban biên soạn môn Tin Học THPT
Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1
Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa