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

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

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

Thuộc tính Mô tả
color thiết lập màu sắc văn bản
direction xác định hướng văn bản
letter-spacing tăng hoặc giảm khoảng cách giữa cách chữ cái
line-height thiết lập chiều cao của dòng
text-align xác định căn chỉnh văn bản theo chiều ngang
text-decoration xác định văn bản được trang trí thêm
text-indent xác định thụt lề cho dòng đầu tiên của khối văn bản
text-shadow xác định hiệu ứng bóng cho văn bản
text-transform điều chỉnh văn bản viết hoa, viết thường
text-overflow xác định nội dung bị tràn không được hiển thị phải được thông báo cho người dùng
unicode-bidi được sử dụng cùng với thuộc tính direction để thiết lập hoặc trả về văn bản ghi đè trên nhiều ngôn ngữ giữa các tài liệu giống nhau
vertical-align thiết lập sự sắp xếp theo chiều dọc của một phần tử
white-space xác định cách xử lý khoảng trắng bên trong phần tử
word-spacing tăng hoặc giảm khoảng cách giữa các từ trong văn bản