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);
}
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;
}
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;
}
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;
}
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;
}
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.
Đăng ký nhận tin.
Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!
Rất hay. Thanks Toidicode ????
Ben Liam
7 năm trước
Cảm ơn bạn đã đọc.
Toidicode.com
7 năm trước