close

Hướng dẫn Định dạng Văn bản trong CSS

Khi thiết kế trang web, việc định dạng văn bản là một phần quan trọng để tạo ra giao diện hấp dẫn và dễ đọc.

CSS cung cấp nhiều thuộc tính cho phép bạn tùy chỉnh các yếu tố của văn bản, bao gồm màu chữ, kích thước, kiểu chữ, canh lề, khoảng cách giữa các dòng và đoạn, và nhiều hơn nữa.

Dưới đây là một hướng dẫn chi tiết về các thuộc tính và tham số tương ứng, kèm theo ví dụ minh họa.

 

Màu chữ (color)

Tham số: Một giá trị màu, có thể là tên màu, mã hex hoặc giá trị RGB.

Mô tả: Định dạng màu sắc của văn bản.

Ví dụ:

p {
  color: blue;
}

 

Cỡ chữ (font-size)

Tham số: Một giá trị kích thước, có thể là px (ví dụ: "16px"), em (ví dụ: "1em"), rem (ví dụ: "1.2rem"), vw (ví dụ: "10vw"), vh (ví dụ: "5vh") hoặc các đơn vị khác.

Mô tả: Định dạng kích thước của chữ.

Ví dụ:

h1 {
  font-size: 24px;
}

 

Kiểu chữ (font-family)

Tham số: Một danh sách kiểu chữ, được liệt kê theo đúng thứ tự ưu tiên.

Mô tả: Định dạng kiểu chữ sẽ được sử dụng cho văn bản.

Ví dụ:

body {
  font-family: Arial, sans-serif;
}

 

In đậm và in nghiêng (font-weight và font-style):

Tham số font-weight: normal, bold, bolder, lighter hoặc giá trị số từ 100 đến 900.

Tham số font-style: normal hoặc italic.

Mô tả: Định dạng độ đậm và in nghiêng của chữ.

Ví dụ:

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

 

Gạch chân và gạch ngang (text-decoration)

Tham số: none, underline, overline, line-through hoặc kết hợp các giá trị.

Mô tả: Định dạng gạch chân hoặc gạch ngang văn bản.

Ví dụ:

a {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}

 

Canh lề và căn chỉnh văn bản (text-align)

Tham số: left, right, center hoặc justify.

Mô tả: Định dạng căn chỉnh của nội dung văn bản.

Ví dụ:

p {
  text-align: center;
}

 

Khoảng cách giữa dòng và đoạn văn (line-height và margin)

Tham số line-height: Giá trị số hoặc phần trăm.

Tham số margin: Giá trị đo lường.

Mô tả: Định dạng khoảng cách giữa các dòng văn bản và các đoạn văn.

Ví dụ:

p {
  line-height: 1.5;
  margin-bottom: 10px;
}

 

Định dạng văn bản đa cột (column-count)

Tham số: Số nguyên dương hoặc auto.

Mô tả: Chia văn bản thành các cột.

Ví dụ:

.container {
  column-count: 2;
}

 

Văn bản đổi màu khi di chuột qua (hover)

Không có tham số cụ thể, chỉ sử dụng pseudo-class ":hover".

Mô tả: Thay đổi màu chữ khi người dùng di chuột qua văn bản.

Ví dụ:

a:hover {
  color: red;
}

 

Văn bản đổi màu theo trạng thái (active, visited)

Không có tham số cụ thể, chỉ sử dụng pseudo-classes ":active" và ":visited".

a:visited {
  color: purple;
}

 

Hy vọng rằng giải thích và ví dụ trên đã giúp bạn hiểu rõ hơn về cách sử dụng và tùy chỉnh các thuộc tính định dạng văn bản trong CSS để tạo ra giao diện văn bản phù hợp và thu hút trên trang web của bạn.