Định dạng văn bản bằng CSS

Giới thiệu

Định dạng văn bản bằng CSS sẽ cho các bạn thấy cách chúng ta định dạng nôi trung trang web. Nếu chúng ta sử dụng HTML để định dạng nội dung thì khi có sự thay đổi về định dạng, chúng ta phải thay đổi ở tất cả các trang web có thay đổi.

Màu sắc văn bản

Thuộc tính color được sử dụng để thiết lập màu sắc cho văn bản.

Với CSS, màu sắc thường được chỉ định bởi:

• một giá trị HEX – ví dụ “#ff0000”
• một giá trị RGB – ví dụ “rgb(255,0,0)”
• một tên màu sắc (bằng tiếng Anh) – ví dụ “red”

Hãy xem Các giá trị màu CSS bạn sẽ thấy một danh sách đầy đủ các giá trị có thể cho màu sắc.
Màu mặc định của văn bản trong một trang được xác định bởi bộ chọn body như sau.

Ví dụ

Lưu ý: Nếu bạn định nghĩa thuộc tính color bạn cũng nên định nghĩa luôn thuộc tính background-color.

Căn chỉnh văn bản

Thuộc tính text-align được sử dụng để căn chỉnh theo chiều ngang cho một văn bản. Một văn bản có thể được canh trái hoặc canh phải, canh giữa, hoặc dàn đều (justified). Ví dụ sau cho thấy canh giữa, canh trái và canh phải văn bản (canh trái là mặc định nếu hướng của văn bản là trái sang phải, và canh phải là mặc định nếu hướng của văn bản là phải-sang-trái):

Ví dụ

Khi thuộc tính text-align được thiết lập là “justify”, mỗi dòng sẽ được kéo dãn do đó chúng có chiều rộng bằng nhau, và các lề trái và phải thẳng hàng nhau (như trong các tờ báo\tạp chí):

Ví dụ

Trang trí văn bản

Thuộc tính text-decoration được sử dụng để thiết lập hoặc loại bỏ trang trí khỏi văn bản. Giá trị text-decoration: none; thường được sử dụng để loại bỏ các dấu gach chân khỏi các liên kết:

Ví dụ

Các giá trị khác của text-decoration được sử dụng để trang trí văn bản:

Lưu ý: Nên tránh để gạch chân với các văn bản không phải là liên kết vì sẽ dễ gây hiểu nhầm.

Chuyển đổi văn bản

Thuộc tính text-transform được sử dụng để chỉ định ký tự chữ hoa và chữ thường trong một văn bản. Nó có thể được sử dụng để chuyển tất cả mọi thứ thành chữ hoa hoặc chữ thường, hoặc in hoa chữ cái đầu tiên của mỗi từ:

Ví dụ

Thụt lề văn bản

Thuộc tính text-ident được sử dụng để chỉ định thụt lề dòng đầu tiên của một đoạn văn bản:

Ví dụ

Khoảng cách giữa các ký tự

Thuộc tính letter-spacing được sử dụng để xác định khoảng cách giữa các ký tự trong một văn bản. Ví dụ sau cho thấy cách để tăng hoặc giảm khoảng cách giữa các ký tự:

Ví dụ

Chiều cao dòng

Thuộc tính line-height được sử dụng để xác định khoảng cách giữa các dòng:

Ví dụ

Hướng của văn bản

Thuộc tính direction được sử dụng để thay đổi hướng văn bản của một phần tử:

Ví dụ

Khoảng cách giữa các từ

Thuộc tính word-spacing được sử dụng để xác định khoảng cách giữa các từ trong một văn bản. Ví dụ sau cho thấy cách để tăng hoặc giảm khoảng cách giữa các từ:

Ví dụ

Kết luận

Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.