1
Định dạng văn bản
Sau khi học xong phần Tổng quan về CSS, chúng ta đã biết được:
– Chức năng của CSS là định dạng, trang trí cho trang web. Chúng
ta sẽ viết các chỉ dẫn định dạng (style rule) để mô tả cách hiển thị của mỗi phần
tử HTML.
– Do các phần tử HTML có cấu trúc phân cấp (hierarchy), nên
có nhiều định dạng CSS sẽ được kế thừa từ phần tử cha xuống phần tử con.
– Vì chúng ta có thể viết mã CSS ở nhiều nơi khác nhau, cộng
với tính kế thừa, sẽ dẫn tới tình trạng một phần tử HTML có thể nhận nhiều định
dạng CSS cùng lúc. Do vậy, chúng ta cần phải nắm được kĩ thuật Xếp lớp trong định
dạng. Cụ thể là biết được cách CSS xác định độ ưu tiên của mỗi chỉ dẫn.
– Trước khi CSS cho một trang web, thì nên chuyển định dạng
của một số phần tử HTML về trạng thái chuẩn, để nó hiển thị đồng nhất trên các
trình duyệt khác nhau.
– Mỗi phần tử HTML sẽ có một hình chữ nhật tương ứng gọi là
mô hình cái hộp (box model)
– Sử dụng các đơn vị đo một cách hợp lý, chuyên nghiệp
Khi mới ra đời, nội dung trang web chỉ toàn là văn bản, và các
nhà nghiên cứu đã sử dụng trang web để chia sẻ những chủ đề họ đang nghiên cứu.
Trên các trang web hiện nay, nội dung dạng văn bản cũng chiếm tỉ trọng rất lớn
(bên cạnh hình ảnh, âm thanh, video). Vì vậy, chúng ta cần biết cách trình bày
văn bản sao cho chuyên nghiệp, cuốn hút người xem.
Để trình bày văn bản, chúng ta sẽ tìm hiểu các chủ đề sau:
– Phông chữ
– Màu chữ
1.1
Phông chữ
Phông chữ, tiếng
Anh là font, là tập hợp các kí tự có
cùng kiểu chữ (typeface, font-family). Bạn có thể dùng 3 thuật ngữ font,
typeface và font-family thay thế cho nhau.
|
Với mỗi thuộc tính trong tài liệu này sẽ được mô
tả theo cú pháp sau: |
|
– Giá trị (values): các giá trị hợp lệ cho thuộc
tính – Phạm vi áp dụng (applies to): một số thuộc tính
chỉ áp dụng trên một vài loại phần tử cụ thể, chứ không áp dụng trên mọi phần tử. – Kế thừa: cho biết thuộc tính này có được kế thừa xuống các hậu duệ của nó (descendants) hay không |
Để chọn phông chữ,
sử dụng thuộc tính font-family:
– Giá trị: tên của
một hoặc nhiều phông chữ hoặc loại phông chữ (generic name, hay generic font families)
– Giá trị mặc định:
tùy theo trình duyệt
– Phạm vi áp dụng:
cho mọi phần tử HTML
– Kế thừa: có
Chúng ta sẽ cùng
thực hành với thuộc tính font-family.
Ví dụ, chọn phông chữ là Arial để áp dụng
cho phần tử body.
…
<style>
body {
font-family: Arial;
}
</style>
</head>
<body>
<p>Học về phông chữ</p>
</body>
…
Khi hiển thị trang web, trình duyệt sẽ tìm phông chữ Arial trên máy tính của người dùng (chứ
không phải trên máy tính của lập trình viên) để áp dụng cho nội dung trang web.
Trên máy tính chạy Windows,
các phông chữ được để ở thư mục C:\Windows\fonts.
Xem hình minh họa.
Như vậy, nếu lập trình viên sử dụng phông chữ mà trên máy
người dùng không có, thì trình duyệt sẽ lấy phông chữ mặc định của nó để sử dụng.
Để tránh trường hợp, máy tính không có phông chữ như mong muốn,
bạn nên khai báo một dãy các phông chữ tương đồng, và cuối dãy luôn là loại phông.
Ví dụ,
font-family: Verdana, Arial, Helvetica, sans-serif;
Trình duyệt sẽ tìm các phông chữ theo thứ tự (ưu tiên) từ trái
sang phải. Theo đó, phông chữ Verdana được ưu tiên cao nhất, nếu không có sẽ tìm phông
chữ Arial, theo sau là Helvetica, nếu trên máy người dùng vẫn không có, thì tìm
một phông chữ bất kì (miễn là cùng loại sans-serif).
Một vài lưu ý khi liệt kê các phông chữ:
– Tên phông chữ phải viết hoa chữ cái đầu tiên (ví dụ: Verdana);
loại phông viết thường (ví dụ: sans-serif)
– Nếu tên phông gồm nhiều chữ thì bao lại bằng dấu nháy kép
(""), ví dụ "Times New Roman"
– Sử dụng dấy phẩy (,) để ngăn cách giữa các tên phông chữ.
Trong quá trình định dạng văn bản, bạn có thể chỉ cần làm theo bản thiết kế, khi đó đã có sẵn tên các phông chữ do nhà thiết kế lựa chọn. Tuy nhiên, trong nhiều trường hợp bạn phải chủ động chọn phông chữ cho phù hợp. Vì vậy, chúng ta cần học thêm các chủ đề liên quan đến lựa chọn và phối hợp phông chữ sao cho chuyên nghiệp (typography).
Để biết được các phông chữ nào là tương đồng nhau, chúng ta
cùng tìm hiểu về các loại phông chữ phổ biến trong CSS.
Một số loại phông chữ
phổ biến
Trong CSS, có năm loại phông chữ (generic font family) phổ biến, gồm: serif, sans-serif, monospace, cursive
và fantasy.
serif
Serif có nghĩa là những nét nhỏ được thêm vào các chữ. Người ta hay gọi serif là “chữ có chân”.
Ví dụ các phông chữ thuộc loại serif: Times, Times New Roman, Georgia, Lucida. Xem hình minh họa.
sans-serif
Ngược lại với serif, sans-serif là loại chữ “không có chân”, sans
trong tiếng Latinh có nghĩa là “không”
(without).
Ví dụ các phông chữ thuộc loại sans-serif: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva. Xem
hình minh họa.
monospace
Monospace là loại chữ mà các kí tự có độ rộng bằng nhau (constant width). Mono nghĩa là duy nhất, đơn nhất; space nghĩa là khoảng rộng.
Trong phông chữ loại monospace, cho dù là chữ “w” hay chữ
“i” thì cũng chiếm độ rộng giống nhau.
Ví dụ các phông chữ thuộc loại monospace: Courier, Courier New, Andale Mono. Xem hình minh họa.
cursive
Cursive là loại chữ viết tay (script, handwritten).
Ví dụ các phông thuộc loại cursive: Apple Chancery, Snell, Comic Sans. Xem hình minh họa.
fantasy
Fantasy là loại chữ dùng nhiều trong thiết kế trang trí, tạo tiêu đề.
Ví dụ các phông thuộc loại fantasy: Impact, Western. Xem hình minh họa.
-----
Cập nhật: 5/4/2023
-----
Bạn muốn tự học HTML bài bản? Xem thêm