Bài học cùng chủ đề
Bài 14. Định dạng văn bản bằng CSS SVIP
1. Định dạng văn bản bằng CSS
a. CSS định dạng phông chữ
- font-family: Thiết lập phông được sử dụng. Mỗi phông chữ có một tên riêng, có thể được chia làm năm loại sau: serif (chữ có chân); sans-serif (chữ không chân); monospace (chữ có chiều rộng đều nhau); cursive (chữ viết tay); fantasy (chữ trừu tượng).
h1{font-family: Time, "Time New Roman", Tahoma, serif}
Sau thuộc tính font-family là một hay 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 cùng loại và tên của loại phòng đó ở vị trí cuối cùng.
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ì.
- font-size: Thuộc tính này sẽ thiết lập cỡ chữ cho nội dung của thẻ.
selector{font-size: cỡ chữ;}
Cỡ chữ có thể là một trong những dạng sau:
- Đơn vị đo chính xác tuyệt đối, ví dụ: \(cm\) (centimét), \(mm\) (milimét), \(in\) (inch = 2,54 cm), \(px\) (pixel = \(\dfrac{1}{96}\) inch), \(pt\) (point = \(\dfrac{1}{72}\) inch).
- Đơn vị đo tương đối: \(em\) (so với cỡ chữ hiện thời của trình duyệt), \(ex\) (so với chiều cao chữ x của cỡ chữ hiện thời), \(rem\) (so với cỡ chữ của phần tử gốc html của tệp HTML).
- Đơn vị theo tỉ lệ phần trăm (%) cỡ chữ của phần tử cha.
- Đơn vị theo các mức \(xx-small\), \(x-small\), \(small\), \(medium\), \(larger\), \(x-larger\), \(xx-larger\). Cỡ chữ mặc định là \(medium\).
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 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. |
- font-style: Thuộc tính này thiết lập kiểu chữ thường hay kiểu chữ nghiêng của văn bản. Thuộc tính này có hai giá trị là normal (thường) và italics (nghiêng).
- font-weight: Thuộc tính này thiết lập kiểu chữ đậm. Giá trị của thuộc tính này có thể đặt bằng chữ là normal (bình thường), bold (đậm) hoặc đặt bằng các giá trị từ 100, 200,..., 900, trong đó các mức độ viết đậm từ 500 trở lên.
em{font-style: italics; font-weight: bold;}
strong{font-style: italics; 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 viết bằng tiếng Anh.
h1{color: green;}
em{color: red;}
*{color: black;}
c. CSS định dạng dòng văn bản
Hai thành phần chính: đườ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. Mặc định \(=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.
- line-height: Thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng. Ngoài các đơn vị đo thông thường, còn có thể thiết lập các số đo tương đối.
p{line-height: 2em;}
p{line-height: 200%;}
- text-align: Thuộc tính này thiết lập căn lề cho các phần tử được chọn. Các kiểu căn hàng bao gồm: left, center, right, justify.
- text-decoration: Thuộc tính này có bốn giá trị thường sử dụng là none (mặc định, không trang trí), underline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ).
- text-indent: Thuộc tính định dạng thụt lề dòng đầu tiên. Nếu giá trị lớn hơn 0 thì dòng đầu tiên thụt vào. Nếu giá trị nhỏ hơn 0 thì dòng đầu tiên lùi ra ngoài còn gọi là thụt lề treo (hanging indent).
p{text-indent: 18px;}
p{text-indent: 2em;}
Câu hỏi:
@202869964340@@202891618224@
2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS
a. Tính kế thừa của CSS
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).
<style> body{color: blue;} h1{color: red; text-align: center;} </style>
<body> <h1>Tính kế thừa của CSS</h1> <h2>1. Mô hình cây HTML</h2> <p>Đây là đoạn đầu tiên....</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 thực hiện mẫu định dạng được viết cuối cùng.
c. Sử dụng kí hiệu * và !important
Ý nghĩa của hai kí hiệu được mô tả như sau:
- Nếu có một mẫu định dạng chứa kí hiệu * thì định dạng này sẽ áp dụng cho mọi phần tử mà chưa có trong bất cứ mẫu định dạng nào khác của CSS. Mức độ ưu tiên của * là thấp nhất.
- Kí hiệu !important đượ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.
Câu hỏi:
@202891628206@@202891630211@