Các thuộc tính Text trong CSS

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

Thuộc tính color được sử dụng để thiết lập màu sắc của text (văn bản). Với CSS, màu sắc thường xác định bởi:

• một tên màu, như “red” (màu đỏ)
• giá trị HEX, như “#ff0000”
• giá trị RGB, như “rgb(255,0,0)”

Mặc định màu chữ trên một trang được xác định là màu của phần body.

body {
    color: blue;
}

h1 {
    color: green;
}

Lưu ý: với CSS tuân thủ W3C, nếu bạn xác định thuộc tính color, bạn cũng phải xác định color-background.

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

Thuộc tính text-align được sử dụng để thiết lập căn chỉnh một văn bản theo chiều ngang. Văn bản có thể được căn chỉnh sang trái, phải, căn giữa hoặc theo dạng justified.

Ví dụ dưới đây thể hiện văn bản căn giữa, trái hoặc phải (căn lề trái là mặc định nếu hướng văn bản trái sang phải, và canh lề bên phải là mặc định nếu hướng văn bản là phải-sang trái):

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Khi thuộc tính text-align có giá trị “justify”, mỗi hàng văn bản sẽ được kéo dài sao cho các lề trái, lề phải nằm thẳng một cột với nhau.

div {
    text-align: justify;
}

Trang trí văn bản

Thuộc tính text-decoration được sử dụng để thiết lập hoặc xóa định dạng trang trí khỏi văn bản. Giá trị text-decoration: none; được sử dụng để loại bỏ định dạng gạch chân văn bản chứa link:

a {
    text-decoration: none;
}

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

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Lưu ý: không khuyến nghị sử dụng văn bản gạch chân mà không có link, vì điều này dễ gây hiểu nhầm cho người đọc.

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

Thuộc tính text-transform được sử dụng để xách định văn bản viết hoa hoặc viết thường. Thuộc tính này có thể dùng để chuyển mọi văn bản thành viết thường, viết hoa hay viết hoa chữ cái đầu tiên của mỗi từ.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Thụt lề văn bản

Thuộc tính text-indent được sử dụng để thụt lề dòng đầu tiên của văn bản.

p {
    text-indent: 50px;
}

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

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

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

Chiều cao của dòng văn bản

Thuộc tính line-height dùng để xác định chiều cao của dòng văn bản:

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

Hướng văn bản

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

p {
    direction: rtl;
}

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

Thuộc tính word-spacing xác định khoảng cách giữa các từ trong một văn bản. Ví dụ dưới đây cho bạn thấy các tăng, giảm khoảng cách giữa các từ:

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Đổ bóng văn bản

Thuộc tính text-shadow thêm bóng vào văn bản. Ví dụ dưới đây xác định vị trí bóng theo chiều ngang (3px), vị trí bóng theo chiều dọc (2px) và bóng màu đỏ (red):

h1 {
    text-shadow: 3px 2px red;
}

Tất cả thuộc tính CSS của văn bản