10 Thuộc tính tạo kiểu văn bản trong CSS
Cascading Style Sheets (CSS) mô tả cách HTML hiển thị các phần tử trên màn hình. CSS có thể kiểm soát bố cục của nhiều trang web bằng một vài dòng mã.
CSS có các thuộc tính định dạng ảnh hưởng đến khoảng cách, hình thức và căn chỉnh của văn bản. Dưới đây là một số thuộc tính mà bạn có thể sử dụng để định kiểu văn bản trên các trang ứng dụng của mình.
Mục Lục
1. Màu văn bản
Các màu sắc thuộc tính chỉ định màu nền trước chính của văn bản của bạn. Bạn có thể sử dụng tên màu được xác định trước như màu đỏ, trắnghoặc màu xanh lá. Bạn cũng có thể sử dụng giá trị hex hoặc các đơn vị khác như RGB, HSL và RGBA.
Các khung CSS như Tailwind CSS có tính năng màu tích hợp hiển thị nhiều sắc thái khác nhau. Điều này giúp bạn dễ dàng hơn trong việc chọn màu bạn thích. Hãy thay đổi màu của các tiêu đề sau bằng cách sử dụng một số thuộc tính sau:
<body>
<h1>Change My Color</h1> <h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS sẽ trông như thế này:
h1 {
color: orange;
}h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
Và văn bản được tạo kiểu sẽ xuất hiện như sau:
2. Màu nền
Bạn có thể dùng màu nền tài sản để tạo nền hấp dẫn. Sử dụng nó để đặt các hình nền khác nhau cho các tiêu đề sau:
<body>
<h1>Change My Background Color</h1> <h2>Change My Background Color</h2>
<h3>Change My Background Color</h3>
<h4>Change My Background Color</h4>
</body>
Với CSS sau:
h1 {
background-color: orange;
}h2 {
background-color: #009900;
}
h3 {
background-color: rgb(204, 0, 0);
}
h4 {
background-color: hsl(60, 100%, 50%);
}
Khi trình duyệt của bạn hiển thị trang này, nó sẽ giống như thế này:
3. Căn chỉnh văn bản
Các căn chỉnh văn bản thuộc tính đặt căn chỉnh ngang của văn bản. Giá trị này có thể được bên trái, Phải, trung tâmhoặc biện minh.
Giá trị căn chỉnh kéo dài từng dòng văn bản, vì vậy tất cả chúng đều có cùng chiều rộng ở lề phải và trái. Sử dụng mã mẫu sau để khám phá bốn giá trị này:
<body>
<h1>Align Me Left</h1> <h2> Align Me Right</h2>
<h3>Align Me center</h3>
<p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
Sử dụng CSS sau để áp dụng các cách sắp xếp khác nhau:
h1 {
text-align: left;
}h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
Trong trình duyệt, điều này sẽ xuất hiện như vậy:
4. Hướng văn bản
Các văn bản chỉ đạo thuộc tính xác định hướng của văn bản. Xác định hướng sử dụng thuộc tính rtl (phải sang trái) hoặc ltr (trái sang phải). Hai cái này chỉ định hướng bạn muốn văn bản chảy.
Ví dụ, sử dụng rtl khi làm việc với các ngôn ngữ được viết từ phải sang trái như tiếng Do Thái hoặc tiếng Ả Rập. Bạn dùng ltr đối với các ngôn ngữ viết từ trái sang phải như tiếng Anh.
Hãy minh họa điều này với mã dưới đây:
<body>
<div>
<p class='ex1'>This paragraph goes from right to left. The cursor
moves from right to left when you type more information on the
page.</p> <p id="ex2">This paragraph goes from left to right. The cursor moves
from left to write when you type more information on the page!</p>
</div>
</body>
Với CSS đi kèm này:
.ex1 {
direction: rtl;
}#ex2 {
direction: ltr;
}
Kết quả cuối cùng sẽ giống như thế này:
5. Trang trí văn bản
Các trang trí văn bản thuộc tính thiết lập sự xuất hiện của các dòng trang trí trên văn bản. Đó là cách viết tắt của văn bản-trang trí-dòng, văn bản-trang trí-màu sắc, văn bản-trang trí-phong cáchVà văn bản-trang trí-độ dày tài sản. Nếu bạn không muốn có thuộc tính trên các phần tử có liên kết, hãy sử dụng trang trí văn bản: không có;
Bạn nên tránh gạch dưới văn bản bình thường vì kiểu đó thường biểu thị một liên kết. Hình minh họa sau đây cho thấy một số ví dụ trong mã:
<body>
<h1>Overline text decoration</h1> <h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
<p><a href="default.asp">This is a link</a></p>
</body>
Bạn có thể áp dụng các hiệu ứng trang trí khác nhau với CSS này:
h1 {
text-decoration: overline;
}h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
Và họ sẽ hiển thị một cái gì đó như thế này:
6. Chuyển đổi văn bản
Các chuyển đổi văn bản thuộc tính chỉ định loại trường hợp các chữ cái xuất hiện. Điều này có thể bằng chữ hoa hoặc chữ thường. Bạn cũng có thể sử dụng nó để viết hoa chữ cái đầu tiên của mỗi từ:
Ví dụ sau đây cho thấy cách thực hiện bằng mã:
<body>
<h1>Examples of text-transform property</h1> <p class="uppercase">This sentence is in uppercase.</p>
<p class="lowercase">This sentence is in lower case.</p>
<p class="capitalize">Capitalize this text.</p>
</body>
Tệp CSS:
p.uppercase {
text-transform: uppercase;
}p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Với kết quả như sau:
7. Khoảng cách giữa các chữ cái
Các khoảng cách giữa các chữ cái thuộc tính chỉ định khoảng cách giữa các chữ cái trong văn bản. Ví dụ sau minh họa cách chỉ định các kiểu giãn cách khác nhau.
<body>
<h1>Examples of Letter-spacing</h1> <h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
Sử dụng pixel hoặc các đơn vị đo lường khác trong tệp CSS của bạn:
h2 {
letter-spacing: 7px;
}h3 {
letter-spacing: -2px;
}
Và văn bản kết quả sẽ được kéo dài hoặc ép lại:
8. Khoảng cách từ
Các khoảng cách giữa các từ thuộc tính chỉ định khoảng cách giữa các từ trong văn bản. Trình duyệt có độ dài tiêu chuẩn cho khoảng cách giữa các từ, nhưng bạn có thể đặt khoảng cách của riêng mình. Ví dụ sau minh họa cách tăng hoặc giảm khoảng cách giữa các từ:
<body>
<h1>Examples of the Word-spacing Property</h1> <p>Normal word spacing.</p>
<p class="ex1">Large word spacing.</p>
<p class="ex2">Small word spacing.</p>
</body>
Sử dụng CSS này:
p.ex1 {
word-spacing: 1rem;
}p.ex2 {
word-spacing: -0.3rem;
}
Bạn có thể thấy rõ tác dụng của khoảng cách giữa các từ:
9. Chiều cao dòng
Các chiều cao giữa các dòng thuộc tính chỉ định khoảng cách giữa các dòng trong một đoạn văn. Chiều cao dòng tiêu chuẩn và mặc định trong hầu hết các trình duyệt là khoảng 110% đến 120%. Đoạn mã sau minh họa cách thay đổi nó:
<body>
<h1>Using line-height</h1> <p>
Standard line-height.
Standard line-height.
</p>
<p class="small">
Small small line-height.
Small line-height
</p>
<p class="big">
Bigger line-height.
Bigger line-height.
</p>
</body>
Sử dụng CSS sau:
p.small {
line-height: 0.7;
}p.big {
line-height: 1.8;
}
Bạn có thể xem kết quả giữa mỗi dòng trong mỗi đoạn:
10. Bóng chữ
Các bóng văn bản thuộc tính áp dụng bóng cho văn bản. Bạn phải chỉ định bóng ngang và bóng dọc. Text-shadow có thể bao gồm màu sắc và bán kính mờ. Hãy minh họa điều đó bằng đoạn mã sau:
<body>
<h1>Examples of Text-shadow effect.</h1> <h1 class="ex1">Text-shadow with color</h1>
<h1 class="ex2">Text-shadow with blur effect.</h1>
</body>
Với CSS này:
h1 {
text-shadow: 2px 2px;
}.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Sẽ tạo ra một số hiệu ứng bất thường và thú vị:
Tại sao nên tìm hiểu Thuộc tính tạo kiểu văn bản CSS?
CSS là xương sống của thiết kế web hiện đại. Cho dù ở dạng cố định hay trong các khung, chức năng cơ bản của các thuộc tính CSS đều giống nhau. Nắm vững các thuộc tính định dạng văn bản cho phép bạn tạo các giao diện người dùng hấp dẫn và dễ đọc.
Phiên bản mới nhất của CSS, CSS3, giới thiệu các khái niệm mới từ hoạt ảnh đến bố cục nhiều cột. Những khái niệm này giúp tạo các ứng dụng và tài liệu chuyên nghiệp dễ dàng hơn.