[Tự Học CSS] Bài 5: Text

Tiếp theo Bài 4: Font chúng ta sẽ đến với bài 5: Text.
Text là một thuộc tính quan trọng trong CSS dùng để định dạng cho chữ về màu, căn chỉnh vị trí, khoảng cách giữa các dòng…
Tập thuộc tính Text bao gồm: color, text-indent, text-align, letter-spacing, word-spacing, text-decoration, text-transform.

1. Color

Color dùng để định dạng cho màu chữ trong CSS ( chú ý phân biệt với background-color).
Giá trị là tên màu tiếng anh hoặc hệ mã màu hexa, mã màu RBG… ( có giá trị tương tự như thuộc tính background-color)
Ví dụ: Định dạng màu chữ là đỏ cho đoạn văn “Thiết Kế Website Bán Hàng”
Mã HTML và định dạng CSS

Kết quả trình duyệt

2. Text-indent

Định dạng khoảng thụt vào của 1 dòng bất kỳ, cái này thường dùng cho mở đầu đoạn văn.

3. Text-align

Align rất quen thuộc bởi chúng ta đã gặp trong phần HTML rất nhiều, cũng như trong HTML, align trong css dùng để căn chỉnh vị trí.
Thuộc tính text-align dùng để căn vị trí cho 1 đoạn văn bản.
Giá trị:

• Left: Căn trái
• center: căn giữa
• Right: căn phải.

Ví dụ: Căn chỉnh cho 3 từ “ thiet ke website ban hang” ở 3 vị trí khác nhau.

4. Letter-spacing

Thuộc tính này dùng để xác định khoảng cách giữa các ký tự.
Nhận giá trị là số với đơn vị là px.
Ví dụ: Định khoảng cách giữa các ký tự cho từ “thiet ke giao dien web”

5. Word-spacing

Dùng để định dạng khoảng cách giữa các từ.
Chú ý: Phân biệt letter-spacing và word-spacing.

6. Text-decoration

Có thể hiểu là dùng để định dạng hiệu ứng chữ.
Có các giá trị là:

• Underline : Chữ gạch chân.
• Line-through : Chữ gạch ngang ở giữa.
• Overline: Chữ có gạch ngang trên đầu.
• Blink: Chữ nháy:

Ví dụ:

7. Text-transform

Dùng để xác định các kiểu in hoa, thường hay in hoa chữ cái đầu cho text.
Có các giá trị là:

• Uppercase : In hoa.
• Lowercase: In thường.
• Captialize: In hoa chữ cái đầu

Ví dụ:

Bài tập thực hành

Thiết kế giao diện web như sau:
Chú ý: Chỉ dùng những thuộc tính học trong bài hôm nay

Chúc các bạn học tốt!