Văn Bản

Màu Văn Bản

Trong CSS, để quy định màu văn bản thuộc về bộ chọn tương ứng chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này có thể được biểu diễn sử dụng một trong ba hệ thống màu như trình bày ở bài học trước.

h1 {
    font-size: 20px;
    color: #F05234;
}
p {
    font-size: 14px;
    color: #466474;
}

Chạy

Canh Ngang

Trong CSS, để canh ngang văn bản của bộ chọn tương ứng chúng ta sử dụng thuộc tính text-align. Thuộc tính này có thể nhận 1 trong 3 giá trị là left, right hoặc center.

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.justify {
    text-align: justify;
}

Chạy

Thuộc Tính text-decoration

Thuộc tính text-decoration có thể nhận một trong các giá trị underline, line-through, overline và none. Nếu không quy định (sử dụng CSS) thì phần tử HTML sẽ có giá trị mặc định cho thuộc tính này là text-decoration: none.

.overline {
    text-decoration: overline;
}
.line-through {
    text-decoration: line-through;
}
.underline {
    text-decoration: underline;
}

Chạy

Thuộc Tính text-transform

Thuộc tính text-transform dùng để chuyển đổi các ký tự trong văn bản của bộ chọn tương ứng thành dạng in thường, in hoa toàn văn bản hoặc in hoa chữ cái đầu.

.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}

Chạy

Lùi Đầu Dòng

Thuộc tính text-indent dùng để lùi đầu dòng cho văn bản.

p {
    text-indent: 50px;
}

Chạy

Chiều Cao Văn Bản

Sử dụng thuộc tính line-height để quy định chiều cao cho văn bản thuộc về bộ chọn tương ứng.

.small-line {
    line-height: 0.5;
}
.tall-line {
    line-height: 2.5;
}

Chạy

Khoảng Cách Giữa Các Ký Tự

Sử dụng thuộc tính letter-space để thiết lập khoảng cách giữa các ký tự với nhau. Giá trị mặc định của thuộc tính này là 0px.

.normal-spacing {
    letter-spacing: 0px;
}
.narrow-spacing {
    letter-spacing: -5px;
}
.wide-spacing {
    letter-spacing: 5px;
}

Chạy

Khoảng Cách Giữa Các Từ

Tương tự như letter-spacing để tạo khoảng cách giữa các từ với nhau chúng ta có thể sử dụng thuộc tính word-spacing. Giá trị mặc định của thuộc tính này là 0px.

.normal-spacing {
    word-spacing: 0px;
}
.narrow-spacing {
    word-spacing: -5px;
}
.wide-spacing {
    word-spacing: 5px;
}

Chạy

Nguồn: CodeHub.vn