[#CSS08] CSS- Text trong CSS
Bài học thứ 8 nằm trong series học CSS. Đây là series giới thiệu về Web Front End Cơ Bản của Trung Tâm Đào Tạo Lập Trình Viên JANETO.
Trong phần bài học này, chúng ta sẽ tiếp tục tìm hiểu về Text trong CSS.
Ở phần này mình sẽ trình bày cách để định dạng text bởi sử dụng các thuộc tính CSS đa dạng liên quan tới định dạng văn bản. Với một phần tử bất kỳ, bạn có thể thiết lập các thuộc tính text sau:
- text-color được sử dụng để thiết lập màu cho văn bản.
123456789<html><head></head><body><p style="color:red;">Doan text nay duoc viet bang mau do.</p></body></html> - text-direction được sử dụng để thiết lập hướng cho văn bản. Thuộc tính này có thể nhận giá trị: none, overline (dấu gạch ở trên), underline (gạch chân), line-through (gạch ngang) hoặc blink.
123456789101112131415161718<html><head></head><body><p style="text-decoration:underline;">Doan text nay se co duong gach ngang duoi chan.</p><p style="text-decoration:line-through;">Doan text nay se bi gach ngang.</p><p style="text-decoration:overline;">Doan text nay se co duong gach ngang tren dau.</p></body></html> - text-align được sử dụng để căn chỉnh văn bản trong một tài liệu.Thuộc tính này có thể nhận một trong các giá trị :left, right, center, justify.
123456789101112131415161718<html><head></head><body><p style="text-align:right;">Can chinh ben phai (gia tri right).</p><p style="text-align:center;">Can chinh o giua (gia tri center).</p><p style="text-align:left;">Can chinh ben trai (gia tri left).</p></body></html> - text-transform được sử dụng để chuyển văn bản thành chữ hoa hoặc chữ thường. Thuộc tính này có thể nhận giá trị: none, capitalize (viết hoa chữ cái đầu tiên của một từ), uppercase (chuyển toàn bộ văn bản thành chữ hoa), hoặc lowercase (chuyển toàn bộ văn bản thành chữ thường).
123456789101112131415161718<html><head></head><body><p style="text-transform:uppercase;">Viet hoa toan bo chu cai.</p><p style="text-transform:lowercase;">Viet hoa chu cai dau tien.</p><p style="text-transform:capitalize;">Viet thuong toan bo chu cai.</p></body></html> - letter-spacing được sử dụng để thêm hoặc bớt khoảng cách giữa các chữ cái trong một từ. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể.
123456789<html><head></head><body><p style="letter-spacing:3px;">Cac chu cai trong mot tu se co khoang cach la 3 pixel.</p></body></html> - word-spacing được sử dụng để tăng hoặc giảm khoảng cách giữa các từ trong một câu. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể.
123456789<html><head></head><body><p style="word-spacing:10px;">Khoang cach giua hai tu lien ke nhau la 10 pixel.</p></body></html> - text-shadow được sử dụng để thiết lập hình bóng (shadow như trong word) xung quanh văn bản.
123456789<html><head></head><body><p style="text-shadow:10px 2px green;">10px la toa do x, 2px la toa do y, green là mau cua text shadow.</p></body></html>
Phần trước: [#CSS07] CSS- Margin và padding trong CSS
Các bạn hãy đón xem và ủng hộ bằng cách LIKE/SHARE hay SUBCRIBE để có thể cập nhật thông tin mới nhất từ laptrinhvien.io bạn nhé!
Nguyễn Hải Hà – Developer @ JANETO
TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO
0933067997 – 0933267337
facebook.com/laptrinhvienio
YouTube/laptrinhvienio
tuyensinh@laptrinhvien.io
Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.
0
Bình luận
