CSS Text Formatting đóng vai trò quan trọng trong thiết kế web. Nó cho phép nhà phát triển kiểm soát giao diện văn bản. Gần 70% nội dung trang web là văn bản. Vì vậy định dạng hiệu quả rất quan trọng để dễ đọc và thu hút người dùng.
- CSS cho phép bạn điều chỉnh thuộc tính phông chữ căn chỉnh văn bản khoảng cách và trang trí.
- Nó giúp tạo văn bản hấp dẫn trực quan và cải thiện trải nghiệm người dùng.
- Các thuộc tính liên quan đến văn bản có thể kết hợp để tạo kiểu và bố cục độc đáo.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.initials {
font-size: 40px;
font-weight: bold;
color: #4CAF50;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="initials">M.B.</p>
</body>
</html>
<!--Driver Code Ends-->
Code Overview:
- Font Size: Kích thước văn bản được đặt thành 40px làm cho nó lớn và nổi bật.
- Font Weight: Văn bản được in đậm làm cho nó nổi bật hơn.
- Color: Màu văn bản được đặt thành màu xanh lá cây (#4CAF50) mang lại vẻ tươi mới.
- Text Transform: Văn bản được chuyển đổi thành chữ hoa vì vậy các chữ cái xuất hiện bằng chữ in hoa.
- Font Family: Văn bản sử dụng Arial phông chữ sans-serif cho vẻ ngoài sạch sẽ hiện đại.
CSS Text Formatting Properties
Đây là các thuộc tính định dạng văn bản sau.
| Property | Description |
|---|---|
| text-color | Đặt màu văn bản bằng tên màu giá trị hex hoặc giá trị RGB. |
| text-align | Xác định căn chỉnh ngang của văn bản trong một khối hoặc phần tử ô bảng. |
| text-align-last | Đặt căn chỉnh của dòng cuối cùng xảy ra trong một phần tử. |
| text-decoration | Trang trí nội dung văn bản. |
| text-decoration-color | Đặt màu của trang trí văn bản như đường kẻ trên đường gạch chân và đường gạch ngang. |
| text-decoration-line | Đặt các trang trí văn bản khác nhau như gạch chân gạch trên gạch ngang. |
| text-decoration-style | Kết hợp các thuộc tính text-decoration-line và text-decoration-color. |
| text-indent | Thụt dòng đầu tiên của đoạn văn. |
| text-justify | Căn đều văn bản bằng cách trải các từ thành các dòng hoàn chỉnh. |
| text-overflow | Chỉ định văn bản tràn ẩn. |
| text-transform | Kiểm soát việc viết hoa văn bản. |
| text-shadow | Thêm bóng vào văn bản. |
| letter-spacing | Chỉ định khoảng cách giữa các ký tự của văn bản. |
| line-height | Đặt khoảng cách giữa các dòng. |
| direction | Đặt hướng văn bản. |
| word-spacing | Chỉ định khoảng cách giữa các từ của dòng. |
Text Formatting Properties
. color
Thuộc tính này giúp đặt màu của văn bản trên trang web của bạn. Nó nằm bên trong một phần tử hoặc bên trong thẻ body nếu không có phần tử nào là cha của nó.
Syntax
element{
color: color-name | rgb | rgba | hsl | hsla | hexadecimal;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Hello GFG</p>
</body>
</html>
<!--Driver Code Ends-->
. text-align
Thuộc tính này căn chỉnh văn bản trong một phần tử tại một vị trí cụ thể. Nó cũng căn chỉnh văn bản dựa trên hướng viết. Các thuộc tính như start và end có nghĩa là bắt đầu và kết thúc vùng chứa.
Syntax
element{
text-align: left| right |center | justify |start | end | initial | inherit;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
height: 50px;
background-color: aquamarine;
text-align: center;
color: white;
border: 2px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts because it contains all the letters of the English alphabet, making it a perfect pangram for evaluating typeface appearance and readability.
</p>
</body>
</html>
<!--Driver Code Ends-->
. text-align-last
Thuộc tính này trong CSS hiểu dòng cuối cùng là dòng sau ngắt dòng tự nhiên. Giả sử một người viết một đoạn văn thuộc tính này sẽ coi dòng cuối cùng. Đó là dòng sau khi ngắt dòng tự nhiên do trang chiều rộng kết thúc làm dòng cuối cùng của đoạn văn.
Syntax
element{
text-align-last: left | right | center | justify | initial | inherit;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 250px;
border: 2px solid black;
text-align-last:;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts because all the letters of the English alphabet, making it a perfect pangram for evaluating typeface appearance and readability.
</p>
</body>
</html>
<!--Driver Code Ends-->
. text - decoration
Thuộc tính này về cơ bản giúp thêm một dòng gạch chân cho văn bản. Có nhiều loại trang trí bạn có thể áp dụng cho văn bản.
Syntax
element{
text-decoration: dashed | dotted | double | line-through | none | overline | solid | underline | wavy;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 250px;
border: 2px solid black;
text-decoration: underline;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts because all the letters of the English alphabet, making it a perfect pangram for evaluating typeface appearance and readability.
</p>
</body>
</html>
<!--Driver Code Ends-->
. text-decoration-color
Thuộc tính này giúp thêm màu cho đường gạch chân trên hoặc dưới văn bản. Nó sử dụng thuộc tính text-decoration.
Syntax
element{
text-decoration-color: color | initial | inherit;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 250px;
border: 2px solid black;
text-decoration: underline;
text-decoration-color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts becaues</p>
</body>
</html>
<!--Driver Code Ends-->
. text-decoration-line
Thuộc tính này giúp đặt loại đường được sử dụng trong trang trí văn bản.
Syntax
element{
text-decoration-line: underline | overline | line-through | none | inherit | initial;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 250px;
border: 2px solid black;
text-decoration: underline;
text-decoration-color: gray;
text-decoration-line:line-through;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts because </p>
</body>
</html>
<!--Driver Code Ends-->
. text-decoration-style
Thuộc tính này giúp đặt bản xem trước của đường dùng cho văn bản cụ thể.
Syntax
element{
text-decoration-style: dashed | dotted | double | none | solid | wavy | initial | inherit;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 250px;
border: 2px solid black;
text-decoration: underline;
text-decoration-color: green;
text-decoration-style: wavy;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts because it contains all the letters of the English Alphabet, making it a perfect pangram for evaluating typefaceappearance and readability. </p>
</body>
</html>
<!--Driver Code Ends-->
. text-indent
Thuộc tính này trong CSS thêm một thụt lề vào dòng đầu tiên. Nó được viết trong một phần tử từ đầu phần tử đó.
Syntax
element{
text-indent: value in pixel's | inherit | initial;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 250px;
border: 2px solid black;
text-decoration: underline;
text-decoration-color: green;
text-decoration-style: wavy;
text-indent: 70px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>The quick brown fox jumps over the lazy dog. This phrase is often used to
test typewriters and fonts becauese it contains all the letters of the English alphabet, making it a perfect pangram for evaluating typeface appearance and readability.</p>
</body>
</html>
<!--Driver Code Ends-->
. text - justify
Thuộc tính này trong CSS chỉ định loại căn chỉnh được thực hiện. Nó dựa trên khoảng cách giữa các từ hoặc khoảng cách giữa các ký tự.
Syntax
element{
text-justify: initial | inter-word | inter-character | inherit;
}
index..html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1 {
text-align: center;
color: green;
}
div {
height: 100px;
width: 80%;
margin: 20px auto;
padding: 20px;
border: 2px solid black;
text-align: justify;
text-justify: inter-word;
column-count: 3;
column-gap: 1em;
column-rule: 2px solid red;
font-size: 16px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>
NEWSPAPER GeeksforGeeks
</h1>
<div>
CSS Text Formatting refers to applying styles to text elements to control appearance and layout.
This includes properties for color, alignment, decoration, indentation, justification, shadows,
spacing, and direction. These properties enhance readability and aesthetics,
improving the presentation of textual content on web pages.
</div>
</body>
</html>
<!--Driver Code Ends-->
. text-overflow
Đây là thuộc tính văn bản CSS bạn có thể quyết định hiển thị phần đầu văn bản ẩn.
Syntax
element{
text-overflow: clip | ellipse | inherit | initial;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
width: 200px;
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 2px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>CSS Text Formatting refers to applying styles to text elements to control appearance and layout.
This includes properties for color, alignment, decoration, indentation, justification,
shadows, spacing, and direction. These properties enhance readability and aesthetics,
improving the presentation of textual content on web pages..</p>
</body>
</html>
<!--Driver Code Ends-->
. text-transform
Đây là thuộc tính CSS giúp người dùng kiểm soát cách viết hoa văn bản trong phần tử.
Syntax
element{
text-transform: capitalize | lowercase | uppercase | initial | inherit
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
text-transform: capitalize;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Welcome to GeeksforGeeks</p>
</body>
</html>
<!--Driver Code Ends-->
. text-shadow
Đây là thuộc tính giúp người dùng thêm bóng vào văn bản trong phần tử.
Syntax
element{
text-shadow: shadow-height shadow-width blur-radius shadow-color;
}
index.html
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size: 23px;
font-family: sans-serif;
font-weight: 900;
text-shadow: 10px 10px 5px red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Welcome to GeeksforGeeks</p>
</body>
</html>
<!--Driver Code Ends-->
. bdo
Đây là một thẻ trong HTML ghi đè nội dung bên trong. Nó sử dụng một hướng cụ thể bằng thuộc tính dir.
index.html<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
bdo {
font-size: 23px;
font-family: sans-serif;
font-weight: 900;
text-shadow: 10px 10px 5px red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<bdo dir="rtl">Welcome to GeeksforGeeks</bdo>
</body>
</html>
<!--Driver Code Ends-->