Với đa số trang web, văn bản là thành phần quan trọng hàng đầu. Việc tác động tới cách trình bày của văn bản thông qua CSS là cách thức phổ biến để tạo ra hiệu ứng thẩm mỹ cũng như ấn tượng với người đọc.
Hôm nay Blog Mạng Lưới Toàn Cầu sẽ giới thiệu với bạn 8 thuộc tính như thế. Danh sách các thuộc tính văn bản trong CSS mà chúng ta sẽ xem xét trong bài này bao gồm:
Giờ chúng ta sẽ bắt đầu đi vào các thuộc tính cụ thể...
Thuộc tính text-indent
Nếu muốn lùi đầu dòng như thế này, bạn phải dùng đến text-indent, bạn đã thấy chữ "Nếu" đã được thụt vào so với các dòng còn lại. Đoạn code mẫu khá đơn giản p {text-indent: 30px;} Ngoài px thì các đơn vị đo lường khác như in, cm, em, % cũng được chấp nhận.
Đoạn này là thí dụ cho text-indent sử dụng đơn vị %, với giá trị cụ thể là 50%. Chữ bị thụt vào đến một nửa chiều dài của dòng. Code mẫu: p {text-indent: 50%;}
Thuộc tính letter-spacing
Thuộc tính này dùng để điều chỉnh khoảng cách giữa các chữ cái. Thông thường bạn sẽ không đả động đến letter-spacing để điều chỉnh cả đoạn văn bản. Bởi vì font chữ đã có giá trị letter-spacing tối ưu cho mắt người đọc. Quái! Nếu đã vậy thì sinh ra thuộc tính này làm gì? Câu trả lời là không phải lúc nào bạn cũng cần văn bản hiện lên theo cách thông thường. Bạn muốn chúng ấn tượng, đặc biệt hay áp dụng cho các tiêu đề hoặc đoạn ngắn. Thí dụ đoạn dưới đây:
Bình thường: Ngày 20 - 10 năm nay Anh sẽ tặng gì cho Em đây?
Giãn ra:Ngày 20 - 10 năm nay Anh sẽ tặng gì cho Em đây?
Thu hẹp: Ngày 20 - 10 năm nay Anh sẽ tặng gì cho Em đây?
Cùng một nội dung, cùng font và kích cỡ chữ nhưng bạn đã thấy sự khác biệt rất lớn phải không, dòng dưới rõ ràng là gây chú ý hơn, bởi vì nó không phải là cái quen mắt. Dĩ nhiên không chỉ giãn ra, bạn còn có thể thu hẹp khoảng cách nếu muốn bằng cách sử dụng giá trị âm cho letter-spacing.
Code mẫu:
h2 {letter-spacing: 5px;}Thuộc tính word-spacing
Nếu letter-spacing dùng để điều chỉnh khoảng cách giữa các ký tự thì word-spacing dùng để điều chỉnh khoảng cách giữa các từ. Vẫn thế, nếu để giá trị dương, các từ sẽ giãn ra, còn nếu để giá trị âm, các từ sẽ co lại gần nhau hơn, ví dụ:
Bình thường: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu!
Giãn ra: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu!
Thu hẹp: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu!
Code mẫu:
p {word-spacing: 5px;}Thuộc tính text-decoration
Nếu hay dùng thẻ a thì bạn cũng không lạ gì thuộc tính này - đặc biệt là giá trị underline. Text-decoration chuyên dùng để trang trí cho văn bản. Nói trang trí có vẻ nguy hiểm, thực tế, nó chỉ tạo ra các hiệu ứng thẩm mỹ đơn giản sau:
- Hiệu ứng gạch chân chữ, code mẫu: text-decoration: underline
- Hiệu ứng gạch ngang chữ, code mẫu: text-decoration: line-through
- Hiệu ứng gạch trên đầu chữ, code mẫu: text-decoration: overline
Gạch đầu chữ có lẽ ít dùng, gạch chân chữ hay dùng nhất, gạch ngang chữ thường dùng với ý định ám chỉ văn bản đó không chính xác nhưng không muốn xóa đi mà để người xem nhìn thấy để tránh. Riêng với gạch chân văn bản ngoài cách dùng CSS, bạn có thể đánh dấu văn bản đó bằng cặp thẻ <u> và </u> trong HTML, nó cũng cho kết quả tương tự. Sử dụng thuộc tính border-top và border-bottom cũng là ý tưởng hay để thay thế overline và underline trong một số trường hợp, vì nó cho phép chúng ta điều chỉnh khoảng cách với văn bản linh hoạt hơn.
Thuộc tính text-align
Cái này dùng để căn lề văn bản. Chắc bạn cũng không quá lạ lẫm với chúng, nếu từng xài Office rồi thì còn quen thuộc ấy chứ. Có 4 giá trị của thuộc tính text-align, bao gồm:
- left: văn bản được căn trái, theo mặc định thì mọi văn bản được căn trái.
- right: văn bản được căn phải.
- center: văn bản được căn chính giữa...chú thích trong các bức ảnh, văn bản ở phần footer và đôi khi là thẻ tiêu đề của bài viết hay được căn giữa cho vừa mắt. Người ta cũng thường căn giữa bức ảnh bằng mẹo cho nó vào thẻ div và để style cho div đó là text-align: center
- justify: văn bản được căn đều, thông thường văn bản được căn trái thì phải bên phải sẽ thụt thò, điều này thì cũng không ảnh hưởng gì, bình thường chúng ta vẫn đọc như thế thôi. Tuy nhiên nếu không muốn vậy, bạn cần dùng thuộc tính justify để cả 2 bên trái phải thẳng tắp. Nó hay được dùng khi chia cột trong các tạp chí.
Ví dụ:
Căn trái text-align: left
Căn phải text-align: right
Căn giữa text-align: center
Để thấy được ý nghĩa của thẻ justify tôi cần đoạn văn bản dài ít nhất 3 dòng, và đây chính là đoạn văn bản ấy, tôi đang cố nghĩ ra nhiều từ để viết cho nó dài ra, cho nên có thể bạn đọc thấy nó hơi lăng nhăng. Nhưng đừng quan trọng hóa. Bạn chỉ cần nhớ trong đầu là đoạn này được căn bằng text-align: justify.
Code mẫu:
p {text-align: justify}
P/S: Để 2 bên lề đều thẳng, khoảng cách chữ của từng dòng sẽ được tăng lên hay giảm đi chút ít, do vậy bạn không nên dùng thuộc tính này cho các cột có chiều rộng quá nhỏ mà văn bản lại dài, vì lúc ấy lề thì thẳng thật nhưng trông nó rất ngộ!
Thuộc tính line-height
Thuộc tính này dùng để điều chỉnh chiều cao dòng. Nói chính xác hơn line-height điều chỉnh khoảng cách giữa hai đường cơ sở của các dòng liên tiếp nhau. Những giá trị mà bạn có thể gán cho thuộc tính line-height bao gồm:
- Số thuần túy, thí dụ: 1 hoặc 2 hoặc 3...bạn có thể để số thập phân nếu muốn, chẳng hạn 1.4 - giá trị này có nghĩa là chiều cao dòng gấp 1.4 kích thước font. Kích thước mặc định mà các trình duyệt áp dụng cho line-height rơi vào khoảng giá trị là 1.2
- %, chẳng hạn 100%, 200% hay 150% - giá trị này có nghĩa là chiều cao dòng gấp 1.5 kích thước font
- Đơn vị độ dài như px, pt, in, cm...Chúng ta nên hạn chế cách này vì trong trường hợp người dùng phóng to hay thu nhỏ font thì khoảng cách sẽ bị thu hẹp hoặc giãn ra bất thường.
Dưới đây là một số ví dụ, áp dụng cho các đoạn văn bản Lorem - nên bạn không cần phải hiểu ý nghĩa của chúng:
p {line-height: 1.4}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel sem eget urna laoreet laoreet. Morbi at urna convallis enim pretium porttitor at sit amet dolor. Integer dolor nisl, blandit ut urna sit amet, sagittis rutrum elit. Nullam a lacinia ipsum. Integer eget consequat odio. In commodo nibh magna, vitae posuere purus eleifend sed.
p {line-height: 2}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel sem eget urna laoreet laoreet. Morbi at urna convallis enim pretium porttitor at sit amet dolor. Integer dolor nisl, blandit ut urna sit amet, sagittis rutrum elit. Nullam a lacinia ipsum. Integer eget consequat odio. In commodo nibh magna, vitae posuere purus eleifend sed.
p {line-height: 100%}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel sem eget urna laoreet laoreet. Morbi at urna convallis enim pretium porttitor at sit amet dolor. Integer dolor nisl, blandit ut urna sit amet, sagittis rutrum elit. Nullam a lacinia ipsum. Integer eget consequat odio. In commodo nibh magna, vitae posuere purus eleifend sed.
Dùng để biến đổi từ chữ thường sang chữ TOÀN HOA hoặc Hoa Đầu Dòng và ngược lại. Có 3 giá trị:
- uppercase: biến đoạn bất kỳ thành chữ "toàn là hoa như thế này" - code mẫu - <span style="text-transform: uppercase;">toàn là hoa như thế này</span>
- lowercase: biến đoạn bất kỳ thành chữ "TUYỀN LÀ CHỮ THƯỜNG NHƯ THẾ NÀY" - code mẫu - <span style="text-transform: lowercase;">TUYỀN LÀ CHỮ THƯỜNG THẾ NÀY</span>
- capitalize: biến đoạn bất kỳ thành chữ "hoa đầu từ như thế này" - code mẫu - <span style="text-transform: capitalize;">hoa đầu từ như thế này"</span>
Nói chung thì không phải font nào thuộc tính này nó cũng chuyển đổi tốt và đẹp cho nên trước khi muốn chuyển bạn nên kiểm tra trước. Nhưng bạn yên tâm các font phổ thông thì hầu như OK cả.
Có thể bạn hỏi text-transform này có ích lợi gì - áp dụng trong trường hợp nào? Câu trả lời là:
- Thí dụ trường nhập họ tên trong Form, bạn muốn người dùng khi nhập tên họ phải là Nguyễn Đức Anh chứ không phải là chữ thường nguyễn đức anh.
- Bạn muốn đổi kiểu chữ tiêu đề cho hàng loạt bài viết sang dạng nào đó, giờ mà thay đổi bằng tay cho từng tiêu đề thì rất mệt, bạn chỉ cần dùng text-transform để thay đổi hàng loạt.
- Và còn rất nhiều trường hợp khác mà hiện...mình chưa nghĩ ra!
Giờ thì ví dụ luôn, giờ bạn thử gõ vào trường họ tên dưới đây xem sao, dù gõ kiểu gì nó cũng ra TOÀN IN HOA hết:
Thuộc tính vertical-align
Dùng để điều chỉnh khoảng cách của văn bản so với đường cơ sở, các giá trị:
- baseline: theo mặc định vertical-align là baseline
- sub: Hãy nhìn vào chữ vertical-align, nó đang được để là sub - bạn có thể dùng cái này để thay thế tag sub trong HTML
- super: Còn trường hợp này vertical-align được để là super - bạn có thể dùng cái này để thay thế tag sup trong HTML
- middle: Bây giờ vertical-align đang được để ở chính giữa đường cơ sở
- Hoặc giá trị số bất kỳ, dương hoặc âm, ví dụ như 15px, -10px: Tôi đang để chữ vertical-align lên 15px so với đường cơ sở.
Code mẫu:
Tôi đang để chữ <span style="vertical-align: 15px;">vertical-align</span> lên 15px so với đường cơ sở.
