Tổng hợp các thuộc tính cho text trong css

Trong bài viết này mình xin giới thiệu với các bạn tổng hợp các thuộc tính dành cho text trong css. Định dạng văn bản trên web không khác gì trong Microsoft Word

---

Trong bài này mình xin giới thiệu tổng hợp các thuộc tính css cho text

 

1. color

Thuộc tính color dùng để định dạng màu sắc cho đoạn văn bản.

Trong css có 3 cách để định dạng màu sắc cho văn bản.

1. theo tên màu sắc ví dụ như muốn cho văn bản màu đỏ “color: red;”
2. hoặc theo mã HEX “color: #ff0000;”
3. hoặc giá trị màu theo hệ màu “color: rgb(255,0,0);”

p{ color: red; } 

p{ color: #ff0000; } 

p{ color: rgb(255,0,0); }

Thuộc tính background-color cũng có các giá trị về màu sắc tương tự như color.

2. font-size

Thuộc tính font-size quy định cỡ chữ cho văn bản.

Người ta thường định dạng cỡ chữ theo đơn vị px/em/rem/%. xem thêm tại đây

p{ font-size: 14px; }

3. text-align

Thuộc tính text-align dùng để căn chỉnh văn bản theo chiều ngang.

Ví dụ để căn chỉnh text theo lề trái thì dùng “text-algin:left;” / theo lề phải “text-algin:right;”/ giữa “text-algin:center;” hoặc canh đều cả 2 bên “text-algin:justify”

p{ text-algin: left; } 

p{ text-algin: center; } 

p{ text-algin: right; }

p{ text-algin: justify; }

4. text-decoration

Thuộc tính text-decoration được dùng để tạo các trang trí cho văn bản. Mặc định giá trị của text-decoration là none

Ví dụ :

1. text-decoration: none;
2. text-decoration: overline;
3. text-decoration: line-through;
4. text-decoration: underline;

text-decoration: underline; thường được dùng cho các liên kết. Không nên dùng cho các văn bản bình thường để tránh gây nhầm lẫn cho người dùng.
Trong css3 còn hỗ trợ cho chúng ta các thuôc tính text-decoration-color để thay đổi màu cho đường trang trí text-decoration-style thay đổi định dạng cho đường trang trí.

5. text-transformation

Thuộc tính text-transformation được sử dụng để chỉ định chữ hoa và chữ thường trong văn bản.

Nó có thể được sử dụng để biến tất cả mọi thứ thành chữ hoa hoặc chữ thường, hoặc viết hoa chữ cái đầu tiên của mỗi từ:

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

6. text-indent

Thuộc tính text-indent được sử dụng để chỉ định phần thụt đầu dòng đầu tiên của văn bản:

p {
    text-indent: 50px;
}

7. letter-spacing

Thuộc tính letter-spacing được sử dụng để tạo khoảng cách giữa các ký tự trong văn bản.

Ví dụ sau minh hoạ làm thế nào để tăng hoặc giảm khoảng cách giữa các ký tự:

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

8. line-height

Thuộc tính line-height được sử dụng để xác định khoảng cách giữa các dòng:

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

9. direction

Thuộc tính direction được sử dụng để thay đổi hướng văn bản của một phần tử:

Ví dụ direction: rtl; hướng văn văn bản từ phải sang trái

p {
    direction: rtl;
}

10. word-spacing

Thuộc tính word-spacing được sử dụng để xác định khoảng cách giữa các từ trong một văn bản. Khác với letter-spacing là khoảng cách giữa các kí tự nhé các bạn.

Ví dụ sau minh hoạ làm thế nào để tăng hoặc giảm khoảng cách giữa các từ:

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

11. text-shadow

Thuộc tính text-shadow thêm bóng vào văn bản.

Ví dụ sau xác định vị trí của bóng ngang (3px), vị trí của bóng đứng (2px) và màu của bóng (màu đỏ):

h1 {
    text-shadow: 3px 2px red;
}

12. white-space

Thuộc tínhwhite-space chỉ định khoảng trắng bên trong phần tử được xử lý như thế nào.

Cú pháp:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

white-space:normal (mặc định) Văn bản sẽ được tự động xuống dòng khi mà không đủ cho một dòng.

white-space:nowrap Văn bản sẽ chỉ nằm trên một dòng cho dù độ dài có vượt quá.

white-space:pre Khoảng trắng được giữ bởi trình duyệt. Văn bản chỉ được gói gọn trong các ngắt dòng. Hoạt động tương tự như thẻ <pre> trong HTML

white-space:pre-line Các dãy khoảng trống sẽ sụp đổ thành một khoảng trắng. Văn bản sẽ xuống dòng khi cần thiết.

white-space:pre-wrap Khoảng trắng được giữ bởi trình duyệt. Văn bản sẽ xuống dòng khi cần thiết.

white-space:initial tương tự như nornal.

white-space:inherit kế thừa các thuộc tính của thẻ cha bao bọc nó.

Xem ví dụ để hiểu rõ hơn nhé.

13. word-break

Thuộc tínhword-break qui định xuống dòng của văn bản.

Cú pháp:

word-break: normal|break-all|keep-all|initial|inherit;

word-break: break-all Ngắt dòng theo từ khi văn bản vượt quá độ dài thẻ bao bọc nó.

word-break: break-all Ngắt dòng theo kí tự(chữ cái) khi văn bản vượt quá độ dài thẻ bao bọc nó.

Lưu ý: word-break không hoạt động với ngôn ngữ Trung Quốc, Hàn Quốc và Nhật Bản

Xem ví dụ để hiểu rõ hơn nhé.

14. word-wrap

word-wrap: Xuống dòng văn bản khi chuỗi kí tự quá nhiều kí tự liền nhau

p { 
    word-wrap: break-word;
}

Xem ví dụ để hiểu rõ hơn.

---

Chúc bạn thành công ! Đừng quên like Blog Fuvavi để ủng hộ mình nhé!