Các Thuộc Tính định Dạng VĂN BẢN (TEXT) Trong CSS - Web Cơ Bản

Trang chủ » Hiệu Chỉnh Normal Style Canh Lề Kiểu Justify » Các Thuộc Tính định Dạng VĂN BẢN (TEXT) Trong CSS - Web Cơ Bản

Có thể bạn quan tâm

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
CSS Bài 17: Tổng hợp các thuộc tính được dùng để định dạng cho văn bản 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)

color

- Chỉnh màu sắc của văn bản.
word-spacing

- Thiết lập khoảng cách nằm giữa mỗi hai từ (word)
word-break

- 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ó.
text-align

- Canh lề (theo chiều ngang) cho văn bản.
text-align-last

- Canh lề (theo chiều ngang) cho dòng chữ cuối cùng của đoạn văn bản.
text-indent

- Thiết lập khoảng cách thụt đầu dòng của dòng chữ đầu tiên.
text-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ử.
text-shadow

- Tạo cái bóng cho văn bản.
text-transform

- Chuyển đổi văn bản sang dạng chữ in hoa hoặc chữ thường.
text-decoration-line

- 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.

- Trong đó:

  • Thuộc tính text-decoration-line dùng để xác định vị trí của đường kẻ.
  • Thuộc tính text-decoration-style dùng để xác định kiểu của đường kẻ.
  • Thuộc tính text-decoration-color dùng để xác định màu của đường kẻ.
text-decoration-style
text-decoration-color
text-decoration
font-family

- Chỉnh phông chữ cho văn bản.
font-size

- Chỉnh kích cỡ chữ của văn bản.
font-style

- Chuyển đổi văn bản sang dạng chữ in nghiêng hay không in nghiêng.
font-weight

- Chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm.
letter-spacing

- Thiết lập khoảng cách nằm giữa mỗi hai ký tự.
white-space

- Tùy chỉnh việc các dấu khoảng trắng dư thừa & ngắt xuống dòng sẽ bị loại bỏ hay được giữ lại (khi chúng hiển thị lên màn hình)
line-height

- Thiết lập chiều cao của dòng chữ.
vertical-align

- Canh lề (theo chiều dọc) cho văn bản.
writing-mode

- Tùy chỉnh chế độ viết văn bản theo chiều ngang hoặc chiều dọc.
user-select

- Tùy chỉnh việc có cho phép người dùng bôi đen văn bản hay không.

- 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 ý:

  • Tỷ lệ 1em = 16px
  • Tỷ lệ 100% = 16px
 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ữ; Ví dụ:

- Thiết lập phông chữ cursive cho phần tử <h1>

h1{ font-family:cursive; } Xem ví dụ

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.

Ví dụ: h1{ font-family:"Lucida Sans Unicode"; } Xem ví dụ

✅ 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ợ.

Ví dụ: h1{ font-family: "Comic Sans MS", Tahoma, sans-serif; } Xem ví dụ

- 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; } Xem ví dụ

- 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.

  • Nếu number là 1 thì chiều cao của mỗi dòng chữ sẽ là 20px
  • Nếu number là 1.5 thì chiều cao của mỗi dòng chữ sẽ là 30px
  • Nếu number là 2 thì chiều cao của mỗi dòng chữ sẽ là 40px
  • Nếu number là 5 thì chiều cao của mỗi dòng chữ sẽ là 100px
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.

  • Nếu percent là 100% thì chiều cao của mỗi dòng chữ sẽ là 20px
  • Nếu percent là 150% thì chiều cao của mỗi dòng chữ sẽ là 30px
  • Nếu percent là 200% thì chiều cao của mỗi dòng chữ sẽ là 40px
  • Nếu percent là 500% thì chiều cao của mỗi dòng chữ sẽ là 100px
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 ý:

  • Nếu giá trị dương thì văn bản sẽ nằm phía trên đường cơ sở.
  • Nếu giá trị âm thì văn bản sẽ nằm phía dưới đường cơ sở.
 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ẻ.

Ví dụ: <!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> Xem ví dụ

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.

Ví dụ: <!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> Xem ví dụ Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?

Từ khóa » Hiệu Chỉnh Normal Style Canh Lề Kiểu Justify