Hướng dẫn letter-spacing trong css

Posted on by mtoplistChuyên mục:Top List

  • Trang chủ
  • Tham khảo
  • CSS
  • Thuộc tính letter-spacing

Nội dung chính

Show

  • Định nghĩa và sử dụng
  • Cấu trúc
  • Trình duyệt hỗ trợ
  • 1) Thuộc tính letter-spacing trong CSS
  • 2) Cách sử dụng thuộc tính letter-spacing trong CSS
  • Thuộc tính letter-spacing có thể nhận giá trị:
  • Thuộc tính line-height

Định nghĩa và sử dụng

Thuộc tính letter-spacing tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.

Cấu trúc

tag {
    letter-spacing: giá trị;
}

Với giá trị như sau:

Thuộc tínhgiá trịVí dụMô tảletter-spacing
normal
letter-spacing: normal;
Không tăng khoảng cách giữa các ký tự cho chữ.
đơn vị
letter-spacing: 2px;
Tăng hoặc giảm khoảng cách giữa các ký tự.
inherit
letter-spacing: inherit;
Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p {
    letter-spacing: 5px;
}

Hiển thị trình duyệt khi có CSS:

Trình duyệt hỗ trợ

Thuộc tính letter-spacing được hỗ trợ trong đa số các trình duyệt.

Giá trị “inherit” không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

1) Thuộc tính letter-spacing trong CSS

– Thuộc tính letter-spacing được dùng để thiết lập khoảng cách nằm giữa hai ký tự.

– Ví dụ:

  • Trong đoạn văn bên dưới, khoảng cách giữa mỗi hai ký tự là 0px

    • (Tài liệu học Lập Trình Web)

  • Trong đoạn văn bên dưới, khoảng cách giữa mỗi hai ký tự là 5px

    • (Tài liệu học Lập Trình Web)

  • Trong đoạn văn bên dưới, khoảng cách giữa mỗi hai ký tự là 15px

    • (Tài liệu học Lập Trình Web)

2) Cách sử dụng thuộc tính letter-spacing trong CSS

– Để sử dụng thuộc tính letter-spacing, ta dùng cú pháp như sau:

letter-spacing: normal|length|initial|inherit;

– Trong đó, ta thấy giá trị của thuộc tính letter-spacing có thể được xác định bởi một trong bốn loại:

normal

– Không thiết lập khoảng cách giữa mỗi hai ký tự (tương đương 0px)

Xem ví dụ
length

– Thiết lập khoảng cách giữa mỗi hai ký tự bởi một giá trị cụ thể.

(giá trị này có thể được xác định theo đơn vị 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 letter-spacing có giá trị là normal)

Xem ví dụ
inherit

– Kế thừa giá trị thuộc tính letter-spacing từ phần tử cha của nó.

Xem ví dụ

Letter-spacing là một thuộc tính làm việc với văn bản được sử dụng trong một vài trường hợp cần thiết. Khi dùng letter-spacing CSS sẽ làm tăng hoặc giảm khoảng cách giữa các phần tử trong cùng một văn bản.

Cú pháp:

letter-spacing: normal|length|initial|inherit;

Giải thích:

  • Normal: giá trị mặc định. Không tạo ra khoảng cách
  • length: Tạo ra khoảng cách. Sử dụng
    các đơn vị như px, pt, em, rem…
  • inherit: Thừa hưởng từ thành phần cha

Thực hiện ví dụ sau đây:

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  letter-spacing: 3px;
}

.p2 {
  letter-spacing: 2px;
}

.p3 {
  letter-spacing: -1px;
}
</style>
</head>
<body>

<h2 class="p1">Đây là dòng văn bản 1</h2>
<h2 class="p2">Đây là dòng văn bản 2</h2>
<h2 class="p3">Đây là dòng văn bản 3</h2>

</body>
</html>

Kết quả là:

Hướng dẫn letter-spacing trong css

Mặc dù 3 dòng đó đều là H1 tuy nhiên letter-spacing lại có giá trị khác nhau nên sẽ có khoảng cách khác nhau. Khi đặt giá trị âm (-) thì khoảng cách sẽ
thu lại. Còn ngược lại sẽ tăng lên.

Với thuộc tính letter-spacing bạn hãy ghi nhớ và áp dụng khi xây dựng Frontend của trang web. Trong vài trường hợp cũng cần tới nó đấy.

Trong các thuộc tính định dạng cho text thường được sử dụng định dạng trực tiếp cho các thẻ thuộc nhóm inline, tiếp theo trong bài hôm nay mình sẽ chia sẻ với các bạn hai thuộc tính nữa cũng nằm trong danh sách các thuộc tính định dạng cho text đó là thuộc tính letter-spacing và thuộc tính line-height. Các bạn cùng theo dõi bài dưới đây.

Thuộc tính letter-spacing được dùng để định dạng khoảng cách giữa
các ký tự trong một đoạn văn bản. Thuộc tính này có thể áp dụng cho tất cả các phần tử của cả HTML.

Thuộc tính letter-spacing có thể nhận giá trị:

  • normal: độ rộng mặc định. Trong thực tế,  một giá trị độ dài mà bạn thiết lập là 0 thì độ rộng  sẽ ở chế độ mặc định.
  • length: sử dụng giá trị lớn hơn 0 sẽ làm tăng độ rộng giữa các chữ cái trong một từ. Trình duyệt sẽ bỏ qua giá trị âm.

Hướng dẫn letter-spacing trong css

Cấu trúc

Hướng dẫn letter-spacing trong css

Ví dụ

Hướng dẫn letter-spacing trong css

Thuộc tính line-height

Thuộc
tính line-height dùng để điều chỉnh chiều cao dòng. Nói cách khác line-height điều chỉnh khoảng cách giữa hai đường cơ sở của các dòng liên tiếp nhau. Những giá trị mà bạn có thể gán cho thuộc tính line-height bao gồm:

  • Số thuần túy, thí dụ: 1 hoặc 2 hoặc 3…bạn có thể để số thập phân nếu muốn, chẳng hạn 1.5 – giá trị này có nghĩa là chiều cao dòng gấp 1.5 kích thước font. Kích thước mặc định mà các trình duyệt áp dụng cho line-height rơi vào khoảng giá trị là 1.2
  • %,
    chẳng hạn 100%, 200% hay 150% – giá trị này có nghĩa là chiều cao dòng gấp 2 kích thước font
  • Đơn vị độ dài như px, pt, in, cm…Chúng ta nên hạn chế cách này vì trong trường hợp người dùng phóng to hay thu nhỏ font thì khoảng cách sẽ bị thu hẹp hoặc giãn ra bất thường.

Hướng dẫn letter-spacing trong css

Cấu trúc

Hướng dẫn letter-spacing trong css

Ví dụ

Hướng dẫn letter-spacing trong css

Xem thêm:

  • Kiến thức về CSS (P1): Giới thiệu về CSS
  • Kiến thức về CSS (P2): Cách viết nội dung, bộ chọn và comment trong CSS

  • Kiến thức về CSS (P3): Các thuộc tính background trong CSS.

  • Kiến thức về CSS (P4): Thuộc tính border
  • Kiến thức về CSS (P5): Thuộc tính color
  • Kiến thức về CSS (P6): Thuộc tính font size-Thuộc tính font family
  • Kiến thức về CSS (P7): Thuộc tính font-weight và thuộc tính font-style

Còn rất nhiều bài viết hữu ích về CSS, các bạn nhớ theo dõi nhé. Chúc các bạn tự học thiết kế web thật tốt.

mtoplist