Video giảng tin học ứng dụng 12 kết nối bài 14: Định dạng văn bản bằng CSS

Tóm lược nội dung

BÀI 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Vui mừng chào đón các em cùng đồng hành với cô trong bài học ngày hôm nay!

Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:

• Sử dụng được CSS để định dạng văn bản, phông chữ.

A. KHỞI ĐỘNG

Trước khi bắt đầu bài học, chúng ta hãy cùng nhau quan sát hình ảnh và trả lời câu hỏi sau nhé:

Quan sát đoạn văn bản được thể hiện trên một trang web trong Hình 14.1. Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản?

Việc định dạng phông chữ, màu chữ và dòng văn bản sẽ nhanh và thuận tiện hơn khi sử dụng các mẫu định dạng CSS. Vậy để giúp các em biết cách sử dụng CSS để định dạng văn bản, phông chữ, chúng ta sẽ cùng nhau đến với Bài 14: Định dạng văn bản bằng CSS.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

1. Định dạng văn bản bằng CSS

Nội dung 1. CSS định dạng phông chữ

CSS hỗ trợ thiết lập những thuộc tính liên quan đến định dạng phông chữ nào?

Video trình bày nội dung:

CSS hỗ trợ thiết lập các thuộc tính liên quan đến chọn phông (font-family), chọn cỡ chữ (font-size), chọn kiểu chữ (font-style), độ dày nét chữ (font-weight) và nhiều thuộc tính khác. 

Nội dung 2. CSS định dạng màu chữ

CSS hỗ trợ thiết lập màu chữ bằng thuộc tính nào? 

Video trình bày nội dung:

- CSS hỗ trợ thiết lập màu chữ bằng thuộc tính color. 

- Một số giá trị màu cơ bản của thuộc tính color: 

+ black: đen.

+ white: trắng.

+ purple: tím. 

+ blue: xanh dương.

+ orange: cam.

+ red: đỏ.

+ green: xanh lá cây. 

+ yellow: vàng.

Nội dung 3. CSS định dạng dòng văn bản

Trình bày khái niệm đường cơ sở, chiều cao dòng và các thuộc tính liên quan đến định dạng dòng văn bản?

Video trình bày nội dung:

- Đường cơ sở (baseline) là đường ngang mà các chữ cái đứng thẳng trên nó. 

- Chiều cao dòng văn bản (line-height) là khoảng cách giữa các đường cơ sở của các dòng trong cùng một đoạn văn bản. CSS sẽ mặc định coi chiều cao = 2em và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới của văn bản. 

- Các thuộc tính liên quan đến định dạng dòng văn bản: 

+ line-height

+ text-align

+ text-decoration

+ text-indent

2. Tính kế thừa và cách lựa chọn theo thứ tự cảu CSS

Nội dung 4. Tính kế thừa của CSS

Trình bày tính kế thừa của CSS?

Video trình bày nội dung:

- Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng).

Nội dung 5. Thứ tự ưu tiên khi áp dụng mẫu CSS

Trình bày thứ tự ưu tiên khi áp dụng mẫu CSS?

Video trình bày nội dung:

- Khi có nhiều mẫu CSS cùng áp dụng cho một phần tử HTML, trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng.

Nội dung 6. Sử dụng kí hiệu * và !important

Trình bày ý nghĩa của kí hiệu * và !important?

Video trình bày nội dung:

- Kí hiệu *: Dùng trong bộ chọn sẽ có ý nghĩa là phần tử bất kì. 

- Kí hiệu !important: Nếu được sử dụng trong một mẫu định dạng thì mẫu này với thuộc tính tương ứng sẽ được ưu tiên cao nhất mà không phụ thuộc vào vị trí của mẫu trong CSS. 

...........

Nội dung video Bài 14: Định dạng văn bản bằng CSS còn nhiều phần rất hấp dẫn và thú vị. Hãy cùng đăng kí để tham gia học bài và củng cố kiến thức thông qua hoạt động luyện tập và vận dụng trong video.