Trong một trang web, phần được hiển thị nhiều nhất chính là text và một trang web có đẹp hay không thì một phần cũng dựa vào text. Bài hôm nay mình sẽ giới thiệu với mọi người các thuộc tính trong CSS tác động đến văn bản (text).

1, Thuộc tính color.

-Thuộc tính color trong CSS có tác dụng xác định màu xác cho text được chọn.

Cú Pháp:

selector{
    color: value;
}

Trong đó: value là giá trị màu của text mà các bạn muốn CSS. Nó có thể là các kiểu giá trị sau:

• Mã màu Hex: VD: #dddddd;
• Dải màu rgb(): VD: rgb(255,255,255);
• Tên màu tiếng anh: VD: red;
• inherit - Thừa hưởng giá trị từ thành phần cha.

VD:

.box1{
    color: #dddddd;
}
.box2{
    color: red;
}
.box3{
    color: rgb(255,255,25);
}

Xem Kết Quả

2, text-align.

-Thuộc tính này xác định vị trí của các text theo chiều ngang.

Cú Pháp:

selector{
    text-algin: value;
}

Trong đó: value là một trong các giá trị sau:

• left: căn lề trái (mặc định).
• right: căn lề phải.
• center: căn giữa.
• justify: căn đều 2 bên.
• inherit: thừa hưởng thuộc tính từ thành phần cha.

VD:

.box1{
    text-align: left
}
.box2{
    text-align: center;
}
.box3{
    text-align: right;
}
.box4{
    text-align: justify;
}

Xem Kết Quả

3, text-decoration.

-Thuộc tính này giúp trang trí lại cho text.

Cú Pháp:

selector{
    text-decoration: value;
}

Trong đó: value có thể là một trong các giá trị sau:

• none: Định dạng bình thường (mặc định).
• underline: Chữ gạch chân.
• overline: Chữ gạch đầu.
• line-through: Chữ gạch ngang.
• blink: Chữ nhấp nháy (không còn được hỗ trợ nữa).
• inherit: Kế thừa từ thành phần cha.

VD:

.box1{
    text-decoration: underline;
}
.box2{
    text-decoration: overline;
}
.box3{
    text-decoration: line-through;
}
.box4{
    text-decoration: blink;
}

Xem Kết Quả

4, text-indent.

-Thuộc tính này xác định độ thụt đầu dòng của dòng đầu tiên trong văn bản.

Cú Pháp:

selector{
    text-indent: value;
}

Trong đó: value là các đơn vị đo mà css hỗ trợ như: px,%,in,...

VD:

.box{
    text-indent: 10px;
}

Xem Kết Quả

5, text-transform.

-Thuộc tính này xác định các kiểu định dạng viết hoa thường cho văn bản.

Cú Pháp:

selector{
    text-transform: value;
}

Trong đó: value là một trong các giá trị sau:

• none: dạng mặc định.
• capitalize: Chữ cái đầu tiên của thành phần là chữ in hoa.
• uppercase: Tất cả chữ trong văn bản đều in hoa.
• lowercase: Tất cả chữ cái đều viết thường.
• inherit: kế thừa thuộc tính từ lớp cha.

VD:

.box1{
    text-transform:  capitalize;
}
.box2{
    text-transform: uppercase;
}
.box3{
    text-transform: lowercase;
}

Xem Kết Quả

6, Lời kết.

-Phần trên mình đã giới thiệu đến mọi người các thuộc tính tác động đến văn bản hay được dùng trong CSS rồi, phần tiếp theo chúng ta sẽ tìm hiểu về các thuộc tính tác động đến font trong css.