Kiểu chữ CSS

Cách làm việc với kiểu chữ trong CSS

Trong bài đăng này, tôi sẽ nói về cách tạo kiểu văn bản với CSS, sử dụng các thuộc tính sau:

  • text-transform
  • text-decoration
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • text-align-last
  • word-spacing
  • letter-spacing
  • text-shadow
  • white-space
  • tab-size
  • writing-mode
  • hyphens
  • text-orientation
  • direction
  • line-break
  • word-break
  • overflow-wrap

text-transform

Thuộc tính này có thể biến đổi trường hợp của một phần tử.

Có 4 giá trị hợp lệ:

  • capitalizeviết hoa chữ cái đầu tiên của mỗi từ
  • uppercaseviết hoa tất cả văn bản
  • lowercasethành chữ thường của tất cả văn bản
  • noneđể tắt chuyển đổi văn bản, được sử dụng để tránh kế thừa thuộc tính

Thí dụ:

p {
  text-transform: uppercase;
}

text-decoration

Thuộc tính này có thể thêm trang trí vào văn bản, bao gồm

  • underline
  • overline
  • line-through
  • blink
  • none

Thí dụ:

p {
  text-decoration: underline;
}

Bạn cũng có thể thiết lập phong cách trang trí và màu sắc.

Thí dụ:

p {
  text-decoration: underline dashed yellow;
}

Giá trị kiểu hợp lệ làsolid,double,dotted,dashed,wavy.

Bạn có thể thực hiện tất cả trong một dòng hoặc sử dụng các thuộc tính cụ thể:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

Thí dụ:

p {
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-style: dashed;
}

text-align

Theo mặc định, căn chỉnh văn bản cóstartvalue, nghĩa là văn bản bắt đầu ở “start”, gốc 0, 0 của hộp chứa nó. Điều này có nghĩa là trên cùng bên trái trong các ngôn ngữ từ trái sang phải và trên cùng bên phải trong các ngôn ngữ từ phải sang trái.

Giá trị có thể làstart,end,left,right,center,justify(rất vui khi có khoảng cách nhất quán ở các đầu dòng):

p {
  text-align: right;
}

vertical-align

Xác định cách các phần tử nội tuyến được căn chỉnh theo chiều dọc.

Chúng tôi có một số giá trị cho tài sản này. Đầu tiên chúng ta có thể gán giá trị độ dài hoặc tỷ lệ phần trăm. Chúng được sử dụng để căn chỉnh văn bản ở vị trí cao hơn hoặc thấp hơn (sử dụng giá trị âm) so với đường cơ sở của phần tử mẹ.

Sau đó, chúng tôi có các từ khóa:

  • baseline(mặc định), căn chỉnh đường cơ sở với đường cơ sở của phần tử mẹ
  • sublàm cho một phần tử được chỉ định dưới dạng con, mô phỏngsubKết quả phần tử HTML
  • superlàm cho một phần tử được mô tả thay thế, mô phỏngsupKết quả phần tử HTML
  • topcăn chỉnh đầu phần tử với đầu dòng
  • text-topcăn chỉnh phần trên cùng của phần tử với phía trên cùng của phông chữ phần tử mẹ
  • middlecăn giữa phần tử với giữa dòng của phần tử gốc
  • bottomcăn chỉnh phần dưới cùng của phần tử với cuối dòng
  • text-bottomcăn chỉnh phần dưới cùng của phần tử với dưới cùng của phông chữ phần tử mẹ

line-height

Điều này cho phép bạn thay đổi chiều cao của một dòng. Mỗi dòng văn bản có một chiều cao phông chữ nhất định, nhưng sau đó có khoảng cách bổ sung theo chiều dọc giữa các dòng. Đó là chiều cao dòng:

p {
  line-height: 0.9rem;
}

text-indent

Thụt lề dòng đầu tiên của đoạn văn theo độ dài đã đặt hoặc theo tỷ lệ phần trăm của chiều rộng đoạn văn:

p {
  text-indent: -10px;
}

text-align-last

Theo mặc định, dòng cuối cùng của đoạn văn được căn chỉnh theotext-aligngiá trị. Sử dụng thuộc tính này để thay đổi hành vi đó:

p {
  text-align-last: right;
}

word-spacing

Sửa đổi khoảng cách giữa mỗi từ.

Bạn có thể dùngnormaltừ khóa, để đặt lại các giá trị kế thừa hoặc sử dụng giá trị độ dài:

p {
  word-spacing: 2px;
}

span { word-spacing: -0.2em; }

letter-spacing

Sửa đổi khoảng cách giữa mỗi chữ cái.

Bạn có thể dùngnormaltừ khóa, để đặt lại các giá trị kế thừa hoặc sử dụng giá trị độ dài:

p {
  letter-spacing: 0.2px;
}

span { letter-spacing: -0.2em; }

text-shadow

Áp dụng một bóng cho văn bản. Theo mặc định, văn bản bây giờ có bóng.

Thuộc tính này chấp nhận một màu tùy chọn và một tập hợp các giá trị được đặt

  • độ lệch X của bóng khỏi văn bản
  • độ lệch Y của bóng khỏi văn bản
  • bán kính mờ

Nếu màu không được chỉ định, bóng đổ sẽ sử dụng màu văn bản.

Ví dụ:

p {
  text-shadow: 0.2px 2px;
}

span { text-shadow: yellow 0.2px 2px 3px; }

white-space

Đặt cách CSS xử lý khoảng trắng, các dòng và tab mới bên trong một phần tử.

Các giá trị hợp lệ thu gọn khoảng trắng là:

  • normalsụp đổ khoảng trắng. Thêm các dòng mới khi cần thiết khi văn bản đến cuối vùng chứa
  • nowrapsụp đổ khoảng trắng. Không thêm dòng mới khi văn bản đến cuối vùng chứa và ngăn chặn bất kỳ ngắt dòng nào được thêm vào văn bản
  • pre-linesụp đổ khoảng trắng. Thêm các dòng mới khi cần thiết khi văn bản đến cuối vùng chứa

Các giá trị hợp lệ duy trì khoảng trắng là:

  • prebảo tồn khoảng trắng. Không thêm dòng mới khi văn bản đến cuối vùng chứa, nhưng vẫn giữ ngắt dòng được thêm vào văn bản
  • pre-wrapbảo tồn khoảng trắng. Thêm các dòng mới khi cần thiết khi văn bản đến cuối vùng chứa

tab-size

Đặt chiều rộng của ký tự tab. Theo mặc định, nó là 8 và bạn có thể đặt một giá trị số nguyên để đặt khoảng cách ký tự mà nó chiếm hoặc một giá trị độ dài:

p {
  tab-size: 2;
}

span { tab-size: 4px; }

writing-mode

Xác định xem các dòng văn bản được bố trí theo chiều ngang hay chiều dọc và hướng chặn tiến trình.

Các giá trị bạn có thể sử dụng là

  • horizontal-tb(mặc định)
  • vertical-rlnội dung được trình bày theo chiều dọc. Các dòng mới được đặt ở bên trái của dòng trước đó
  • vertical-lrnội dung được trình bày theo chiều dọc. Các dòng mới được đặt ở bên phải của dòng trước đó

hyphens

Xác định xem có nên tự động thêm dấu gạch nối khi chuyển sang một dòng mới hay không.

Giá trị hợp lệ là

  • none(mặc định)
  • manualchỉ thêm dấu gạch ngang khi đã có dấu gạch nối hiển thị hoặc dấu gạch nối ẩn (một ký tự đặc biệt)
  • autothêm dấu gạch nối khi xác định văn bản có thể có dấu gạch nối.

text-orientation

Khi nàowriting-modeở chế độ dọc, xác định hướng của văn bản.

Giá trị hợp lệ là

  • mixedlà mặc định và nếu một ngôn ngữ là ngành dọc (như tiếng Nhật), nó sẽ giữ nguyên hướng đó, trong khi xoay văn bản được viết bằng các ngôn ngữ phương Tây
  • uprightlàm cho tất cả văn bản được định hướng theo chiều dọc
  • sidewayslàm cho tất cả văn bản được định hướng theo chiều ngang

direction

Đặt hướng của văn bản. Giá trị hợp lệ làltrrtl:

p {
  direction: rtl;
}

word-break

Thuộc tính này chỉ định cách ngắt dòng trong các từ.

  • normal(mặc định) có nghĩa là văn bản chỉ được ngắt giữa các từ, không phải bên trong một từ
  • break-alltrình duyệt có thể ngắt một từ (nhưng không có dấu gạch nối nào được thêm vào)
  • keep-allức chế gói mềm. Chủ yếu được sử dụng cho văn bản CJK (Trung Quốc / Nhật Bản / Hàn Quốc).

Nói về văn bản CJK, tài sảnline-breakđược sử dụng để xác định cách ngắt dòng văn bản. Tôi không phải là một chuyên gia về những ngôn ngữ đó, vì vậy tôi sẽ tránh đề cập đến nó.

overflow-wrap

Nếu một từ quá dài để vừa một dòng, từ đó có thể tràn ra bên ngoài vùng chứa.

Thuộc tính này còn được gọi làword-wrap, mặc dù đó không phải là tiêu chuẩn (nhưng vẫn hoạt động như một bí danh)

Đây là hành vi mặc định (overflow-wrap: normal;).

Chúng ta có thể sử dụng:

p {
  overflow-wrap: break-word;
}

để ngắt nó ở độ dài chính xác của dòng, hoặc

p {
  overflow-wrap: anywhere;
}

nếu trình duyệt thấy có cơ hội bọc mềm ở đâu đó sớm hơn. Không có dấu gạch nối nào được thêm vào, trong mọi trường hợp.

Thuộc tính này rất giống vớiword-break. Chúng tôi có thể muốn chọn cái này trên các ngôn ngữ phương Tây, trong khiword-breakcó cách điều trị đặc biệt cho các ngôn ngữ không phải phương Tây.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: