Nội dung kiến thức gồm có: Phân loại phần tử khối (block) và phần tự nội tuyến (inline); Khung của phần tử và các định nghĩa có liên quan; Các thuộc tính định dạng khung; Bộ chọn lớp (class selector) và bộ chọn với mã định danh (id selector).
1. Phần tử khối và phần tử nội tuyến
Trong HTML, các phần tử được chia thành hai loại chính là phần tử khối (block) và phần tử nội tuyến (inline). Sự khác biệt giữa chúng nằm ở cách chúng được hiển thị trên trang web:
Phần tử khối (block):
- Luôn bắt đầu trên một dòng mới.
- Chiếm toàn bộ chiều rộng có sẵn (kéo dài từ trái sang phải của phần tử cha).
- Thường được dùng để cấu trúc các thành phần lớn trên trang web như đoạn văn, tiêu đề, danh sách, bảng,…
- Ví dụ:
<h1>,<p>,<div>,<ul>,<ol>,<table>,<form>
Phần tử nội tuyến (inline):
- Không bắt đầu dòng mới, nằm trên cùng dòng với các phần tử khác.
- Chỉ chiếm chiều rộng vừa đủ để chứa nội dung.
- Thường dùng để định dạng văn bản như in đậm, in nghiêng, tạo liên kết,…
- Ví dụ:
<a>,<span>,<strong>,<em>,<img>,<input>
2. Thiết lập định dạng khung bằng CSS
Phần này hướng dẫn cách sử dụng CSS để tạo khung và định dạng cho các phần tử HTML. Các thuộc tính CSS thường được sử dụng bao gồm:
Lưu ý:
- Có thể sử dụng thuộc tính
borderđể gộp chung các thuộc tínhborder-width,border-stylevàborder-color(ví dụ:border: 5px dashed red;). - Có thể định dạng riêng từng cạnh của khung bằng cách sử dụng
border-top,border-right,border-bottomvàborder-left. - Thuộc tính CSS khác để định dạng khung như
border-radius(bo tròn góc),box-shadow(tạo bóng đổ)…
3. Một số bộ chọn đặt biệt của CSS
a. Bộ chọn lớp (class selector):
- Định dạng cho một nhóm các phần tử có cùng thuộc tính class.
- Khai báo bằng dấu chấm (.) theo sau là tên class (ví dụ:
.highlight). - Một phần tử có thể thuộc nhiều class khác nhau.
b. Bộ chọn ID (ID selector):
- Định dạng cho một phần tử duy nhất có ID cụ thể.
- Khai báo bằng dấu thăng (#) theo sau là ID của phần tử (ví dụ:
#menu). - Mỗi ID chỉ được sử dụng một lần trong trang web.
c. Bộ chọn thuộc tính (attribute selector):
- Định dạng cho các phần tử dựa trên thuộc tính của chúng.
- Khai báo bằng tên thuộc tính trong dấu ngoặc vuông (ví dụ:
[type="text"]). - Có thể kết hợp với các bộ chọn khác để tăng tính chính xác.
Lưu ý:
- Phân biệt chữ hoa chữ thường.
- Ít nhất một ký tự không phải số: Tên id và class phải chứa ít nhất một ký tự không phải là số và không được bắt đầu bằng số. Ví dụ,
class1hợp lệ nhưng1classkhông hợp lệ. - Không chứa dấu cách và ký tự đặc biệt: Tránh sử dụng dấu cách, ký tự đặc biệt (như
!,@,#,$,%,^,&,*,(,), v.v.) trong tên id và class. Nên sử dụng dấu gạch ngang (-) hoặc dấu gạch dưới (_) để nối các từ trong tên. - Duy nhất: Mỗi id chỉ được sử dụng một lần trong trang web để xác định duy nhất một phần tử.
Câu hỏi trắc nghiệm: Định dạng khung
Câu hỏi trắc nghiệm (dạng D1 và D2) Tin học 12 bài 16: Định dạng khung
Thời gian làm bài: 30 phút
Đáp án chỉ hiển thị sau khi hoàn thành bài làm
Câu hỏi sẽ được hiển thị ngẫu nhiên
Vui lòng nhập họ và tên để bắt đầu làm bài
Bảng xếp hạng
Chưa có kết quả nào.
