Giáo án 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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân, tìm hiểu về những thuộc tính định kiểu cho màu sắc và phông chữ bằng cách trả lời các câu hỏi:

+ Theo em, màu chữ và phông chữ có ảnh hưởng đến trải nghiệm của người dùng web không?

+ CSS hỗ trợ định kiểu cho phông chữ bằng những thuộc tính nào?

+ Trong Ví dụ 1, cụm từ “Vô địch” được định kiểu khác với phần nội dung còn lại trong cặp thẻ <li></li>. Em hãy nêu cách thực hiện.

+ CSS hỗ trợ định kiểu cho màu sắc của chữ bằng thuộc tính nào? 

+ Màu sắc của chữ và các thành phần của trang web có thể được chỉ định bởi những giá trị như thế nào? 

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.109 SGK:

Viết mã lệnh CSS để định kiểu cho những thành tích đạt được còn lại trong mục Các hoạt động đã tham gia với những giá trị khác cho các thuộc tính.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.108 – 109 và trả lời các câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời các câu hỏi và nhận xét lẫn nhau. 

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

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

Bên cạnh nội dung của trang web, hình thức trình bày cũng đóng vai trò quan trọng, có ảnh hưởng đến cảm nhận của người xem. 

- Màu sắc của chữ và phông chữ là những yếu tố góp phần tạo nên hình thức của trang web.  Chọn phông chữ phù hợp sẽ làm nổi bật nội dung cần truyền tải, giúp người đọc nhanh chóng nhận biết nội dung chính và có được trải nghiệm tích cực.

- Một số thuộc tính định kiểu cho phông chữ:

+ font-family: tên phông chữ.

+ font-size: cỡ chữ.

+ font-style: kiểu in nghiêng.

+ font-weight: độ đậm nhạt.

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

Ví dụ 1: Hình 1 là kết quả thay đổi phông chữ từ Vô địch của mục  Các hoạt động đã tham gia trong tệp portfolio.html. Em thực hiện chèn thẻ HTML  <span> với thuộc tính style như sau:

Hình 1. Một phần nội dung của mục sau khi định kiểu cho phông chữ

Ở Ví dụ 1:

+ Thẻ <span> dùng để định kiểu một phần văn bản nào đó trong cả đoạn.

+ Từ Vô địch được định kiểu: 

• Phông chữ Georgia.

• Cỡ chữ bằng 1,5 lần so với cỡ chữ mặc định (của phông chữ Georgia).

• Kiểu in nghiêng là oblique.

• Độ đậm nhạt là bolder.

- Định kiểu cho màu sắc của chữ:

+ Sử dụng thuộc tính color. 

+ Màu sắc của chữ nói riêng và các thành phần khác của trang web nói chung có thể được chỉ định bởi những giá trị như: 

• Từ khoá là tên màu (red).

• Mã màu (#ff0000).

• Hàm mô tả màu (rgba(255,0,0,0.3) gồm ba tham số đầu ứng với các thành phần RGB, tham số thứ tư là độ trong suốt).

Ví dụ 2: Mã lệnh CSS định kiểu cho thẻ <h1> sau tô màu xanh cho đề mục Các hoạt động đã tham gia. Kết quả hiển thị như Hình 2.

Hình 2. Nội dung đề mục sau khi định kiểu cho màu sắc

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.109 SGK:

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi: 

+ CSS cung cấp những thuộc tính nào để định kiểu cho văn bản?

- GV phân tích ví dụ minh hoạ để HS hiểu và biết cách áp dụng các thuộc tính định kiểu cho văn bản.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.110 SGK:

Viết mã lệnh CSS để định kiểu cho Các hoạt động đã tham gia thành chữ in hoa và khoảng cách giữa các kí tự là 2 pixels.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.109 – 110 và trả lời câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

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

CSS cung cấp nhiều thuộc tính để định kiểu cho những nội dung là văn bản:

- text-align: căn chỉnh văn bản theo phương ngang với các giá trị left, right, center và justify.

- vertical-align: căn lề theo phương dọc (nếu văn bản nằm trong một phần tử HTML khác) với các giá trị top, bottom, middle, sub (chỉ số dưới),  super (chỉ số trên).

- Các thuộc tính định kiểu cho khoảng cách giữa các kí tự, các từ, hiệu ứng đổ bóng của văn bản như trong Bảng 2.

Bảng 2. Một số thuộc tính và giá trị dùng để định kiểu nội dung là văn bản

Ví dụ 3: Bổ sung mã lệnh CSS trong Ví dụ 2 để căn giữa cho đề mục Các hoạt động đã tham gia. Kết quả hiển thị như Hình 3.

Hình 3. Nội dung đề mục sau khi định kiểu căn giữa trang web

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.110 SGK:

Trong phần tử <h1> của Các hoạt động đã tham gia, bổ sung text-transformation và letter-spacing vào thuộc tính style như sau:

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi: 

+ CSS cung cấp những thuộc tính nào để định kiểu cho nền?

- GV đưa ra ví dụ minh hoạ để HS hiểu và biết cách áp dụng các thuộc tính định kiểu cho nền.

- GV giới thiệu cho HS về phần tử <div>.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.111 SGK:

Em hãy định kiểu độ trong suốt của nền là 0.3 và quan sát kết quả.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 3 SGK tr.110 – 111 và trả lời câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

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

- Nền của các phần tử HTML có thể được định kiểu bằng các thuộc tính:

+ background.

+ background-color.

+ background-image. 

Với thuộc tính background-image, giá trị là đường dẫn của tệp hình ảnh được đặt trong hàm url().

Bảng 3. Một số thuộc tính và giá trị dùng để định kiểu nền

Ví dụ 4: Đoạn mã CSS sau tạo nền có màu chuyển sắc cho phần nội dung của mục Các hoạt động đã tham gia. Kết quả hiển thị như Hình 4.

Hình 4. Nội dung của mục sau khi định kiểu cho nền

- Em có thể đặt mã lệnh CSS trong thẻ <div> với <div> là thẻ được dùng để gom nhóm nhiều phần tử HTML lại với nhau.

Ví dụ:

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.111 SGK:

Thêm thuộc tính opacity vào phần tử <div>:

<div style="…; opacity: 0.3;">

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi: 

+ Để định kiểu viền cho một phần tử HTML bằng CSS, em sử dụng thuộc tính nào?

- GV giới thiệu và đưa ra ví dụ minh hoạ để HS hiểu về khái niệm lề và vùng đệm.

- GV tiếp tục đặt câu hỏi định hướng:

+ Vậy thế nào là định kiểu cho lề và vùng đệm?

+ CSS cung cấp những thuộc tính nào để định kiểu lề và vùng đệm cho một phần tử HTML?

- GV lưu ý HS về cách chỉ định các giá trị của thuộc tính margin và padding.

- GV phân tích Ví dụ 5 đồng thời đặt câu hỏi cho HS:

+ Thuộc tính width và border-radius được dùng để làm gì? 

+ Theo em, thuộc tính margin và thuộc tính padding khác nhau như thế nào?

- GV tổng kết một số thuộc tính và giá trị dùng để định kiểu đường viền, lề và vùng đệm theo Bảng 4.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.113 SGK:

Theo em, thay đổi các giá trị nào của vùng đệm thì phần văn bản nằm sát cạnh dưới của đường viền?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 4 SGK tr.111 – 113 và trả lời các câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.113 SGK:

Thay đổi giá trị padding-bottom của vùng đệm xuống thấp thì văn bản có khả năng nằm sát cạnh dưới của đường viền.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

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

- Định kiểu viền cho một phần tử HTML: Sử dụng thuộc tính border với các giá trị cần chỉ định lần lượt là độ dày đường viền, kiểu đường viền và màu đường viền.

- Lề và vùng đệm của một phần tử HTML:

• Lề là khoảng trống nằm bên ngoài đường viền.

• Vùng đệm là khoảng trống nằm bên trong đường viền. 

Ví dụ: Trong Hình  5: 

• Phần nội dung được thể hiện bằng màu xanh nhạt.

• Đường viền được thể hiện bằng màu xám, có độ dày là 1 px.

• Vùng đệm được thể hiện bằng màu tím, có độ rộng theo bốn hướng đều là 20 px.

• Phần lề được thể hiện bằng màu vàng, với lề trên, phải, dưới và trái lần lượt là 20 px, 50 px, 50 px và 250 px.

Hình 5. Mô tả đường viền, lề và vùng đệm

Định kiểu lề là chỉ định khoảng cách từ đường viền đến các phần tử HTML xung quanh. Định kiểu vùng đệm là chỉ định khoảng cách từ đường viền đến phần nội dung nằm bên trong.

- Định kiểu lề và vùng đệm cho một phần tử HTML: Sử dụng thuộc tính margin và padding, chỉ định giá trị là các khoảng cách, thường theo đơn vị pixel.

• Để tường minh trong mã lệnh, em nên chỉ định đầy đủ 4 giá trị ứng với 4 khoảng cách trên, phải, dưới và trái.

• Cách chỉ định giá trị cho thuộc tính margin:

• Cách chỉ định giá trị cho thuộc tính padding: