2.2.4 Căn dòng văn bản
Ở các phần trước đã học cách định dạng hiển thị của từng chữ, phần này sẽ tìm hiểu cách định dạng hiển thị của các dòng văn bản. Ví dụ: thụt đầu dòng, khoảng cách giữa các dòng, căn chỉnh theo chiều ngang.
Một số khái niệm
Để dễ hiểu, cùng tìm hiểu một số khái niệm liên quan đến một dòng văn bản, xem hình minh họa,
– Đường cơ sở (baseline) là đường được dùng làm mặt nền, để đặt các kí tự có đáy phẳng hoặc đáy tròn (ví dụ: a, b, c, d, e, o,u, i, n)
– Đường trung bình (mean line) là đường dùng để chặn trên các kí tự thông thường (ví dụ: a, c, e, o, u, v)
– Khoảng cách từ đường cơ sở tới đường trung bình được gọi là chiều cao cơ bản của một dòng, tiếng Anh gọi là x-height
– Đường đáy (descent line) là đường dùng làm mặt đáy để chặn dưới các kí tự có phần nằm dưới đường trung bình (ví dụ: y, g, p, q)
– Đường trần (ascent line) là đường dùng làm mặt trần để chặn trên các kí tự có phần nằm trên đường trung bình (ví dụ: b, d, h, k, l)
Thuộc tính line-height
Sử dụng thuộc tính line-height để thiết lập khoảng cách tối thiểu giữa hai đường cơ sở. Gọi là khoảng cách tối thiểu vì nếu chèn một hình ảnh hoặc một chữ lớn hơn bình thường vào một dòng thì khoảng cách này sẽ được tự động tăng lên.
Thực tế, trình duyệt sẽ thực hiện chèn thêm khoảng trắng bằng nhau ở phía trên và phía dưới của dòng văn bản và thực hiện căn giữa (dòng) phần văn bản.
Dưới đây là một số đặc tính của line-height,
– Giá trị: số | đơn vị đo chiều dài | phần trăm | normal | inherit
– Mặc định: normal
– Áp dụng: cho mọi phần tử
– Kế thừa: có
Ví dụ sau là ba cách để thiết lập giá trị line-height bằng hai lần kích thước phông (font-size),
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; }
Nếu giá trị của line-height là một số, thì đó là hệ số được sử dụng để nhân với kích thước phông của phần tử hiện tại. Nếu giá trị của line-height là em hoặc phần trăm, thì đó là hai đơn vị đo tương đối, dựa trên kích thước phông của phần tử hiện tại.
Xem hình minh họa,
Thuộc tính text-indent
Thuộc tính text-indent được sử dụng để thiết lập khoảng lùi của hàng đầu tiên trong một đoạn. Nếu muốn thiết lập khoảng lùi cho cả đoạn, sử dụng thuộc tính margin hoặc padding.
Dưới đây là một số đặc tính của text-indent,
– Giá trị: đơn vị đo chiều dài | phần trăm | inherit
– Mặc định: 0
– Áp dụng: phần tử kiểu block, ô của bảng, phần tử kiểu inline block
– Kế thừa: có
Ví dụ,
p#1 { text-indent: 2em; }
p#2 { text-indent: 25%; }
p#3 { text-indent: -35px; }
Giá trị của thuộc tính text-indent có thể là em, % hoặc px. Giá trị % được tính dựa trên độ rộng (width) của phần tử cha. Giá trị -35px sẽ dịch chuyển hàng đầu tiên về phía bên trái của đoạn (thò đầu hàng – hang out). Xem hình minh họa,
Lưu ý:
– Thuộc tính text-indent có kế thừa xuống cho các hậu duệ, tuy nhiên, nó sẽ kế thừa giá trị đã được tính toán. Ví dụ, một div với chiều rộng là 800px, với text-indent là 10%, vậy giá trị text-indent sẽ chuyển xuống các hậu duệ sẽ là 80px chứ không phải là 10%.
– Nếu thiết lập giá trị text-indent là giá trị âm (ví dụ -35px), thì phải đảm bảo là có thiết lập giá trị cho left margin, để đảm bảo phần chữ thò ra không bị che mất trên màn hình giao diện.
Căn chỉnh đoạn văn bản theo chiều ngang
Để căn chỉnh đoạn văn bản theo chiều ngang, sử dụng thuộc tính text-align.
Dưới đây là một số đặc tính của text-align,
– Giá trị: left | right | center | justify | inherit
– Mặc định: left (với ngôn ngữ đọc từ trái qua phải), right (với ngôn ngữ đọc từ phải qua trái)
– Áp dụng: phần tử kiểu block, ô của bảng, phần tử kiểu inline block
– Kế thừa: có
Ý nghĩa các giá trị của thuộc tính text-align,
– left: căn lề trái
– right: căn lề phải
– center: căn giữa
– justify: căn đều hai bên
2.2.5 Gạch chân và gạch ngang
Để gạch chân, gạch ngang, gạch trên, bỏ dấu gạch chân cho các liên kết, sử dụng thuộc tính text-decoration.
Dưới đây là một số đặc tính của text-decoration,
– Giá trị: none | underline | overline | line-through
– Mặc định: none
– Áp dụng: cho tất cả phần tử
– Kế thừa: không
Ý nghĩa các giá trị của thuộc tính text-decoration,
– underline: gạch dưới
– overline: gạch trên
– line-through: gạch giữa
Thuộc tính text-decoration được sử dụng nhiều nhất khi muốn bỏ dấu gạch chân cho các liên kết, ví dụ,
a { text-decoration: none; }
2.2.6 Định dạng chữ hoa, chữ thường
Sử dụng thuộc tính text-transform để chuyển qua lại giữa các dạng chữ hoa và chữ thường, mà không cần phải gõ lại. Lưu ý: việc chuyển đổi chữ hoa/chữ thường được thực hiện khi trình duyệt kết xuất ra màn hình chứ không thay đổi trong mã nguồn.
Dưới đây là một số đặc tính của text-transform,
– Giá trị: none | capitalize | lowercase | uppercase | inherit
– Mặc định: none
– Áp dụng: cho tất cả phần tử
– Kế thừa: có
Ví dụ,
Ý nghĩa các giá trị của thuộc tính text-transform,
– capitalize: viết hoa kí tự đầu tiên của mỗi chữ
– lowercase: viết thường
– uppercase: viết hoa toàn bộ
– none: hiển thị như trong mã nguồn
2.2.7 Khoảng cách giữa các kí tự, chữ
Để thiết lập khoảng cách giữa các kí tự, sử dụng thuộc tính letter-spacing.
Dưới đây là một số đặc tính của letter-spacing,
– Giá trị: đơn vị đo chiều dài | normal | inherit
– Mặc định: none
– Áp dụng: cho tất cả phần tử
– Kế thừa: có
Để thiết lập khoảng cách giữa các chữ, sử dụng thuộc tính word-spacing.
Dưới đây là một số đặc tính của word-spacing,
– Giá trị: đơn vị đo chiều dài | normal | inherit
– Mặc định: none
– Áp dụng: cho tất cả phần tử
– Kế thừa: có
Ví dụ,
p { letter-spacing: 8px; }
p { word-spacing: 1.5em; }
Lưu ý: khi giá trị của thuộc tính là em, lúc kế thừa cho phần tử con, nó sẽ chuyển cho phần tử con giá trị đã được tính ra px (chứ không phải giá trị dạng em).
.jpg)
.jpg)
){kind=link}
0 Nhận xét