Nội dung chính 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

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

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

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

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

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

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:

Lưu ý: Khi cả 4 khoảng cách đều bằng nhau, em chỉ cần chỉ định 1 giá trị duy nhất.

Ví dụ 5: Đoạn mã CSS sau đây được bổ sung vào thuộc tính style của thẻ <div> để định kiểu đường viền, lề và vùng đệm 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 6.

Trong Ví dụ 5:

• Thuộc tính width với giá trị 500px được thêm vào để thấy rõ việc căn lề trái. 

• Thuộc tính border-radius giúp bo tròn 4 góc của phần tử <div>.

Hình 6. Kết quả hiển thị sau khi bổ sung mã lệnh CSS từ 5 ví dụ ở trên

Trong Hình 6:

• Các giá trị của thuộc tính margin được minh họa bằng các mũi tên màu đỏ.

• Các giá trị của thuộc tính padding được minh hoạ bằng các mũi tên màu xanh.

- Sự khác nhau giữa margin và padding:

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

5. Thực hành