Bài 14. Định dạng văn bản bằng CSS
SAU BÀI HỌC NÀY EM SẼ:
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?
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.
a) CSS định dạng phông chữ
CSS hỗ trợ thiết lập các thuộc tính liên quan đến chọn phông (font-family), cỡ chữ (font-size), kiểu chữ (font-style) và các thuộc tính khác.
Các phông ưu tiên theo thứ tự Times, 'Times New Roman', Tahoma, cuối cùng là một phông cùng loại có chân bất kì.
p {font-family: Times, 'Times New Roman', Tahoma, serif;}
Trong ví dụ trên, sau thuộc tính font-family là một danh sách các tên phông chữ. Nếu tên phông chữ có chứa dấu cách thì cần đặt trong hai dấu nháy kép (hoặc nháy đơn). Danh sách các phông chữ này thường kết thúc bằng tên của loại phông đó ở vị trí cuối. Nếu đưa ra một danh sách các phông chữ, trình duyệt sẽ lần lượt tìm các phông trong danh sách từ trái sang phải. Nếu không tìm thấy phông chữ nào trong danh sách thì sẽ chọn phông cùng loại bất kì.
Thuộc tính font-size sẽ thiết lập cỡ chữ. Cú pháp của mẫu định dạng như sau: selector {font-size: cỡ chữ;}Cỡ chữ có thể là một trong những dạng sau:
96 72| Mẫu CSS | Ý nghĩa |
| p {font-size: 1.2em;} | Thiết lập cho toàn bộ các phần tử p có cỡ chữ bằng 1,2 lần cỡ chữ của trình duyệt hiện thời. |
| html {font-size: 100%;} | Thiết lập cỡ chữ mặc định cho toàn bộ trang web theo chế độ mặc định của trình duyệt. |
Ví dụ: Mẫu sau thiết lập các thẻ strong và em với kiểu chữ nghiêng và đậm khác nhau.
em {font-style: italic; font-weight: bold;} strong {font-style: italic; font-weight: 900;}b) CSS định dạng màu chữ
Thuộc tính color sẽ thiết lập màu chữ. Một số giá trị màu cơ bản cho thuộc tính này như sau: black (đen), white (trắng), purple (tím), blue (xanh dương), orange (cam), red (đỏ), green (xanh lá cây), yellow (vàng).
Một số ví dụ thiết lập thuộc tính màu chữ.
h1 {color: red;} em {color: green;} * {color: black;}Bộ chọn với kí tự * là tất cả các phần tử HTML của trang web. Khi áp dụng CSS trên thì các phần tử h1 có chữ màu đỏ, các phần tử em có chữ màu xanh lá cây, còn toàn bộ các phần tử còn lại có chữ màu đen.
c) CSS định dạng dòng văn bản
Các mẫu định dạng loại này sẽ thiết lập các thuộc tính liên quan đến các dòng văn bản. Định dạng dòng văn bản cần biết đường cơ sở (baseline) và chiều cao dòng văn bản (line-height).
Đườ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 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 dòng bằng 2em và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới văn bản. Hình 14.3 cho chúng ta hình dung đường cơ sở (baseline) và chiều cao (line-height).
p {line-height: 3;} /* thiết lập chiều cao bằng 3 lần cỡ chữ hiện thời của trình duyệt */
p {line-height: 2em;} /* thiết lập chiều cao dòng bằng 2 lần chiều cao dòng hiện thời */
p {line-height: 200%;} /* thiết lập chiều cao dòng bằng 200% của chiều cao dòng của phần tử cha mà phần tử hiện thời được kế thừa */p {text-align: right;} /* thiết lập căn phải */| text-decoration: underline | text-decoration: overline | text-decoration: line-through |
Hình 14.4. Các định dạng đường kẻ ngang dòng văn bản
PVí dụ:
p {text-indent: 10px;} /* Dòng đầu tiên thụt vào 10 pixel */
p {text-indent: 2em;} /* Dòng đầu tiên thụt vào 2 kí tự */
p {text-indent: 5%;} /* Dòng đầu tiên thụt vào một khoảng cách bằng 5% chiều rộng của phần tử cha */Các mẫu định dạng văn bản cơ bản bao gồm các thuộc tính liên quan đến phông chữ, màu chữ và định dạng dòng văn bản:
1. Giải thích các mẫu định dạng CSS sau:
<style> h1 {color: red; text-align: center;} p {text-align: justify;}2. Giả sử mẫu định dạng CSS có dạng sau:
<style> body {color: blue;}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.
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:
a) Tính kế thừa của CSS
Một tính chất rất quan trọng của CSS là tính kế thừa. 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ự á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). Ví dụ CSS sau định dạng chữ màu xanh dương cho thẻ body:
<style> body {color: blue;} h1 {color: red; text-align: center;}Trong Hình 14.5, chỉ thẻ h1 có chữ màu đỏ do được định dạng theo mẫu CSS riêng, còn các phần tử h2 và p đều kế thừa từ phần tử cha body có chữ màu xanh.
<body> <h1>Tính kế thừa của CSS</h1> <h2>Mô hình cây HTML</h2> <p> </p> </body>
b) Thứ tự ưu tiên khi áp dụng mẫu CSS
Do được phép có nhiều mẫu định dạng CSS nên có thể xảy ra trường hợp nhiều mẫu cùng áp dụng cho một phần tử HTML. Khi đó câu hỏi đặt ra là: trình duyệt sẽ chọn các mẫu định dạng theo thứ tự ưu tiên nào để áp dụng?
Khi đó trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng. Đây chính là tính chất "cascading" của CSS. Trong ví dụ, mẫu CSS sau có hai định dạng cùng được viết áp dụng cho h1, mẫu đầu quy định căn giữa, mẫu sau quy định căn trái.
<style> body {color: blue;} h1 {color: red; text-align: center;} h1 {text-align: left;} </style>Khi áp dụng trong ví dụ sau, phần tử h1 được căn trái theo mẫu cuối cùng của CSS:
<body> <h1>Tính kế thừa của CSS</h1> <h2>Mô hình cây HTML</h2> <p>Đây là đoạn văn đầu tiên</p> </body>
c) Sử dụng kí hiệu * và !important
CSS còn cho phép sử dụng kí hiệu * và !important với ý nghĩa như sau:
Ví dụ: Có ba mẫu CSS với cùng bộ chọn là h1. Mẫu đầu tiên có kí hiệu !important với thuộc tính 'text-align: center;' nên thuộc tính này sẽ được ưu tiên áp dụng. Mẫu thứ hai có kí hiệu 'color: red;' thì thuộc tính màu sắc sẽ được ưu tiên áp dụng. Mẫu cuối cùng có kí hiệu *, có mức ưu tiên thấp nhất mặc dù nó được viết ở vị trí cuối cùng. Kết quả áp dụng CSS trên cho tệp HTML như Hình 14.7.
<style> h1 {text-indent: 2em; color: blue; text-align: center !important;} h1 {text-align: left; color: red;} * {text-indent: 1em; color: blue;}Lịch sử CSS
Ý tưởng của CSS do kĩ sư Håkon Wium Lie, nhân viên CERN
a) Mã HTML b) Hiển thị trong trình duyệt Hình 14.7. Minh hoạ sử dụng các kí hiệu và !important
Các mẫu định dạng CSS được áp dụng theo nguyên tắc kế thừa trong mô hình cây HTML. Nếu mẫu định dạng được viết cho một phần tử thì sẽ được áp dụng mặc định cho tất cả các phần tử con, cháu. Nếu có nhiều mẫu định dạng được viết cho cùng một bộ chọn thì mẫu viết sau cùng sẽ được áp dụng. Nếu bộ chọn có kí tự * thì được áp dụng cho mọi phần tử nhưng với độ ưu tiên thấp nhất. Ngược lại, mẫu định dạng với kí hiệu !important có mức ưu tiên cao nhất.
1. Giả sử có mẫu định dạng sau:
<style> body {font-family: sans-serif;}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?
2. Giả sử có mẫu định dạng như sau:
<style> body {font-family: sans-serif;} h1 {text-align: center !important;} h1 {text-align: left;} * {font-family: serif;}Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p?
3. THỰC HÀNH
Nhiệm vụ 1: Thiết lập mẫu định dạng CSS
Yêu cầu: Thiết lập mẫu định dạng CSS để trình bày nội dung văn bản trong Hình 14.8 trên trang web.
Kĩ thuật chia để trị
Chia để trị (Divide and Conquer) là một kĩ thuật thiết kế thuật toán và chương trình rất hay và quan trọng.
Từ bài toán ban đầu (kí hiệu P), chúng ta chia thành các bài toán nhỏ hơn về kích thước (nhưng vẫn giữ nguyên tính chất), giải quyết chúng một cách đệ quy hoặc trực tiếp, sau đó kết hợp lại để giải bài toán gốc (P) ban đầu.
Ý tưởng của kĩ thuật chia để trị
Văn bản trong Hình 14.8 cần được trình bày theo yêu cầu sau:
Hướng dẫn:
h1, h2 { font-family: sans-serif; font-size: 16px; color: red; text-align: left; } p { font-family: serif; text-align: left; text-indent: 2em; }Nhiệm vụ 2: Thiết lập mẫu định dạng CSS
Yêu cầu: Thiết lập định dạng cho trang web ở Nhiệm vụ 1 với các yêu cầu sau:
Hướng dẫn:
h1, h2 {font-size: 16px; color: blue; text-align: center;} p {text-align: justify; text-indent: 2em;} strong, em {font-size: 100%;}LUYỆN TẬP
Trời Hà Nội xanh
Xanh xanh thắm bầu trời xanh Hà Nội
Hồ Gươm xanh như mái tóc em xanh