Thuoc tinh line-height trong css la gi
|
Với đa số trang web, văn bản là thành phần quan trọng hàng đầu. Việc tác động tới cách trình bày của văn bản thông qua CSS là cách thức phổ biến để tạo ra hiệu ứng thẩm mỹ cũng như ấn tượng với người đọc. Show Hôm nay Kiến càng sẽ giới thiệu với bạn 8 thuộc tính như thế. Danh sách các thuộc tính văn bản trong CSS mà chúng ta sẽ xem xét trong bài này bao gồm:
Giờ chúng ta sẽ bắt đầu đi vào các thuộc tính cụ thể…
Thuộc tính text-indentNếu muốn lùi đầu dòng như thế này, bạn phải dùng đến text-indent, bạn đã thấy chữ “Nếu” đã được thụt vào so với các dòng còn lại. Đoạn code mẫu khá đơn giản p {text-indent: 30px;} Ngoài px thì các đơn vị đo lường khác như in, cm, em, % cũng được chấp nhận. Đoạn này là thí dụ cho text-indent sử dụng đơn vị %, với giá trị cụ thể là 50%. Chữ bị thụt vào đến một nửa chiều dài của dòng. Code mẫu: p {text-indent: 50%;} Thuộc tính letter-spacingThuộc tính này dùng để điều chỉnh khoảng cách giữa các chữ cái. Thông thường bạn sẽ không đả động đến letter-spacing để điều chỉnh cả đoạn văn bản. Bởi vì font chữ đã có giá trị letter-spacing tối ưu cho mắt người đọc. Quái! Nếu đã vậy thì sinh ra thuộc tính này làm gì? Câu trả lời là không phải lúc nào bạn cũng cần văn bản hiện lên theo cách thông thường. Bạn muốn chúng ấn tượng, đặc biệt hay áp dụng cho các tiêu đề hoặc đoạn ngắn. Thí dụ đoạn dưới đây: Bình thường: Ngày 20 – 10 năm nay Anh sẽ tặng gì cho Em đây? Giãn ra:Ngày 20 – 10 năm nay Anh sẽ tặng gì cho Em đây? Thu hẹp: Ngày 20 – 10 năm nay Anh sẽ tặng gì cho Em đây? Cùng một nội dung, cùng font và kích cỡ chữ nhưng bạn đã thấy sự khác biệt rất lớn phải không, dòng dưới rõ ràng là gây chú ý hơn, bởi vì nó không phải là cái quen mắt. Dĩ nhiên không chỉ giãn ra, bạn còn có thể thu hẹp khoảng cách nếu muốn bằng cách sử dụng giá trị âm cho letter-spacing. Code mẫu: h2 {letter-spacing: 5px;}Thuộc tính word-spacingNếu letter-spacing dùng để điều chỉnh khoảng cách giữa các ký tự thì word-spacing dùng để điều chỉnh khoảng cách giữa các từ. Vẫn thế, nếu để giá trị dương, các từ sẽ giãn ra, còn nếu để giá trị âm, các từ sẽ co lại gần nhau hơn, ví dụ: Bình thường: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu! Giãn ra: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu! Thu hẹp: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu! Code mẫu: Thuộc tính text-decorationNếu hay dùng thẻ a thì bạn cũng không lạ gì thuộc tính này – đặc biệt là giá trị underline. Text-decoration chuyên dùng để trang trí cho văn bản. Nói trang trí có vẻ nguy hiểm, thực tế, nó chỉ tạo ra các hiệu ứng thẩm mỹ đơn giản sau:
Gạch đầu chữ có lẽ ít dùng, gạch chân chữ hay dùng nhất, gạch ngang chữ thường dùng với ý định ám chỉ văn bản đó không chính xác nhưng không muốn xóa đi mà để người xem nhìn thấy để tránh. Riêng với gạch chân văn bản ngoài cách dùng CSS, bạn có thể đánh dấu văn bản đó bằng cặp thẻ và trong HTML, nó cũng cho kết quả tương tự. Sử dụng thuộc tính border-top và border-bottom cũng là ý tưởng hay để thay thế overline và underline trong một số trường hợp, vì nó cho phép chúng ta điều chỉnh khoảng cách với văn bản linh hoạt hơn. Thuộc tính text-alignCái này dùng để căn lề văn bản. Chắc bạn cũng không quá lạ lẫm với chúng, nếu từng xài Office rồi thì còn quen thuộc ấy chứ. Có 4 giá trị của thuộc tính text-align, bao gồm:
Căn trái text-align: left Căn phải text-align: right Căn giữa text-align: center Để thấy được ý nghĩa của thẻ justify tôi cần đoạn văn bản dài ít nhất 3 dòng, và đây chính là đoạn văn bản ấy, tôi đang cố nghĩ ra nhiều từ để viết cho nó dài ra, cho nên có thể bạn đọc thấy nó hơi lăng nhăng. Nhưng đừng quan trọng hóa. Bạn chỉ cần nhớ trong đầu là đoạn này được căn bằng text-align: justify. Code mẫu: p {text-align: justify}P/S: Để 2 bên lề đều thẳng, khoảng cách chữ của từng dòng sẽ được tăng lên hay giảm đi chút ít, do vậy bạn không nên dùng thuộc tính này cho các cột có chiều rộng quá nhỏ mà văn bản lại dài, vì lúc ấy lề thì thẳng thật nhưng trông nó rất ngộ! Thuộc tính line-heightThuộc tính này dùng để điều chỉnh chiều cao dòng. Nói chính xác hơn 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:
Dưới đây là một số ví dụ, áp dụng cho các đoạn văn bản Lorem – nên bạn không cần phải hiểu ý nghĩa của chúng: p {line-height: 1.4} p {line-height: 1.4} p {line-height: 2} p {line-height: 2} p {line-height: 100%} p {line-height: 100%} Thuộc tính text-transformDùng để biến đổi từ chữ thường sang chữ TOÀN HOA hoặc Hoa Đầu Dòng và ngược lại. Có 3 giá trị:
Nói chung thì, không phải font nào thuộc tính này nó cũng chuyển đổi tốt và đẹp, cho nên trước khi muốn chuyển bạn nên kiểm tra trước. Nhưng bạn yên tâm các font phổ thông thì hầu như OK cả. Có thể bạn hỏi text-transform này có ích lợi gì – áp dụng trong trường hợp nào? Câu trả lời là:
Thuộc tính vertical-alignDùng để điều chỉnh khoảng cách của văn bản so với đường cơ sở, các giá trị:
Code mẫu: Tôi đang để chữ vertical-align lên 15px so với đường cơ sở. |
