Hướng dẫn letter-spacing trong css
Show Định nghĩa và sử dụngThuộ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úctag { letter-spacing: giá trị; } Với giá trị như sau:
Ví dụHTML viết:
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ụ:
(Tài liệu học Lập Trình Web) (Tài liệu học Lập Trình Web) (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:
- 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:
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: Giải thích: Thực hiện ví dụ sau đây: Kết quả là: 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ị:
Cấu trúc Ví dụ Thuộc tính line-heightThuộ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:
Cấu trúc Ví dụ Xem thêm:
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. |