Các thuộc tính dùng để định dạng cho văn bản
- Dưới đây là danh sách những thuộc tính được dùng để định dạng cho văn bản.
(các bạn vui lòng bấm vào hình để xem hướng dẫn chi tiết về cách sử dụng của từng thuộc tính)
- Thuộc tính word-spacing được dùng để thiết lập khoảng cách nằm giữa mỗi hai từ.
- Cú pháp:
word-spacing: value;- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| normal | - Sử dụng khoảng cách mặc định. |
Xem ví dụ |
| length | - Chỉ định khoảng cách nằm giữa mỗi hai từ dựa theo một giá trị cụ thể. (giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .) |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính word-spacing có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính word-spacing từ phần tử cha của nó. |
- Thuộc tính text-align được dùng để canh lề (theo chiều ngang) cho văn bản bên trong phần tử.
- Cú pháp:
text-align: value;- Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:
| left | - Văn bản được canh nằm bên trái. |
Xem ví dụ |
| center | - Văn bản được canh nằm giữa. |
|
| right | - Văn bản được canh nằm bên phải. |
|
| justify | - Văn bản được canh đều hai bên trái & phải. |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-align có giá trị là left) |
|
| inherit | - Kế thừa giá trị thuộc tính text-align từ phần tử cha của nó. |
- Lưu ý: Thuộc tính text-align chủ yếu dùng để canh lề cho văn bản, tuy nhiên nó cũng có thể dùng để canh lề cho một số loại nội dung khác, ví dụ như: hình ảnh, . . . .
- Thuộc tính text-align-last dùng để canh lề (theo chiều ngang) cho dòng chữ cuối cùng của đoạn văn bản.
- Cú pháp:
text-align-last: value;- Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:
| auto | - Dòng chữ cuối cùng sẽ phụ thuộc vào việc canh lề của đoạn văn bản. |
Xem ví dụ |
| left | - Dòng chữ cuối cùng sẽ được canh nằm bên trái. |
Xem ví dụ |
| center | - Dòng chữ cuối cùng sẽ được canh nằm giữa. |
|
| right | - Dòng chữ cuối cùng sẽ được canh nằm bên phải. |
|
| justify | - Dòng chữ cuối cùng sẽ được canh đều hai bên trái & phải. |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-align-last có giá trị là auto) |
|
| inherit | - Kế thừa giá trị thuộc tính text-align-last từ phần tử cha của nó. |
- Thuộc tính text-indent dùng để thiết lập khoảng cách thụt đầu dòng cho dòng chữ đầu tiên của đoạn văn bản.
- Cú pháp:
text-indent: value;- Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:
| length | - Chỉ định khoảng cách thụt đầu dòng dựa theo một giá trị cụ thể. (giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, %, . . . .) |
Xem ví dụ |
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-indent có giá trị là 0) |
|
| inherit | - Kế thừa giá trị thuộc tính text-indent từ phần tử cha của nó. |
- Thuộc tính font-size dùng để chỉnh kích cỡ chữ của văn bản.
- Cú pháp:
font-size: value;- Trong đó, value có thể được xác định dựa theo một trong các loại giá trị sau đây:
| xx-small | - Kích cỡ chữ tương đương 9px |
Xem ví dụ |
| x-small | - Kích cỡ chữ tương đương 10px |
|
| small | - Kích cỡ chữ tương đương 13px |
|
| medium | - Kích cỡ chữ tương đương 16px |
|
| large | - Kích cỡ chữ tương đương 18px |
|
| x-large | - Kích cỡ chữ tương đương 24px |
|
| xx-large | - Kích cỡ chữ tương đương 32px |
|
| smaller | - Kích cỡ chữ tương đương 13.3px |
|
| larger | - Kích cỡ chữ tương đương 19.2px |
|
| length | - Chỉ định kích cỡ chữ dựa theo một giá trị cụ thể (giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, %, . . . .) - Lưu ý:
|
Xem ví dụ |
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính font-size có giá trị là medium) |
|
| inherit | - Kế thừa giá trị thuộc tính font-size từ phần tử cha của nó. |
- Thuộc tính font-style dùng để chuyển đổi văn bản sang dạng chữ in nghiêng hay không in nghiêng.
- Cú pháp:
font-style: value;- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| normal | - Không in nghiêng. |
Xem ví dụ |
| italic | - In nghiêng. |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính font-style có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính font-style từ phần tử cha của nó. |
- Thuộc tính font-weight dùng để chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm.
- Cú pháp:
font-weight: value;- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| normal | - Không in đậm. |
Xem ví dụ |
| bold | - In đậm. |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính font-weight có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính font-weight từ phần tử cha của nó. |
1) Thuộc tính font-family
- Chức năng của thuộc tính font-family là dùng để chỉnh "phông chữ" cho văn bản.
- Cú pháp:
font-family: tên phông chữ;2) Giới thiệu một số mẫu phông chữ
- Thông thường thì các trình duyệt luôn hỗ trợ sẵn một số mẫu phông chữ phổ biến, dựa vào đặc điểm hiển thị có nét tương đồng giữa các phông chữ mà chúng được chia ra làm ba nhóm chính: serif sans-serif monospace
- Dưới đây là danh sách những phông chữ thuộc nhóm serif:
| Georgia |
This is a heading This is a paragraph |
| Palatino Linotype |
This is a heading This is a paragraph |
| Book Antiqua | |
| Times New Roman |
This is a heading This is a paragraph |
| Times | |
| serif |
- Dưới đây là danh sách những phông chữ thuộc nhóm sans-serif:
| Arial |
This is a heading This is a paragraph |
| Helvetica | |
| Arial Black |
This is a heading This is a paragraph |
| Comic Sans MS |
This is a heading This is a paragraph |
| cursive | |
| Impact |
This is a heading This is a paragraph |
| Lucida Sans Unicode |
This is a heading This is a paragraph |
| Tahoma |
This is a heading This is a paragraph |
| Trebuchet MS |
This is a heading This is a paragraph |
| Helvetica |
This is a heading This is a paragraph |
| Verdana |
This is a heading This is a paragraph |
| sans-serif |
This is a heading This is a paragraph |
- Dưới đây là danh sách những phông chữ thuộc nhóm monospace:
| Courier |
This is a heading This is a paragraph |
| Lucida Console |
This is a heading This is a paragraph |
| monospace |
This is a heading This is a paragraph |
3) Một số điều cần lưu ý
✅ Đối với những phông chữ mà tên của nó gồm có hai từ (word) trở lên thì các bạn nên đặt phông chữ đó vào bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.
✅ Không phải trình duyệt nào cũng hỗ trợ hết tất cả các phông chữ, cho nên khi gán giá trị cho thuộc tính font-family, các bạn nên liệt kê một danh sách các phông chữ mong muốn (nếu trình duyệt không hỗ trợ phông chữ thứ nhất thì nó sẽ chuyển sang dùng phông chữ thứ hai, nếu phông chữ thứ hai cũng không được hỗ trợ thì trình duyệt sẽ chuyển sang dùng phông chữ thứ ba, . . . .)
✅ Ba phông chữ đại diện cho ba nhóm serif sans-serif monospace được hầu hết các trình duyệt hỗ trợ, vì vậy tôi gợi ý các bạn nên đặt một trong ba phông chữ này nằm ở vị trí cuối cùng bên trong danh sách những phông chữ mong muốn thiết lập cho văn bản, điều đó đảm bảo việc nó sẽ được áp dụng trong trường hợp các phông chữ trước đó không được trình duyệt hỗ trợ.
- Thuộc tính letter-spacing dùng để thiết lập khoảng cách nằm giữa mỗi hai ký tự.
- Cú pháp:
letter-spacing: value;- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| normal | - Không thiết lập khoảng cách nằm giữa mỗi hai ký tự (tương đương 0px) |
Xem ví dụ |
| length | - Chỉ định khoảng cách nằm giữa mỗi hai ký tự dựa theo một giá trị cụ thể. (giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .) |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính letter-spacing có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính letter-spacing từ phần tử cha của nó. |
- Thuộc tính text-shadow được dùng để tạo cái bóng cho văn bản.
- Cú pháp:
text-shadow: value;- Trong đó, value có thể được xác định dựa theo một trong các loại giá trị sau đây:
| none | - Không tạo cái bóng cho văn bản. |
Xem ví dụ |
| x y |
- Tham số x là khoảng cách mà cái bóng nhích ra khỏi vị trí mặc định của nó (theo chiều ngang) - Tham số y là khoảng cách mà cái bóng nhích ra khỏi vị trí mặc định của nó (theo chiều dọc) |
Xem ví dụ |
| x y color | - Tham số color dùng để xác định màu sắc của cái bóng. |
Xem ví dụ |
| x y shadow color | - Tham số shadow dùng để xác định độ nhòe của cái bóng (giá trị càng lớn thì cái bóng sẽ càng nhòe) |
Xem ví dụ |
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-shadow có giá trị là none) |
|
| inherit | - Kế thừa giá trị thuộc tính text-shadow từ phần tử cha của nó. |
|
- Lưu ý: Nếu muốn tạo nhiều cái bóng cho văn bản thì chúng ta gán nhiều bộ giá trị cho thuộc tính text-shadow.
h1{
color:yellow;
font-size:60px;
text-shadow:1px 0px 3px black, 0px 1px 3px black, -1px 0px 3px black, 0px -1px 3px black;
}- Thuộc tính text-transform dùng để chuyển đổi văn bản sang dạng chữ in hoa hoặc chữ thường.
- Cú pháp:
text-transform: value;- Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:
| none | - Không chuyển đổi. |
Xem ví dụ |
| uppercase | - Tất cả ký tự được chuyển sang dạng chữ in hoa. |
|
| lowercase | - Tất cả ký tự được chuyển sang dạng chữ thường. |
|
| capitalize | - Ký tự đầu tiên của mỗi từ được chuyển sang dạng chữ in hoa, các ký tự còn lại sẽ giữ nguyên trạng thái ban đầu. |
|
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-transform có giá trị là none) |
|
| inherit | - Kế thừa giá trị thuộc tính text-transform từ phần tử cha của nó. |
- Như chúng ta đã biết: "Trong quá trình soạn thảo văn bản, nếu chúng ta sử dụng phím Space để nhập nhiều dấu khoảng trắng liên tiếp, hoặc sử dụng phím Enter để ngắt văn bản xuống dòng thì khi hiển thị lên màn hình, mặc định những dấu khoảng trắng dư thừa & các dấu ngắt xuống dòng sẽ bị trình duyệt loại bỏ"
- Tuy nhiên, với việc sử dụng thuộc tính white-space thì chúng ta có thể tùy chỉnh lại việc các dấu khoảng trắng & dấu ngắt xuống dòng sẽ bị loại bỏ hay được giữ lại.
- Cú pháp:
white-space: value;- Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:
| normal |
- Các dấu khoảng trắng dư thừa & các dấu ngắt xuống dòng sẽ bị loại bỏ. - Văn bản sẽ tự động ngắt xuống dòng nếu hàng hiện tại không đủ chỗ chứa nó. |
Xem ví dụ |
| nowrap |
- Các dấu khoảng trắng dư thừa & các dấu ngắt xuống dòng sẽ bị loại bỏ. - Văn bản không được ngắt xuống dòng mặc cho nó có bị tràn ra khỏi phần tử. |
|
| pre |
- Giữ nguyên các dấu khoảng trắng & các dấu ngắt xuống dòng. - Văn bản không được ngắt xuống dòng mặc cho nó có bị tràn ra khỏi phần tử. |
|
| pre-wrap |
- Giữ nguyên các dấu khoảng trắng & các dấu ngắt xuống dòng. - Văn bản sẽ tự động ngắt xuống dòng nếu hàng hiện tại không đủ chỗ chứa nó. |
|
| pre-line |
- Các dấu khoảng trắng dư thừa sẽ bị loại bỏ. - Các dấu ngắt xuống dòng sẽ được giữ nguyên. - Văn bản sẽ tự động ngắt xuống dòng nếu hàng hiện tại không đủ chỗ chứa nó. |
|
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính white-space có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính white-space từ phần tử cha của nó |
- Thuộc tính line-height dùng để thiết lập chiều cao của các dòng chữ bên trong phần tử.
- Cú pháp:
line-height: value;- Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:
| normal | - Sử dụng chiều cao mặc định của các dòng chữ. |
Xem ví dụ |
| length |
- Chỉ định chiều cao cho các dòng chữ dựa theo một giá trị cụ thể. (giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .) |
|
| number |
- Chỉ định chiều cao cho các dòng chữ dựa theo cấp số nhân so với kích cỡ chữ. - Ví dụ: Khi văn bản bên trong phần tử có kích cỡ 20px.
|
|
| percent |
- Chỉ định chiều cao cho các dòng chữ dựa theo tỷ lệ phần trăm so với kích cỡ chữ. - Ví dụ: Khi văn bản bên trong phần tử có kích cỡ 20px.
|
|
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính line-height có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính line-height từ phần tử cha của nó. |
- Thuộc tính user-select dùng để tùy chỉnh việc có cho phép người dùng bôi đen văn bản hay không.
- Cú pháp:
user-select: value;- Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:
| auto | - Cho phép người dùng bôi đen văn bản (đây là giá trị mặc định) |
Xem ví dụ |
| none | - Không cho phép người dùng bôi đen văn bản. |
|
| all | - Cho phép người dùng bôi đen toàn bộ đoạn văn bản chỉ với một cú nhấp chuột. |
- Thuộc tính vertical-align dùng để canh lề (theo chiều dọc) cho văn bản bên trong phần tử.
- Cú pháp:
vertical-align: value;- Trong đó, value có thể được xác định dựa theo một trong các loại giá trị sau đây:
| top | - Văn bản sẽ nằm ở vị trí cao nhất. |
Xem ví dụ |
| middle | - Văn bản sẽ nằm ở giữa. |
|
| bottom | - Văn bản sẽ nằm ở vị trí thấp nhất. |
|
| super | - Văn bản sẽ nằm ở phía trên đường cơ sở. |
Xem ví dụ |
| baseline | - Văn bản sẽ nằm ở giữa đường cơ sở. |
|
| sub | - Văn bản sẽ nằm ở phía dưới đường cơ sở. |
|
| length | - Chỉ định một khoảng cách cụ thể mà văn bản sẽ nằm cách đường cơ sở. - Lưu ý:
|
Xem ví dụ |
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính vertical-align có giá trị là baseline) |
|
| inherit | - Kế thừa giá trị thuộc tính vertical-align từ phần tử cha của nó. |
|
- Thuộc tính word-break dùng để tùy chỉnh cách thức ngắt xuống dòng của một từ (word) trong trường hợp khoảng trống của hàng hiện tại không đủ để chứa hết nó.
- Cú pháp:
word-break: value;- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:
| normal | - Một từ (word) sẽ được bắt đầu trên hàng mới nếu khoảng trống của hàng hiện tại không đủ chỗ để chứa hết nó. Khi đã bắt đầu trên một hàng mới, nếu nó dài vượt quá chiều rộng của phần tử thì nó sẽ bị tràn ra khỏi phần tử. |
Xem ví dụ |
| break-word | - Một từ (word) sẽ được bắt đầu trên hàng mới nếu khoảng trống của hàng hiện tại không đủ chỗ để chứa hết nó. Khi đã bắt đầu trên một hàng mới, nếu nó dài vượt quá chiều rộng của phần tử thì những ký tự tràn ra ngoài sẽ tự động ngắt xuống dòng. |
|
| break-all | - Một từ (word) sẽ được bắt đầu trên hàng hiện tại mặc cho khoảng trống của hàng hiện tại có đủ chỗ chứa hết nó hay không, những ký tự bị tràn ra ngoài sẽ tự động ngắt xuống dòng. |
|
| initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính word-break có giá trị là normal) |
|
| inherit | - Kế thừa giá trị thuộc tính word-break từ phần tử cha của nó. |
- Thuộc tính text-overflow thường được sử dụng kết hợp với hai thuộc tính white-space & overflow để tùy chỉnh cách thức hiển thị của phần văn bản bị tràn ra khỏi phần tử.
- Cú pháp:
text-overflow: value;- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:
| clip | - Phần văn bản bị tràn ra ngoài sẽ được cắt bỏ. |
Xem ví dụ |
| ellipsis | - Phần văn bản bị tràn ra ngoài sẽ được cắt bỏ & thay thế bởi dấu ba chấm (...) |
|
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-overflow có giá trị là clip) |
|
| inherit | - Kế thừa giá trị thuộc tính text-overflow từ phần tử cha của nó. |
- Thuộc tính writing-mode dùng để tùy chỉnh chế độ viết một đoạn văn bản.
- Cú pháp:
writing-mode: value;- Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:
| horizontal-tb | - Văn bản được viết theo chiều ngang, hướng từ trên xuống dưới. |
Xem ví dụ |
| vertical-lr | - Văn bản được viết theo chiều dọc, hướng từ trái sang phải. |
|
| vertical-rl | - Văn bản được viết theo chiều dọc, hướng từ phải sang trái. |
- Chức năng của nhóm thuộc tính text-decoration là dùng để thiết lập một cái đường kẻ lên văn bản.
- Nhóm thuộc tính text-decoration được chia ra làm ba thuộc tính chính:
- text-decoration-line
- text-decoration-style
- text-decoration-color
1) Thuộc tính text-decoration-line
- Thuộc tính text-decoration-line dùng để chỉ định vị trí của cái đường kẻ.
- Cú pháp:
text-decoration-line: value;- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:
| none |
- Không thiết lập đường kẻ lên văn bản. (giá trị này thường được sử dụng để vô hiệu hóa đường kẻ nằm ở dưới chân các liên kết) |
Xem ví dụ |
| overline | - Đường kẻ nằm trên đầu văn bản. |
|
| line-through | - Đường kẻ nằm giữa văn bản. |
|
| underline | - Đường kẻ nằm dưới chân văn bản. |
2) Thuộc tính text-decoration-style
- Thuộc tính text-decoration-style dùng để xác định kiểu của cái đường kẻ.
- Cú pháp:
text-decoration-style: value;- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:
| solid |
|
Xem ví dụ |
| dashed |
|
|
| double |
|
|
| dotted |
|
|
| wavy |
|
|
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-decoration-style có giá trị là solid) |
|
| inherit | - Kế thừa giá trị thuộc tính text-decoration-style từ phần tử cha của nó. |
3) Thuộc tính text-decoration-color
- Thuộc tính text-decoration-color dùng để xác định màu sắc của cái đường kẻ.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
p{
text-decoration-line:underline;
}
</style>
</head>
<body>
<p style="text-decoration-color:red">1 2 3 4 5</p>
<p style="text-decoration-color:rgb(140,51,79)">1 2 3 4 5</p>
<p style="text-decoration-color:#FFA500">1 2 3 4 5</p>
</body>
</html>4) Thuộc tính text-decoration
- Thuộc tính text-decoration là cú pháp tổng quát dùng để thiết lập một cái đường kẻ lên văn bản (thay vì phải sử dụng kết hợp ba thuộc tính text-decoration-line, text-decoration-style, text-decoration-color được nêu ở trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)
- Cú pháp:
text-decoration: line color style;- Trong đó, line color style lần lượt là giá trị của ba thuộc tính text-decoration-line text-decoration-color text-decoration-style
- Tuy nhiên, thuộc tính text-decoration không bắt buộc chúng ta phải gán cho nó đủ ba tham số, những tham số của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động sử dụng giá trị mặc định của thuộc tính tương ứng.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
.text1{
text-decoration:overline wavy;
}
.text2{
text-decoration:line-through red dotted;
}
.text3{
text-decoration:underline;
}
</style>
</head>
<body>
<h1 class="text1">1 2 3 4 5 6 7 8 9</h1>
<h1 class="text2">1 2 3 4 5 6 7 8 9</h1>
<h1 class="text3">1 2 3 4 5 6 7 8 9</h1>
</body>
</html>