Tin học 12 – Bài 16. Định dạng khung

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:

Tin học 12 Bài 16 Thiết lập định dạng khung bằng CSS

Lưu ý:

Có thể sử dụng thuộc tính border để gộp chung các thuộc tính border-width, border-style và 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-bottom và 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ụ, class1 hợp lệ nhưng 1class khô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

Họ và tên của bạn

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

Thuộc tính CSS nào được dùng để thay đổi loại phần tử HTML?

color

display

font-size

text-align

Giá trị nào của thuộc tính display sẽ làm ẩn hoàn toàn phần tử trên trang web?

block

inline

none

hidden

Cho đoạn CSS sau:
span {display: block;}
Đoạn code trên có tác dụng gì?

Làm cho tất cả các thẻ span hiển thị trên một dòng.

Chuyển đổi tất cả các thẻ span thành phần tử khối.

Ẩn tất cả các thẻ span trên trang web.

Thay đổi màu chữ của tất cả các thẻ span.

Đâu là ý nghĩa của thuộc tính padding trong CSS?

Khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh.

Độ dày của đường viền khung.

Màu của viền khung.

Khoảng cách từ vùng text đến đường viền ngoài của khung.

Thuộc tính CSS nào dùng để thiết lập màu của viền khung?

border-width

border-style

border-color

border

Thuộc tính CSS border: 2px solid red; tương đương với việc thiết lập các thuộc tính nào?

border-width, border-style, border-color

border-width, border-style, margin

border-color, padding, margin

border-style, padding, width

Giá trị nào của thuộc tính border-style tạo ra đường viền khung dạng đường đôi?

solid

dotted

dashed

double

Cho đoạn CSS sau:
h1 { border: 5px ridge blue; margin: 20px; }
Đoạn code trên có tác dụng gì?

Tạo đường viền 5px màu xanh dương dạng ridge và lề 20px cho tất cả các thẻ <h1>.

Tạo đường viền 20px màu xanh dương dạng ridge và lề 5px cho tất cả các thẻ <h1>.

Tạo đường viền 5px màu xanh dương dạng solid và lề 20px cho tất cả các thẻ <h1>.

Tạo đường viền 5px màu xanh lá cây dạng ridge và lề 20px cho tất cả các thẻ <h1>.

Để định dạng một nhóm các phần tử có ý nghĩa gần giống nhau, ta sử dụng bộ chọn nào trong CSS?

class

tag

attribute

Cho đoạn HTML sau:
<p class="test warning">Thông tin cần warning.</p>
Để định dạng đoạn văn bản trên, bộ chọn CSS nào sau đây là đúng?

.test

.warning

.test.warning

p

Mỗi phần tử HTML có bao nhiêu mã định danh id duy nhất trong một trang web?

Vô số

Cho đoạn CSS sau:
#home {color: red;}
Đoạn code trên có tác dụng gì?

Đặt màu đỏ cho tất cả các phần tử có id là "home".

Đặt màu đỏ cho tất cả các phần tử có class là "home".

Đặt màu đỏ cho tất cả các thẻ <h1>.

Đặt màu đỏ cho tất cả các thẻ <p>.

CSS cho phép thiết lập bộ chọn là gì?

Thuộc tính

Tên thẻ

class

Cho đoạn CSS sau:
[href] {border: 1px solid blue;}
Đoạn code trên có tác dụng gì?

Tạo viền xanh cho tất cả các phần tử có thuộc tính href.

Tạo viền xanh cho tất cả các thẻ <a>.

Tạo viền đỏ cho tất cả các phần tử có thuộc tính href.

Tạo viền xanh cho tất cả các phần tử.

Cấu trúc chung của định dạng CSS với bộ chọn ID là?

.class {thuộc tính : giá trị;}

#idname {thuộc tính : giá trị ;}

[href] {border: 1px solid blue;}

element {thuộc tính : giá trị;}

Cấu trúc chung của định dạng CSS liên quan đến class là gì?

#idname {thuộc tính : giá trị ;}

.class {thuộc tính : giá trị;}

[href] {border: 1px solid blue;}

element {thuộc tính : giá trị;}

Cho đoạn CSS sau:
[href] {border: 1px solid blue;}
Đoạn code trên có tác dụng gì?

Tạo viền xanh cho tất cả các phần tử có thuộc tính href.

Tạo viền xanh cho tất cả các thẻ <a>.

Tạo viền đỏ cho tất cả các phần tử có thuộc tính href.

Tạo viền xanh cho tất cả các phần tử.

Phát biểu nào sau đây là đúng về tên của id và class trong CSS?

Tên của id và class không phân biệt chữ hoa, chữ thường.

Tên của id và class bắt buộc phải bắt đầu bằng một chữ số.

Tên của id và class phân biệt chữ in hoa, in thường.

Tên của id và class có thể chứa dấu cách.

Cho đoạn HTML sau:
<p class="test more once">Đoạn chương trình cần kiểm tra.</p>
Đoạn văn bản trên thuộc bao nhiêu lớp?

Cho đoạn CSS sau:
.test .test_more {background-color: red;}
Đoạn code trên có tác dụng gì?

Đặt màu nền đỏ cho tất cả các phần tử có class là "test".

Đặt màu nền đỏ cho tất cả các phần tử có class là "test_more".

Đặt màu nền đỏ cho các phần tử có class "test_more" nằm trong phần tử có class "test".

Đặt màu nền đỏ cho các phần tử có class "test" và "test_more".

Một trang web có nhiều thẻ <p>. Bạn muốn đoạn P1 có định dạng khác biệt, P2 và P3 có cùng kiểu định dạng khác với P1, và các đoạn còn lại có định dạng giống nhau.

NB Có thể sử dụng thuộc tính id để định dạng riêng cho P1

Đúng Sai

NB Có thể sử dụng thuộc tính class để định dạng chung cho P2 và P3

Đúng Sai

TH Cần tạo 4 class khác nhau để thực hiện yêu cầu trên

Đúng Sai

VD Có thể thiết lập định dạng CSS cho các khung với thông số khung, viền trên, dưới, trái, phải khác nhau

Đúng Sai

Bạn muốn tạo một trang web hiển thị thông tin về sản phẩm. Bạn muốn mỗi sản phẩm được hiển thị trong một khung riêng biệt với viền và lề khác nhau.

NB Thuộc tính margin dùng để chỉ khoảng cách giữa nội dung sản phẩm và viền của khung

Đúng Sai

NB Chỉ có thể thiết lập chiều rộng và chiều cao cho phần tử dạng khối

Đúng Sai

TH Có thể sử dụng thuộc tính border-style để tạo viền có kiểu dáng khác nhau như đường liền, đường chấm chấm, đường gạch nối

Đúng Sai

VD Các thuộc tính liên quan đến khung của một phần tử HTML có tính kế thừa

Đúng Sai

Một trang web sử dụng CSS để định dạng các phần tử. Một số phần tử có id và class trùng nhau.

TH Các định dạng CSS áp dụng cho id sẽ ghi đè các định dạng áp dụng cho class nếu chúng xung đột

Đúng Sai

NB Một phần tử HTML có thể thuộc nhiều lớp class khác nhau

Đúng Sai

NB Tên của id và class không được bắt đầu bằng số

Đúng Sai

VD Các định dạng được gán trực tiếp cho phần tử HTML sẽ có độ ưu tiên cao nhất so với định dạng từ CSS bên ngoài

Đúng Sai

Bảng xếp hạng

Hạng	Họ tên	Điểm số	Thời gian
1	k 1 lần thi	100/100	3 phút 42 giây
2	hat.ine 2 lần thi	100/100	4 phút 7 giây
3	slena 2 lần thi	100/100	5 phút 1 giây
4	quyên 2 lần thi	100/100	5 phút 23 giây
5	n 1 lần thi	93/100	5 phút 44 giây
6	trương 2 lần thi	90/100	7 phút 13 giây
7	giliy 1 lần thi	89/100	7 phút 43 giây
8	Y 1 lần thi	88/100	6 phút 46 giây
9	Nguyễn Minh Anh 1 lần thi	79/100	6 phút 50 giây
10	. 2 lần thi	75/100	6 phút 35 giây
11	huynh dung thảo 1 lần thi	63/100	19 phút 10 giây
12	Thúy Quyên 1 lần thi	61/100	8 phút 40 giây
13	u 1 lần thi	55/100	4 phút 46 giây
14	1 1 lần thi	52/100	1 phút 25 giây
15	a 1 lần thi	45/100	38 phút 2 giây
16	Gg 1 lần thi	42/100	8 phút 31 giây
17	phương oanh 1 lần thi	41/100	5 phút 36 giây
18	12 1 lần thi	40/100	45 giây
19	SA 1 lần thi	38/100	1 phút 56 giây
20	..... 1 lần thi	36/100	2 phút 47 giây
21	Ngânnnn 1 lần thi	33/100	2 phút 48 giây
22	123 2 lần thi	30/100	53 giây
23	ff 1 lần thi	29/100	1 phút 28 giây
24	trần lê 1 lần thi	26/100	2 phút 27 giây
25	Min 1 lần thi	0/100	18 giây