Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến văn bản

Các thuộc tính CSS liên quan đến văn bản

Bài viết này giải thích các thuộc tính CSS liên quan đến văn bản.

Bạn có thể tìm hiểu về cách sử dụng và cách viết các thuộc tính text-align, text-decoration và text-transform.

YouTube Video

Tạo HTML để xem trước

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Kiểu chữ (Liên quan đến văn bản)

Thuộc tính text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align là một thuộc tính trong CSS được sử dụng để xác định căn chỉnh ngang của văn bản và các phần tử nội dòng. Nó thường được sử dụng để căn chỉnh văn bản đoạn hoặc tiêu đề sang trái, phải hoặc giữa. Nó đóng vai trò quan trọng trong bố cục trang web và định dạng văn bản.

Các giá trị chính cho text-align

left (căn trái) 
1p {
2    text-align: left;
3}
  • left căn chỉnh văn bản sang trái (đây là phương pháp căn chỉnh mặc định cho nhiều ngôn ngữ).
right (căn phải) 
1p {
2    text-align: right;
3}
  • right căn chỉnh văn bản sang phải. Nó đặc biệt hiệu quả cho các ngôn ngữ được viết từ phải sang trái, chẳng hạn như tiếng Ả Rập và tiếng Do Thái.
center (căn giữa) 
1p {
2    text-align: center;
3}
  • center căn chỉnh văn bản vào giữa. Nó thường được sử dụng cho tiêu đề và đề mục.
justify (căn đều hai bên) 
1p {
2    text-align: justify;
3}
  • justify căn chỉnh đồng đều các cạnh trái và phải của văn bản, tạo ấn tượng gọn gàng. Nó được sử dụng trong các bố cục như báo chí và tạp chí.
start (căn đầu) 
1p {
2    text-align: start;
3}
  • start căn chỉnh văn bản dựa trên vị trí bắt đầu. Đối với các ngôn ngữ được viết từ trái sang phải, nó hoạt động giống như căn chỉnh trái.
end (căn cuối) 
1p {
2    text-align: end;
3}
  • end căn chỉnh văn bản dựa trên vị trí kết thúc. Trong các ngôn ngữ được viết từ trái sang phải, nó hoạt động giống như căn chỉnh phải.

Sử dụng và ví dụ về text-align

Tiêu đề sử dụng căn giữa
  • Căn chỉnh giữa thường được sử dụng cho tiêu đề của các trang web và tài liệu. Nó trông đẹp mắt và tạo nên một thiết kế cân bằng về mặt trực quan.
Căn trái hoặc phải cho các đoạn văn
  • Các đoạn văn bản thường được căn trái theo mặc định, nhưng căn phải hoặc căn giữa có thể được sử dụng cho các thiết kế cụ thể.
Căn đều văn bản
  • Khi được căn chỉnh bằng justify, từng dòng văn bản được căn đều với cả hai cạnh trái và phải. Nó hữu ích cho các bố cục theo phong cách báo chí hoặc tạp chí.

Tóm tắt

  • text-align là một thuộc tính CSS được sử dụng để căn chỉnh ngang văn bản hoặc các phần tử nội dòng.
  • Nó có thể xử lý nhiều bố cục khác nhau như căn trái, căn phải, căn giữa và căn đều.
  • Lựa chọn căn chỉnh phù hợp dựa trên bố cục và mục tiêu thiết kế là chìa khóa để đạt được một thiết kế dễ đọc và đẹp mắt.

Hãy sử dụng căn chỉnh văn bản một cách hiệu quả như một phần trong thiết kế của bạn với text-align.

Thuộc tính text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration là một thuộc tính CSS được sử dụng để áp dụng gạch chân, gạch trên, gạch ngang hoặc các đường kiểu tùy chỉnh cho văn bản. Bằng cách sử dụng thuộc tính này, bạn có thể làm cho kiểu dáng văn bản trở nên trang trí hơn hoặc nhấn mạnh hơn về mặt thị giác.

Giải thích:

  • Lớp text-decoration-underline hiển thị gạch chân dưới văn bản.
  • Lớp text-decoration-overline vẽ một đường trên đầu văn bản.
  • Lớp text-decoration-line-through áp dụng gạch ngang cho văn bản.
  • Lớp text-decoration-custom-underline là một ví dụ về việc tùy chỉnh màu sắc, kiểu dáng, và độ dày của gạch chân.

Giá trị chính của text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Chỉ định none sẽ loại bỏ mọi trang trí khỏi văn bản. Được sử dụng khi bạn muốn loại bỏ gạch chân khỏi các liên kết, chẳng hạn.
underline 
1p {
2    text-decoration: underline;
3}
  • Chỉ định underline sẽ vẽ một gạch chân dưới văn bản. Nó có thể được sử dụng cho các liên kết hoặc các phần mà bạn muốn nhấn mạnh.
overline 
1p {
2    text-decoration: overline;
3}
  • Chỉ định overline sẽ vẽ một đường trên đầu văn bản. Được sử dụng để thay đổi diện mạo hoặc cho mục đích trang trí đặc biệt.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Chỉ định line-through sẽ vẽ một đường gạch ngang qua văn bản. Nó được sử dụng để biểu thị sự chỉnh sửa.
blink（点滅）
  • blink là một giá trị làm cho văn bản nhấp nháy, nhưng không còn được sử dụng nữa vì không được hầu hết các trình duyệt hỗ trợ.

Cài đặt nâng cao của text-decoration

text-decoration cho phép cài đặt chi tiết như sau:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Thuộc tính text-decoration-color cho phép bạn chỉ định màu sắc của các đường gạch chân hoặc gạch ngang. Theo mặc định, nó khớp với màu văn bản, nhưng bạn có thể thêm điểm nhấn bằng cách chọn một màu khác.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • Thuộc tính text-decoration-style cho phép bạn chỉ định kiểu dáng của các đường trang trí. Các giá trị bao gồm như sau:.
    • solid (Mặc định, đường liền mạch)
    • double (Đường đôi)
    • dotted (Đường chấm chấm)
    • dashed (Đường gạch đứt)
    • wavy (Đường lượn sóng)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Thuộc tính text-decoration-thickness cho phép bạn chỉ định độ dày của các đường trang trí. Bạn có thể điều chỉnh nó bằng các đơn vị như 2px hoặc 0.1em, chẳng hạn.

Tóm tắt:

  • text-decoration là một thuộc tính dùng để thêm các đường trang trí vào văn bản, chẳng hạn như gạch chân hoặc gạch ngang.
  • Với các thuộc tính text-decoration-color, text-decoration-style, và text-decoration-thickness, có thể tùy chỉnh chi tiết hơn.
  • Nó thường được sử dụng để nhấn mạnh các liên kết hoặc văn bản quan trọng, hoặc như một yếu tố thiết kế.

Sử dụng text-decoration, bạn có thể thêm các điểm nhấn tinh tế hoặc nhấn mạnh văn bản.

Thuộc tính text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform là một thuộc tính CSS dùng để chuyển đổi kiểu chữ của văn bản. Thuộc tính này cho phép bạn kiểm soát định dạng hiển thị của văn bản được chỉ định trong HTML, tự động thay đổi chữ hoa hoặc chữ thường của văn bản do người dùng nhập hoặc văn bản đã tồn tại.

Giải thích:

  • Lớp text-transform-none hiển thị văn bản mà không thay đổi so với văn bản gốc.
  • Lớp text-transform-capitalize chuyển đổi chữ cái đầu tiên của mỗi từ thành chữ hoa.
  • Lớp text-transform-uppercase chuyển toàn bộ văn bản thành chữ hoa.
  • Lớp text-transform-lowercase chuyển toàn bộ văn bản thành chữ thường.

Các giá trị chính của text-transform

none 
1p {
2    text-transform: none;
3}
  • Cụ thể none giữ nguyên văn bản mà không thay đổi.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Cụ thể capitalize chuyển chữ cái đầu tiên của mỗi từ thành chữ hoa. Ranh giới từ được xác định bằng khoảng trắng hoặc dấu câu.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Cụ thể uppercase chuyển toàn bộ văn bản thành chữ hoa.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Cụ thể lowercase chuyển toàn bộ văn bản thành chữ thường.
full-width
  • Cụ thể full-width chuyển văn bản thành ký tự dạng toàn chiều. Điều này thường được sử dụng như một kiểu đặc biệt khi làm việc với Kanji hoặc Kana, nhưng ít trình duyệt hỗ trợ tính năng này.

Tóm tắt:

  • text-transform là một thuộc tính CSS tiện lợi để thay đổi chữ hoa hoặc chữ thường của văn bản.
  • Nó thường được sử dụng để tạo sự đồng nhất về hình ảnh cho tiêu đề, menu điều hướng và văn bản biểu mẫu.
  • Nó hữu ích khi bạn muốn hiển thị văn bản theo một phong cách nhất định bất kể đầu vào của người dùng.

Bằng cách sử dụng thuộc tính này, bạn có thể dễ dàng xử lý văn bản đồng thời duy trì sự đồng nhất về hình ảnh.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến phông chữCác thuộc tính CSS liên quan đến khoảng cách văn bản