Giáo án điện tử Khoa học máy tính 12 chân trời Bài F8: Một số thuộc tính cơ bản của CSS (P2)

NHIỆT LIỆT CHÀO ĐÓN CÁC BẠN ĐẾN VỚI BÀI HỌC MỚI!

BÀI F8: MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS

NỘI DUNG BÀI HỌC

Những thuộc tính định kiểu cho màu sắc và phông chữ

01

Những thuộc tính định kiểu cho văn bản

02

Những thuộc tính định kiểu cho nền

03

Những thuộc tính định kiểu cho đường viền, lề và vùng đệm

04

THỰC HÀNH

1. Định kiểu CSS cho văn bản và nền

Viết mã lệnh CSS để định kiểu cho phần Giới thiệu chung

• Các thông tin cá nhân được căn phải so với trang web.
• Dùng một hình ảnh để làm nền cho phần thông tin cá nhân này. Hình ảnh đó phải phủ hết chiều ngang của trang web.

Hình 7. Giao diện của phần Giới thiệu chung

HƯỚNG DẪN THỰC HIỆN

Đặt các thông tin cá nhân vào cặp thẻ <div></div>.

Bước

Định kiểu cho nội dung

Trong thuộc tính style của thẻ <div>, chỉ định giá trị cho thuộc tính text-align là right để căn phải cho phần thông tin cá nhân.

HƯỚNG DẪN THỰC HIỆN

Giả sử tệp ảnh làm nền có tên là hinhnen.jpg.

Bước

Để tạo nền là ảnh, em viết thêm một cặp thẻ <div></div> bên ngoài phần mã lệnh trên và chỉ định giá trị cho thuộc tính background-image là tệp ảnh đặt trong hàm url().

Bước

Đoạn mã CSS được viết như sau:

THỰC HÀNH

2. Định kiểu CSS cho đường viền, lề và vùng đệm

Viết mã lệnh CSS để định kiểu khung và viền cho riêng từng mục của phần Sở thích

• Đường viền dày 1 pixel, màu xám và nền màu trắng.
• Chiều cao là 30 pixels và độ rộng bằng một nửa độ rộng của trang web.
• Bo tròn 4 góc.
• Lề là 20 pixels và vùng đệm cho phần văn bản bên trong là 20 pixels.

Hình 8. Giao diện của phần Sở thích

HƯỚNG DẪN THỰC HIỆN

Đặt nội dung của mỗi mục Sở thích vào cặp thẻ <div></div>.

Trong thuộc tính style của mỗi thẻ <div>, chỉ định các thuộc tính phù hợp với các yêu cầu

• Dùng thuộc tính border để tạo đường viền và thuộc tính background-color để tạo nền trắng.
• Dùng thuộc tính height và width để định kiểu lần lượt chiều cao và độ rộng của khung, trong đó giá trị của width là 50%.

HƯỚNG DẪN THỰC HIỆN

• Dùng thuộc tính border-radius để bo tròn 4 góc của khung.
• Dùng thuộc tính margin và padding để định kiểu lần lượt cho lề và vùng đệm, trong đó ứng với mỗi thuộc tính, em chỉ định giá trị là 20px cho cả bốn bên: trên, dưới, trái và phải.

Đoạn mã CSS cho sở thích môn học được viết như sau:

LUYỆN TẬP (CÂU HỎI TRẮC NGHIỆM)

Câu 1. Thuộc tính định kiểu cho độ đậm nhạt của chữ không nhận giá trị nào sau đây?

A. lighter.

B. 700.

C. normal.

D. 1000.

Câu 2. Thuộc tính nào sau thay thế và mở rộng cho thẻ <u> của HTML?

A. text-transformation.

B. font-decoration.

C. text-decoration.

D. font-style.

Câu 3. Để tô màu khung viền quanh phần tử, em sử dụng thuộc tính CSS nào?

A. background-color.

B. border-color.

C. opacity.

D. border.

Câu 4. Thứ tự các giá trị của thuộc tính padding là

A. Trên, phải, dưới, trái.

B. Trên, dưới, phải, trái.

C. Trên, phải, trái, dưới.

D. Trên, dưới, trái, phải.

Câu 5. Giá trị 50px trong mã lệnh p {margin: 25px 50px 75px} cho biết

• lề trái và lề dưới

B. lề phải và lề trái

của phần tử <p>.

C. lề trên và lề phải

của phần tử <p>.

D. lề phải và lề dưới

của phần tử <p>.

LUYỆN TẬP (CÂU HỎI ĐÚNG - SAI)

Câu hỏi. CSS cung cấp nhiều thuộc tính định kiểu cho trang web

a. Giá trị của thuộc tính border-radius được tính theo đơn vị pixel.

b. Trong CSS, màu sắc của chữ có thể được chỉ định bởi một trong ba giá trị: tên màu, mã màu, hàm mô tả.

c. Thuộc tính CSS dùng để căn chỉnh văn bản theo phương ngang có các giá trị: top, bottom, middle, sub, super.

d. Thuộc tính word-spacing được dùng để tạo khoảng cách giữa các kí tự.

LUYỆN TẬP (CÂU HỎI TỰ LUẬN)

Câu 1. Em hãy kể tên một số thuộc tính dùng để định kiểu phông chữ, văn bản, nền, đường viền, lề và vùng đệm.

Câu 2. Thảo luận với bạn và nêu một số đơn vị có thể được dùng để định kiểu kích thước cho những thành phần trong trang web.

Câu 3. Theo em, có những cách mô tả màu sắc nào trong mã lệnh CSS?

Bảng 1. Một số thuộc tính và giá trị dùng để định kiểu phông chữ

Câu

----------------------------------

----------------------- Còn tiếp -------------------------