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

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

KHỞI ĐỘNG

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?

Giải chi tiết:

Đoạn văn bản trên sử dụng các phông chữ và màu chữ khác nhau.

một số nhận xét về các định dạng liên quan đến phông chữ của văn bản trong mã nguồn đã cung cấp:

1. Phông chữ tổng quát:

   • body { font-family: Arial, sans-serif; }: Toàn bộ văn bản trong trang web sử dụng phông chữ Arial, với phông chữ dự phòng là sans-serif. Đây là một lựa chọn phổ biến, dễ đọc trên các trình duyệt và thiết bị khác nhau.

2. Định dạng dòng chữ:

   • line-height: 1.6;: Khoảng cách dòng (line height) được đặt là 1.6, giúp tăng khoảng cách giữa các dòng chữ, làm cho văn bản dễ đọc hơn, đặc biệt là trên các thiết bị di động hoặc màn hình nhỏ.

3. Màu chữ:

   • h1 { color: #333; }: Tiêu đề chính (h1) có màu chữ là #333 (màu xám đậm), giúp tạo sự tương phản tốt nhưng không quá chói như màu đen hoàn toàn.

   • h2 { color: #555; }: Tiêu đề phụ (h2) có màu chữ là #555 (màu xám nhạt hơn), giúp phân biệt rõ ràng với tiêu đề chính và các đoạn văn bản.

4. Khoảng cách đầu dòng:

   • p { text-indent: 20px; }: Đoạn văn được đặt thụt đầu dòng 20px, tạo cảm giác văn bản được căn chỉnh tốt hơn và giúp dễ dàng phân biệt các đoạn văn.

5. Định dạng tiêu đề:

   • h2 { border-bottom: 2px solid #ccc; padding-bottom: 5px; }: Tiêu đề phụ (h2) có đường viền dưới màu xám nhạt (#ccc) và khoảng cách dưới đường viền 5px. Điều này tạo ra sự phân tách rõ ràng giữa các phần khác nhau của nội dung, giúp người đọc dễ dàng theo dõi.

6. Tính nhất quán và dễ quản lý:

   • Việc định dạng phông chữ và các thuộc tính liên quan được thực hiện trong một nơi duy nhất (trong thẻ <style>), giúp dễ dàng quản lý và thay đổi khi cần thiết.

   • Việc sử dụng các thuộc tính CSS như font-family, line-height, và color giúp duy trì tính nhất quán về kiểu dáng và trải nghiệm người dùng trên toàn bộ trang web.

1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Hoạt động 1: Tìm hiểu các mẫu định dạng CSS định dạng văn bản

Các mẫu định dạng văn bản trong Hình 14.1 đều liên quan đến định dạng kí tự gồm phông chữ, màu chữ và kiểu chữ. Các thuộc tính của CSS liên quan bao gồm định dạng phông chữ (text font), màu chữ (text color) và dòng văn bản (text line). Quan sát và thảo luận để hiểu rõ hơn các mẫu định dạng CSS này.

Giải chi tiết:

1. Định dạng Phông Chữ (Text Font)

Thuộc tính CSS:

• font-family: Chỉ định họ phông chữ sẽ được sử dụng. Bạn có thể liệt kê nhiều phông chữ để trình duyệt lựa chọn trong trường hợp phông chữ đầu tiên không khả dụng.

body {

    font-family: Arial, Helvetica, sans-serif;

}

• font-size: Xác định kích thước của phông chữ. Có thể sử dụng các đơn vị như px, em, rem, %, vw, vh, và các từ khóa như small, medium, large, v.v.

p {

    font-size: 16px;

}

h1 {

    font-size: 2em;

}

• font-weight: Xác định độ dày của phông chữ. Có thể sử dụng các giá trị từ 100 đến 900 hoặc các từ khóa như normal, bold, bolder, lighter.

h1 {

    font-weight: bold;

}

p {

    font-weight: 300;

}

• font-style: Chỉ định kiểu của phông chữ. Các giá trị thông dụng là normal, italic, và oblique.

em {

    font-style: italic;

}

• font-variant: Chỉ định các biến thể của phông chữ, như small-caps.

h2 {

    font-variant: small-caps;

}

2. Màu Chữ (Text Color)

Thuộc tính CSS:

• color: Xác định màu sắc của chữ. Có thể sử dụng các giá trị màu HEX, RGB, RGBA, HSL, HSLA hoặc các từ khóa màu.

body {

    color: #333333;

}

a {

    color: rgb(0, 122, 255);

}

h1 {

    color: hsl(120, 100%, 25%);

}

p {

    color: rgba(255, 0, 0, 0.5);

}

3. Dòng Văn Bản (Text Line)

Thuộc tính CSS:

• line-height: Xác định chiều cao của dòng văn bản. Giá trị có thể là một đơn vị cố định (px) hoặc một hệ số nhân (number).

p {

    line-height: 1.6;

}

• text-align: Chỉ định căn chỉnh văn bản. Các giá trị thông dụng bao gồm left, right, center, và justify.

p {

    text-align: justify;

}

h1 {

    text-align: center;

}

• text-indent: Xác định độ thụt đầu dòng của dòng đầu tiên trong một khối văn bản.

p {

    text-indent: 20px;

}

• text-transform: Thay đổi cách viết của văn bản. Các giá trị bao gồm uppercase, lowercase, và capitalize.

h2 {

    text-transform: uppercase;

}

p:first-letter {

    text-transform: capitalize;

}

• letter-spacing: Xác định khoảng cách giữa các ký tự.

h1 {

    letter-spacing: 2px;

}

• word-spacing: Xác định khoảng cách giữa các từ.

p {

    word-spacing: 5px;

}

Câu hỏi 1: Giải thích các mẫu định dạng sau:

Giải chi tiết:

Trong đoạn mã CSS trên, chúng ta có hai mẫu định dạng văn bản:

- Mẫu định dạng cho tiêu đề h1:

+ color: red;: Đặt màu chữ của tiêu đề h1 thành màu đỏ.

+ text-align: center;: Căn chỉnh tiêu đề h1 ở giữa trên trang.

- Mẫu định dạng cho đoạn văn bản trong thẻ p:

+ text-align: justify;: Căn chỉnh đoạn văn bản trong thẻ p theo kiểu dàn trang đều, với cả hai mép trái và phải được căn chỉnh.

Câu hỏi 2: Giả sử mẫu định dạng CSS có định dạng sau:

Hãy kiểm tra tác dụng của CSS này trên một tệp HTML bất kì và đưa ra nhận xét.

Giải chi tiết:

Mẫu định dạng CSS <style> body {color: blue;} </style> sẽ áp dụng một thuộc tính cho phần tử <body> của tệp HTML. Cụ thể là color: blue;, điều này đặt màu chữ của toàn bộ nội dung trong phần tử <body> thành màu xanh lam.

Ví dụ:

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

Hoạt động 2: Tìm hiểu tính kế thừa và cách chọn thứ tự ưu tiên của CSS

Quan sát, tìm hiểu, trao đổi và trả lời các câu hỏi sau:

1. Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập ở một phần từ HTML thì định dạng đó có áp dụng cho tất cả các phần tử con, cháu của phần tử này không?

2. Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên nào.

Giải chi tiết:

1. Các mẫu định dạng trong CSS có tính kế thừa trong mô hình cây HTML. Khi một mẫu định dạng được áp dụng cho một phần tử HTML, định dạng đó sẽ áp dụng cho tất cả các phần tử con, cháu của phần tử đó, trừ những trường hợp ngoại lệ.

Tuy nhiên, đôi khi các phần tử con, cháu có thể có các mẫu định dạng riêng mà không kế thừa từ phần tử cha. Điều này có thể được thực hiện bằng cách định rõ mẫu định dạng cho các phần tử con, cháu đó.

2. Khi có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML, trình duyệt sẽ áp dụng các mẫu định dạng này theo thứ tự ưu tiên nhất định. Thứ tự ưu tiên của các mẫu CSS được xác định như sau:

- Mẫu CSS được viết cuối cùng trong tệp CSS sẽ có ưu tiên cao hơn các mẫu trước đó. Điều này có nghĩa là nếu có các định dạng trùng nhau cho cùng một phần tử, thì định dạng cuối cùng sẽ được áp dụng.

- Ngoài ra, sử dụng kí hiệu !important trong một mẫu định dạng có nghĩa là định dạng đó sẽ có ưu tiên cao nhất, không phụ thuộc vào vị trí của nó trong tệp CSS. Điều này có nghĩa là mẫu định dạng với !important sẽ ghi đè lên các định dạng khác cho cùng một phần tử.

Câu hỏi 1: Giả sử có mẫu định dạng sau:

Khi đó toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông có chân, đúng hay sai?

Giải chi tiết:

Đúng, toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông chân (serif) trong trường hợp này.

Câu 2: Giả sử có mẫu định dạng như sau:

Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p.

Giải chi tiết:

- Quy tắc body {font-family: sans-serif;} sẽ được áp dụng cho phần tử <body> và các phần tử con của nó, đặt phông chữ của chúng thành phông chân (sans-serif).

- Quy tắc h1 {text-align: left;} sẽ được áp dụng cho tất cả các phần tử <h1>, đặt thuộc tính text-align thành "left".

- Quy tắc h1 {text-align: center !important;} sẽ không được áp dụng đúng cú pháp CSS vì thiếu ký tự đóng ngoặc nhọn. Do đó, quy tắc này sẽ bị bỏ qua và không có tác động lên phần tử <h1>.

- Quy tắc * {font-family: serif;} sẽ được áp dụng cho tất cả các phần tử, đặt phông chữ của chúng thành phông chân (serif).

LUYỆN TẬP

Câu 1: Mỗi phông chữ sau đây thuộc loại nào?

Giải chi tiết:

Tên phông chữ sẽ tương ứng với các ý.

Câu 2: Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau:

Giải chi tiết:

Các em sử dụng mã HTML như sau:

Khi chạy mã sẽ hiển thị: 

VẬN DỤNG

Câu 1: Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-space (khoảng cách giữa các kí tự), word-space (khoảng cách các từ) và text-shadow (chữ bóng).

Giải chi tiết:

Một số thuộc tính phông chữ và dòng văn bản bổ sung để hiểu rõ hơn về cách chúng hoạt động và có thể được sử dụng để định dạng văn bản một cách hiệu quả hơn.

Thuộc tính Phông Chữ

1. font-variant

• font-variant: Thuộc tính này được sử dụng để tạo ra các biến thể của phông chữ. Một trong những giá trị phổ biến nhất là small-caps, biến tất cả các chữ cái thành chữ hoa nhỏ hơn, nhưng vẫn giữ được độ lớn của chữ hoa ban đầu.

h2 {

    font-variant: small-caps;

}

• Ví dụ sử dụng:

<style>

    p.normal {

        font-variant: normal;

    }

    p.small-caps {

        font-variant: small-caps;

    }

</style>

<p class="normal">Đây là văn bản bình thường.</p>

<p class="small-caps">Đây là văn bản chữ hoa nhỏ.</p>

Thuộc tính Dòng Văn Bản

1. letter-spacing

• letter-spacing: Thuộc tính này xác định khoảng cách giữa các ký tự trong một văn bản. Giá trị có thể là bất kỳ đơn vị độ dài hợp lệ nào (px, em, rem, %).

h1 {

    letter-spacing: 2px;

}

• Ví dụ sử dụng:

<style>

    h1 {

        letter-spacing: 3px;

    }

</style>

<h1>Khoảng cách giữa các ký tự</h1>

2. word-spacing

• word-spacing: Thuộc tính này xác định khoảng cách giữa các từ trong một văn bản. Giá trị có thể là bất kỳ đơn vị độ dài hợp lệ nào (px, em, rem, %).

p {

    word-spacing: 5px;

}

• Ví dụ sử dụng:

<style>

    p {

        word-spacing: 10px;

    }

</style>

<p>Khoảng cách giữa các từ.</p>

3. text-shadow

• text-shadow: Thuộc tính này thêm bóng đổ cho văn bản. Nó nhận 2-4 giá trị: độ dịch chuyển theo trục x, độ dịch chuyển theo trục y, bán kính mờ của bóng (tùy chọn), và màu sắc của bóng (tùy chọn).

h1 {

    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

}

• Ví dụ sử dụng:

<style>

    h1 {

        text-shadow: 3px 3px 5px #888888;

    }

</style>

<h1>Bóng đổ cho văn bản</h1>

Câu 2: Với bài đọc thêm Lịch sử CSS (Bài 13), em hãy thiết lập hai tệp CSS khác nhau để định dạng cho trang web mô tả bài đọc thêm này. Hai kiểu định dạng được thiết lập cần khác nhau về phông chữ, cỡ chữ và màu chữ.

Giải chi tiết:

Gợi ý kiểu định dạng:

- Kiểu 1:

- Kiểu 2: