Bài 16. Định dạng khung – Tóm tắt Tin học 12

1. Khung là gì?

Định nghĩa

Khung (border) của một phần tử trong trang web là đường viền bao quanh phần tử đó. Khung giúp phân chia các vùng nội dung, làm nổi bật tiêu đề, đoạn văn hoặc khối thông tin. Trong CSS, khung được tạo bằng ba thuộc tính chính: kiểu đường viền, độ dày và màu sắc.

1.1 Mô hình hộp

Trong CSS, mỗi phần tử được xem như một hộp chữ nhật gồm bốn lớp, tính từ trong ra ngoài:

Nội dung (content): chữ, ảnh…; kích thước đặt bằng width, height.
Vùng đệm (padding): khoảng trống giữa nội dung và khung, mang màu nền của phần tử.
Khung (border): đường viền bao quanh vùng đệm.
Lề (margin): khoảng trống bên ngoài khung, ngăn cách phần tử với các phần tử xung quanh; lề luôn trong suốt.

Viết giá trị cho padding, margin (tương tự border-width)

1 giá trị: padding: 10px; cả bốn cạnh bằng 10px.
2 giá trị: margin: 10px 20px; trên–dưới 10px, phải–trái 20px.
4 giá trị: padding: 5px 10px 15px 20px; lần lượt trên, phải, dưới, trái (theo chiều kim đồng hồ).
Từng cạnh: padding-top, margin-left…

Ví dụ 1

Một khối có width: 200px; padding: 10px; border: 2px solid black; margin: 15px;. Chiều rộng hộp tính đến mép ngoài khung là bao nhiêu?

Lời giải

Theo mặc định, width chỉ là chiều rộng phần nội dung. Chiều rộng đến mép ngoài khung là $200 + 2\cdot 10 + 2\cdot 2 = 224$ (px). Tính cả lề thì phần tử chiếm $224 + 2\cdot 15 = 254$ (px).

2. Ba thuộc tính cơ bản của khung

2.1 Thuộc tính kiểu đường viền: `border-style`

Định nghĩa

border-style quy định hình dáng của đường viền. Đây là thuộc tính bắt buộc: nếu không khai báo kiểu đường viền thì khung sẽ không xuất hiện, dù bạn đã đặt độ dày và màu sắc.

Các giá trị thường dùng:

none: không có đường viền.
solid: nét liền.
dashed: nét gạch đứt.
dotted: nét chấm.
double: hai đường song song.

2.2 Thuộc tính độ dày: `border-width`

Định nghĩa

border-width quy định độ dày của đường viền. Có thể dùng từ khoá hoặc độ dày có đơn vị đo kèm theo.

Các giá trị thường gặp:

thin: mảnh.
medium: trung bình (mặc định).
thick: dày.
Giá trị đo cụ thể: 2px, 3pt, 0.5em.

Chọn đơn vị đồng nhất

Khi dùng từ khoá, trình duyệt tự quyết định số liệu. Trong bài thực hành, nên dùng pixel (px) để kiểm soát chính xác độ dày khung.

2.3 Thuộc tính màu: `border-color`

Định nghĩa

border-color xác định màu của đường viền. Nếu không khai báo, trình duyệt lấy màu chữ hiện tại làm màu khung.

Ba cách khai báo màu phổ biến:

Tên màu: red, green, blue, gray.
Mã hexa: #ff0000, #8e44ad.
Giá trị RGB: rgb(255,0,0).

3. Thuộc tính viết tắt và viết theo từng cạnh

Cú pháp viết tắt

Thay vì ba dòng riêng biệt, ta gộp border-width, border-style, border-color vào một dòng duy nhất theo thứ tự:

border: [border-width] [border-style] [border-color];

Ví dụ: border: 2px solid blue; tạo khung dày 2 pixel, nét liền, màu xanh.

Định dạng từng cạnh

Khi chỉ cần đường viền ở một hoặc vài cạnh, dùng các thuộc tính riêng:

border-top: cạnh trên.
border-right: cạnh phải.
border-bottom: cạnh dưới.
border-left: cạnh trái.

Cú pháp cho từng cạnh cũng theo dạng viết tắt: border-top: [width] [style] [color];

Phân biệt viết tắt tổng và viết theo cạnh

border đặt khung cho cả bốn cạnh.
border-top, border-right, border-bottom, border-left chỉ đặt cho cạnh được gọi tên.
Nếu chỉ khai báo border-top mà không có border, các cạnh còn lại không có khung.

4. Ví dụ minh họa

Ví dụ 2

Cho đoạn mã HTML và CSS sau. Hãy chỉ ra kết quả hiển thị khung của từng phần tử.

Lời giải · 2 bước

Đoạn mã:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang tinh</title>
<style>
  h1 {
    text-align: center;
    border: 3px double green;
  }
  .khung_do {
    border: 2px dashed red;
  }
  .khung_duoi {
    border-bottom: 4px solid orange;
  }
</style>
</head>
<body>
  <h1>Tieu de chinh</h1>
  <p class="khung_do">Doan van co khung net dut mau do.</p>
  <p class="khung_duoi">Chi co vien ben duoi.</p>
</body>
</html>

Bước 2

Phân tích:

Thẻ h1 có khung dày 3px, kiểu hai đường (double), màu xanh lá.
Phần tử lớp khung_do có khung nét gạch đứt (dashed), độ dày 2px, màu đỏ ở cả bốn cạnh.
Phần tử lớp khung_duoi chỉ có đường viền dày 4px, nét liền, màu cam ở cạnh dưới; các cạnh trên, trái, phải không có khung.

Ví dụ 3

Viết bộ chọn CSS tạo khung cho bốn cạnh, dày 2px, kiểu solid, màu tím bằng mã hexa #8e44ad.

Lời giải · 2 bước

.khung {
  border: 2px solid #8e44ad;
}

Bước 2

Hoặc viết đầy đủ:

.khung {
  border-width: 2px;
  border-style: solid;
  border-color: #8e44ad;
}

5. Lưu ý và lỗi hay gặp

Bốn lỗi thường gặp

1.
Thiếu kiểu đường viền: border: 4px red; không hiện khung vì thiếu border-style. Cần border: 4px solid red;
2.
Ghi số không có đơn vị: border-width: 2; là không hợp lệ khi muốn dùng độ dày cụ thể. Phải viết 2px.
3.
Nhầm none với hidden: cả hai đều ẩn đường viền, nhưng với bảng biểu sự khác biệt có thể xuất hiện. Trong bài khung đơn thuần, hai giá trị đều khiến khung biến mất.
4.
Chỉ đặt border rồi lại ghi đè border-top thiếu style: nếu chỉ ghi border-top: 2px blue; thì cạnh trên sẽ không hiện do thiếu border-style.

Về giá trị mặc định

Khi viết tắt border, các thành phần không khai báo sẽ lấy giá trị mặc định:

border-width mặc định là medium.
border-style mặc định là none.
border-color mặc định là màu chữ hiện tại.

6. Ôn tập

Câu hỏi 1

Hãy trả lời các câu hỏi sau.

1.
Thuộc tính bắt buộc để khung hiện ra là thuộc tính nào?
2.
Vì sao đoạn mã border: 2px black; không tạo được khung trên trang web?
3.
Hãy viết mã CSS tạo khung cho thẻ h2 gồm: dày 1px, nét liền, màu xanh dương blue.
4.
Làm thế nào để chỉ hiển thị đường viền ở cạnh trên của một đoạn văn?
5.
Liệt kê các giá trị kiểu đường viền thuộc nhóm đường đứt hoặc điểm.

Gợi ý trả lời

1.
Thuộc tính border-style.
2.
Vì thiếu border-style; mặc định là none nên không có đường viền. Cần thêm solid, dashed hoặc kiểu phù hợp.
3.
h2 { border: 1px solid blue; } hoặc viết đầy đủ ba dòng với border-width: 1px;, border-style: solid;, border-color: blue;.
4.
Dùng border-top: [width] [style] [color];. Ví dụ: border-top: 2px solid black;.
5.
dashed (nét gạch), dotted (nét chấm).

Nhớ nhanh

1. Khung là gì?

1.1 Mô hình hộp

2. Ba thuộc tính cơ bản của khung

2.1 Thuộc tính kiểu đường viền: border-style

2.2 Thuộc tính độ dày: border-width

2.3 Thuộc tính màu: border-color

3. Thuộc tính viết tắt và viết theo từng cạnh

4. Ví dụ minh họa

5. Lưu ý và lỗi hay gặp

6. Ôn tập

2.1 Thuộc tính kiểu đường viền: `border-style`

2.2 Thuộc tính độ dày: `border-width`

2.3 Thuộc tính màu: `border-color`