Các thuộc tính CSS cho hiển thị mã và trích dẫn
Bài viết này giải thích các thuộc tính CSS liên quan đến hiển thị mã và trích dẫn.
Bạn có thể tìm hiểu về các thuộc tính CSS liên quan đến hiển thị mã và trích dẫn, chẳng hạn như quotes và user-select, bao gồm cả các trường hợp sử dụng và cách viết chúng.
YouTube Video
HTML để Xem trước
css-code-quotation.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>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-code-quotation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Code Display And Quotations</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Code Display And Quotations Related Properties</h2>
20 </header>
21 <article>
22 <h3>white-space</h3>
23 <section>
24 <header><h4>white-space: normal</h4></header>
25 <section class="sample-view">
26 <p class="white-space-normal">This is an example with multiple spaces. The spaces will be collapsed.</p>
27 </section>
28 <header><h4>white-space: nowrap</h4></header>
29 <section class="sample-view">
30 <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
31 </section>
32 <header><h4>white-space: pre</h4></header>
33 <section class="sample-view">
34<p class="white-space-pre">This is an
35 example with multiple
36 spaces and
37 line breaks.</p>
38 </section>
39 <header><h4>white-space: pre-wrap</h4></header>
40 <section class="sample-view">
41<p class="white-space-pre-wrap">This is an
42 example with multiple
43 spaces and
44 line breaks. The text will wrap when it reaches the edge.</p>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>overflow-wrap</h3>
50 <section>
51 <header><h4>overflow-wrap: normal</h4></header>
52 <section class="sample-view">
53 <section class="overflow-wrap-example">
54 <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
55 </section>
56 </section>
57 <header><h4>overflow-wrap: break-word</h4></header>
58 <section class="sample-view">
59 <section class="overflow-wrap-example">
60 <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
61 </section>
62 </section>
63 </section>
64 </article>
65 <article>
66 <h3>quotes</h3>
67 <section>
68 <header><h4>quotes: "(" ")"</h4></header>
69 <section class="sample-view">
70 <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
71 </section>
72 <header><h4>quotes: "(" ")" "[" "]"</h4></header>
73 <section class="sample-view">
74 <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
75 </section>
76 </section>
77 </article>
78 <article>
79 <h3>user-select</h3>
80 <section>
81 <header><h4>user-select: auto</h4></header>
82 <section class="sample-view">
83 <p class="select-auto">This text is selectable.</p>
84 </section>
85 <header><h4>user-select: none</h4></header>
86 <section class="sample-view">
87 <p class="select-none">This text cannot be selected.</p>
88 </section>
89 <header><h4>user-select: all</h4></header>
90 <section class="sample-view">
91 <p class="select-all">All text will be selected at once.</p>
92 </section>
93 </section>
94 </article>
95 <article>
96 <h3>tab-size</h3>
97 <section>
98 <header><h4>tab-size: initial</h4></header>
99 <section class="sample-view">
100<pre>
101function example() {
102 console.log("Initial Tab size is 8");
103}
104</pre>
105 </section>
106 <section>
107 <header><h4>tab-size: 2</h4></header>
108 <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111 console.log("Tab size is set to 2");
112}
113</pre>
114 </section>
115 <header><h4>tab-size: 4</h4></header>
116 <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119 console.log("Tab size is set to 4");
120}
121</pre>
122 </section>
123 <header><h4>tab-size: 20px</h4></header>
124 <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127 console.log("Tab size is set to 20px");
128}
129</pre>
130 </section>
131 </section>
132 </article>
133 <article>
134 <h3>text-indent</h3>
135 <section>
136 <header><h4>text-indent: 0</h4></header>
137 <section class="sample-view">
138 <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139 </section>
140 <header><h4>text-indent: 20px</h4></header>
141 <section class="sample-view">
142 <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143 </section>
144 <header><h4>text-indent: -10px</h4></header>
145 <section class="sample-view">
146 <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147 </section>
148 <header><h4>text-indent: 10%</h4></header>
149 <section class="sample-view">
150 <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151 </section>
152 <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153 <section class="sample-view">
154 <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155 </section>
156 </section>
157 </article>
158
159 </main>
160</body>
161</html>Các thuộc tính CSS cho hiển thị mã và trích dẫn
Thuộc tính white-space
1.white-space-normal {
2 white-space: normal;
3 border: 1px solid black;
4 padding: 10px;
5 width: 300px;
6}
7
8.white-space-nowrap {
9 white-space: nowrap;
10 border: 1px solid black;
11 padding: 10px;
12 width: 300px;
13}
14
15.white-space-pre {
16 white-space: pre;
17 border: 1px solid black;
18 padding: 10px;
19 width: 300px;
20}
21
22.white-space-pre-wrap {
23 white-space: pre-wrap;
24 border: 1px solid black;
25 padding: 10px;
26 width: 300px;
27}Thuộc tính white-space là một thuộc tính CSS dùng để chỉ định cách xử lý khoảng trắng và ngắt dòng trong một phần tử. Theo mặc định, HTML coi nhiều khoảng trắng là một khoảng trắng duy nhất, nhưng thuộc tính white-space cho phép bạn thay đổi hành vi này.
Các giá trị chính của white-space
normallà giá trị mặc định, trong đó nhiều khoảng trắng được thu gọn thành một và các dòng tự động ngắt.nowrapthu gọn các khoảng trắng thành một nhưng ngăn chặn việc ngắt dòng. Nội dung được hiển thị trên một dòng duy nhất.pregiữ nguyên khoảng trắng và ngắt dòng như ban đầu. Không xảy ra ngắt dòng.pre-wrapgiữ nguyên khoảng trắng và ngắt dòng đồng thời cho phép ngắt dòng.pre-linethu gọn các khoảng trắng nhưng giữ nguyên việc ngắt dòng, và cho phép ngắt dòng.break-spacesgiữ nguyên khoảng trắng và ngắt dòng, trong khi cho phép ngắt dòng tại các từ dài hoặc khoảng trắng.
Thuộc tính overflow-wrap
1.overflow-wrap-example {
2 width: 200px;
3 border: 1px solid #000;
4}
5
6.overflow-wrap-normal {
7 overflow-wrap: normal;
8}
9
10.overflow-wrap-break-word {
11 overflow-wrap: break-word;
12}Thuộc tính overflow-wrap, trước đây được gọi là word-wrap, xác định cách xử lý các từ khi chúng vượt quá chiều rộng của phần tử chứa. Bằng cách sử dụng thuộc tính này, bạn có thể ngắt dòng các từ một cách hợp lý để ngăn văn bản bị tràn ra ngoài và làm hỏng bố cục.
Trong ví dụ này, với giá trị normal, các từ dài có thể tràn ra ngoài phần tử chứa và gây cuộn ngang, nhưng break-word buộc các từ dài phải được ngắt dòng.
Các giá trị của thuộc tính
overflow-wrap chủ yếu có hai giá trị:.
-
normalnormallà giá trị mặc định, nơi trình duyệt tuân theo các quy tắc ngắt dòng tiêu chuẩn. Thông thường, các từ chỉ được ngắt dòng tại các điểm có thể tách biệt, chẳng hạn như khoảng trắng hoặc dấu gạch nối. Nếu một từ quá dài, nó có thể vượt quá chiều rộng của phần tử chứa và làm hỏng bố cục. -
break-wordbreak-wordbuộc một dòng phải ngắt nếu cần thiết, đưa văn bản sang dòng tiếp theo bất kể độ dài của từ. Điều này giúp ngăn chặn bố cục của container bị phá vỡ do từ quá dài.Khi
break-wordđược chỉ định, các từ sẽ được ngắt dòng ngay cả ở những nơi không có khoảng trắng hoặc gạch ngang để vừa với chiều rộng màn hình. Điều này đặc biệt hữu ích cho URL hoặc những từ rất dài.
Sự khác biệt giữa overflow-wrap và các thuộc tính khác
Các thuộc tính tương tự như overflow-wrap bao gồm word-break và white-space.
Khác biệt so với word-break
word-break xác định cách xử lý toàn bộ từ, trong khi overflow-wrap chỉ kích hoạt việc ngắt dòng khi một từ vượt quá chiều rộng của container. Ví dụ, word-break: break-all; ngắt từ tại bất kỳ vị trí nào, ngay cả khi chúng không dài, trong khi overflow-wrap chỉ ngắt dòng khi các từ vượt quá giới hạn container.
Khác biệt so với white-space
Thuộc tính white-space kiểm soát cách xử lý các ngắt dòng và khoảng trắng trong toàn bộ văn bản. Không giống như overflow-wrap, white-space xác định liệu các ngắt dòng và khoảng trắng có được giữ lại hay không nhưng không ảnh hưởng trực tiếp đến việc ngắt từ.
Ví dụ, white-space: nowrap; đảm bảo rằng toàn bộ văn bản nằm trên một dòng duy nhất mà không bị ngắt dòng. Mặt khác, overflow-wrap kiểm soát việc ngắt dòng văn bản.
Các trường hợp sử dụng thực tế
overflow-wrap đặc biệt hữu ích trong các tình huống sau:.
- Hiển thị URL: Ngăn chặn các vấn đề về bố cục khi hiển thị các URL dài.
- Thuật ngữ kỹ thuật: Xử lý các trường hợp từ tiếng Anh liên tục hoặc thuật ngữ kỹ thuật vượt quá chiều rộng của container.
- Thiết kế đáp ứng: Đảm bảo rằng văn bản dài không làm phá vỡ bố cục ngay cả trên các màn hình nhỏ.
Thuộc tính quotes
1q {
2 quotes: "(" ")" "[" "]";
3}Thuộc tính quotes được sử dụng để tùy chỉnh dấu ngoặc kép. Thông thường, dấu ngoặc kép được tự động chèn khi gói nội dung của các phần tử <blockquote> hoặc <q>, nhưng bằng cách sử dụng thuộc tính quotes, bạn có thể chỉ định dấu ngoặc kép tùy chỉnh.
Trong ví dụ này, dấu ngoặc đơn ((, )) được sử dụng làm dấu ngoặc kép bên ngoài. Ngoài ra, dấu ngoặc kép lồng nhau được biểu thị bằng dấu ngoặc vuông ([, ]).
Cú pháp
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}Thuộc tính quotes có thể được chỉ định với các giá trị như sau:.
none: Không hiển thị dấu ngoặc kép.- Một chuỗi ngoặc kép: Chỉ định dấu mở và đóng ngoặc kép. Bộ đầu tiên biểu thị dấu ngoặc kép bên ngoài, trong khi các bộ tiếp theo là dành cho các dấu ngoặc lồng nhau.
Các điểm chính của quotes
Thuộc tính quotes là một thuộc tính hữu ích để tùy chỉnh dấu ngoặc kép được sử dụng trong trích dẫn văn bản. Bằng cách thiết lập các dấu ngoặc kép phù hợp với thiết kế và ngôn ngữ, bạn có thể đạt được một trình bày trang tinh tế hơn. Việc sử dụng thuộc tính quotes mang lại những lợi ích như sau:.
- Tùy chỉnh dấu ngoặc kép: Bạn có thể thay đổi hình dạng mặc định của dấu ngoặc kép hoặc đặt dấu ngoặc kép phù hợp với một thiết kế cụ thể.
- Hỗ trợ dấu ngoặc kép lồng nhau: Bạn có thể áp dụng các tập dấu ngoặc kép khác nhau cho các trích dẫn lồng nhau.
- Có thể tùy chỉnh theo quốc gia và ngôn ngữ: Dễ dàng áp dụng các kiểu dấu ngoặc kép khác nhau tùy thuộc vào ngôn ngữ hoặc quốc gia, điều này hữu ích cho các trang web quốc tế.
Thuộc tính user-select
1.select-auto {
2 user-select: auto;
3}
4
5.select-none {
6 user-select: none;
7}
8
9.select-all {
10 user-select: all;
11}-
Thuộc tính
user-selectlà một thuộc tính CSS được sử dụng để kiểm soát việc người dùng có thể chọn văn bản hay không. Bằng cách sử dụng thuộc tính này, bạn có thể ngăn văn bản bị sao chép trong các phần tử cụ thể hoặc trên toàn bộ trang, hoặc ngược lại làm cho nó có thể chọn được. Nếu bạn chỉ địnhallcho thuộc tínhuser-select, toàn bộ phần tử sẽ được chọn cùng một lúc. Ví dụ, khi người dùng nhấp vào trường văn bản hoặc đoạn văn, toàn bộ phần tử sẽ được chọn cùng một lúc. -
Nó cũng có thể được sử dụng để chọn toàn bộ mã nguồn.
-
Trong ví dụ này, văn bản của đoạn đầu tiên có thể được chọn, nhưng văn bản của đoạn thứ hai thì không. Trong lớp
select-all, thuộc tínhuser-selectđược đặt làall, cho phép toàn bộ phần tử được chọn cùng một lúc.
Cú pháp
1element {
2 user-select: auto | none | text | all | contain;
3}Thuộc tính user-select có thể được chỉ định với các giá trị sau:.
auto: Sử dụng hành vi mặc định của trình duyệt. Việc chọn văn bản được cho phép trên hầu hết các phần tử, nhưng có thể bị hạn chế trên một số phần tử tương tác như nút và liên kết.none: Việc chọn văn bản hoàn toàn bị vô hiệu hóa. Người dùng sẽ không thể chọn văn bản trong phần tử đó.text: Chỉ cho phép chọn văn bản bên trong phần tử.all: Toàn bộ phần tử được chọn cùng một lúc. Thay vì chọn từng phần, toàn bộ phần tử sẽ được chọn như một khối thống nhất.contain: Chỉ được hỗ trợ bởi một số trình duyệt. Chỉ cho phép phần tử tại vị trí được nhấp chuột được chọn.
Các trình duyệt được hỗ trợ
Thuộc tính user-select được hỗ trợ bởi hầu hết các trình duyệt hiện đại. Tuy nhiên, một số trình duyệt có thể yêu cầu tiền tố nhà cung cấp như -webkit-user-select.
- Chrome: Được hỗ trợ
- Firefox: Được hỗ trợ
- Safari: Được hỗ trợ (yêu cầu tiền tố
-webkit-). - Edge: Được hỗ trợ
- Internet Explorer: Không được hỗ trợ
Các trường hợp sử dụng chính
Thuộc tính user-select mang lại những lợi ích sau:.
- Các phần tử giao diện: Tắt lựa chọn văn bản để tránh gây cản trở cho các thao tác nhấp chuột hoặc kéo thả.
- Ngăn sao chép văn bản: Ngăn lựa chọn và sao chép văn bản trên một số phần tử nhất định.
- Các biểu mẫu và phần tử tương tác: Áp dụng cho các phần tử tương tác mà không cần lựa chọn văn bản để cải thiện trải nghiệm người dùng.
Tóm tắt
Thuộc tính user-select là một thuộc tính CSS hữu ích, cho phép kiểm soát linh hoạt việc lựa chọn văn bản trên trang web. Thuộc tính này có thể ngăn người dùng vô tình chọn văn bản không cần thiết hoặc cho phép họ chọn tất cả cùng lúc, đáp ứng các tương tác khác nhau.
Thuộc tính tab-size
1.tab-size-2 {
2 tab-size: 2;
3}
4
5.tab-size-4 {
6 tab-size: 4;
7}
8
9.tab-size-20px {
10 tab-size: 20px;
11}- Thuộc tính
tab-sizeđược sử dụng để tùy chỉnh khoảng cách của ký tự tab. Theo mặc định, chiều rộng của tab thường được đặt là 8 khoảng trống, nhưng bạn có thể điều chỉnh nó thành bất kỳ giá trị nào bằng thuộc tínhtab-size.
Cú pháp
1element {
2 tab-size: length | number;
3}Thuộc tính tab-size có thể chấp nhận các loại giá trị sau.
number: Xác định chiều rộng của ký tự tab tính theo số lượng ký tự. Bạn có thể chỉ định số nguyên hoặc số thập phân.length: Xác định chiều rộng của ký tự tab bằng cách sử dụng các đơn vị chiều dài (ví dụ: px, em).
Ghi chú
-
Thuộc tính
tab-sizethường được sử dụng với các phông chữ monospace. Khi sử dụng với các phông chữ tỷ lệ, chiều rộng tab có thể trở nên không đồng đều. -
Khi chỉ định số lượng ký tự, hãy lưu ý đến việc thay đổi kích thước trên các thiết bị khác nhau.
Tóm tắt
Sử dụng thuộc tính tab-size tăng tính linh hoạt khi hiển thị mã hoặc các ký tự tab. Là một nhà phát triển, việc thiết lập chiều rộng tab đúng cách đảm bảo khả năng đọc mã và tính nhất quán trong thiết kế.
Thuộc tính text-indent
1p.text-indent-0 {
2 text-indent: 0;
3}
4
5p.text-indent-20px {
6 text-indent: 20px;
7}
8
9p.text-indent--10px {
10 text-indent: -10px;
11}
12
13p.text-indent-10percent {
14 text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18 text-indent: -20px;
19 margin-left: 20px;
20}- Thuộc tính
text-indentđược sử dụng để thụt lề dòng đầu tiên của văn bản trong một phần tử khối theo một khoảng cách nhất định. Thuộc tính này cho phép bạn định kiểu chỉ cho dòng đầu tiên của một đoạn văn.
Cú pháp
1element {
2 text-indent: length | percentage;
3}Thuộc tính text-indent có thể chấp nhận các loại giá trị sau.
length: Xác định khoảng cách thụt lề bằng các đơn vị chiều dài (ví dụ: px, em).percentage: Xác định khoảng cách thụt lề dưới dạng phần trăm dựa trên chiều rộng của phần tử chứa.
Ghi chú
text-indentchỉ áp dụng cho các phần tử khối. Nó không có tác dụng đối với các phần tử nội tuyến.
Tóm tắt
Thuộc tính text-indent là một công cụ đơn giản nhưng mạnh mẽ để thiết kế văn bản dễ đọc. Bằng cách nắm vững các kiến thức cơ bản và hiểu các trường hợp sử dụng nâng cao cùng các lưu ý, bạn có thể tạo kiểu hiệu quả hơn.
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.