Właściwości CSS do wyświetlania kodu i cytatów
Ten artykuł wyjaśnia właściwości CSS związane z wyświetlaniem kodu i cytatów.
Możesz dowiedzieć się o właściwościach CSS związanych z wyświetlaniem kodu i cytatami, takich jak quotes i user-select, w tym o ich zastosowaniach i sposobach ich zapisu.
YouTube Video
HTML do podglądu
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>Właściwości CSS do wyświetlania kodu i cytatów
Właściwość 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}Właściwość white-space to właściwość CSS, która określa, jak spacje i przerwy w wierszach są obsługiwane wewnątrz elementu. Domyślnie HTML traktuje wiele spacji jako jedną spację, ale właściwość white-space pozwala zmodyfikować to zachowanie.
Główne wartości właściwości white-space
normalto wartość domyślna, gdzie wiele spacji jest łączonych w jedną, a linie łamią się automatycznie.nowrapłączy spacje w jedną, ale zapobiega łamaniu linii. Zawartość jest wyświetlana w jednej linii.prezachowuje spacje i przerwy w wierszach takimi, jakie są. Łamanie linii nie występuje.pre-wrapzachowuje spacje i przerwy w wierszach, ale pozwala na łamanie linii.pre-linełączy spacje, ale zachowuje przerwy w wierszach, jednocześnie pozwalając na łamanie linii.break-spaceszachowuje spacje i przerwy w wierszach, pozwalając jednocześnie na łamanie przy długich słowach lub spacjach.
Właściwość 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}Właściwość overflow-wrap, wcześniej znana jako word-wrap, definiuje, jak obsługiwane są słowa, które przekraczają szerokość kontenera. Za pomocą tej właściwości można odpowiednio łamać wyrazy, aby zapobiec przepełnieniu tekstu i zakłóceniu układu.
W tym przykładzie, przy użyciu wartości normal, długie słowa mogą przekraczać szerokość kontenera i powodować przewijanie poziome, ale break-word wymusza łamanie długich słów.
Wartości właściwości
overflow-wrap zasadniczo ma dwie wartości:.
-
normalnormalto domyślna wartość, w której przeglądarka stosuje standardowe zasady łamania wyrazów. Zazwyczaj wyrazy łamane są tylko w miejscach możliwych do złamania, takich jak spacje lub łączniki. Jeśli słowo jest wyjątkowo długie, może przekroczyć szerokość kontenera i zakłócić układ. -
break-wordbreak-wordwymusza łamanie wierszy w razie potrzeby, przenosząc tekst do następnej linii bez względu na długość słowa. Pomaga to zapobiec łamaniu układu kontenera z powodu długich słów.Gdy określono
break-word, słowa są dzielone nawet w miejscach bez spacji lub myślników, aby zmieściły się w szerokości ekranu. Jest to szczególnie przydatne w przypadku adresów URL lub bardzo długich słów.
Różnice między overflow-wrap a innymi właściwościami
Właściwości podobne do overflow-wrap to word-break i white-space.
Różnica względem word-break
word-break definiuje, jak przetwarzane są całe słowa, podczas gdy overflow-wrap wymusza zawijanie tylko wtedy, gdy słowo przekracza szerokość kontenera. Na przykład, word-break: break-all; dzieli słowa w dowolnym miejscu, nawet jeśli nie są długie, podczas gdy overflow-wrap zawija słowa tylko wtedy, gdy przekraczają kontener.
Różnica względem white-space
Właściwość white-space kontroluje, jak są przetwarzane podziały wierszy i spacje w całym tekście. W przeciwieństwie do overflow-wrap, white-space definiuje, czy zachować podziały wierszy i spacje, ale nie wpływa bezpośrednio na zawijanie słów.
Na przykład, white-space: nowrap; zapewnia, że cały tekst pozostaje w jednej linii bez zawijania. Z drugiej strony, overflow-wrap kontroluje zawijanie tekstu.
Praktyczne przypadki użycia
overflow-wrap jest szczególnie przydatny w następujących sytuacjach:.
- Wyświetlanie adresów URL: Zapobiega problemom z układem podczas wyświetlania długich adresów URL.
- Terminy techniczne: Obsługuje przypadki, gdy ciągłe angielskie słowa lub terminy techniczne przekraczają szerokość kontenera.
- Projektowanie responsywne: Zapewnia, że długi tekst nie łamie układu, nawet na małych ekranach.
Właściwość quotes
1q {
2 quotes: "(" ")" "[" "]";
3}Właściwość quotes służy do dostosowywania znaków cudzysłowu. Zazwyczaj znaki cudzysłowu są automatycznie wstawiane, gdy zawartość jest osadzona w elementach <blockquote> lub <q>, ale za pomocą właściwości quotes można określić niestandardowe znaki cudzysłowu.
W tym przykładzie nawiasy okrągłe ((, )) są używane jako zewnętrzne znaki cudzysłowu. Dodatkowo, zagnieżdżone znaki cudzysłowu są przedstawiane za pomocą nawiasów kwadratowych ([, ]).
Składnia
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}Właściwość quotes można określić za pomocą wartości takich jak następujące:.
none: Żadne znaki cudzysłowu nie będą wyświetlane.- Seria cudzysłowów: Określ początkowe i końcowe znaki cudzysłowu. Pierwszy zestaw przedstawia zewnętrzne znaki cudzysłowu, natomiast kolejne zestawy służą zagnieżdżonym cytatom.
Główne punkty dotyczące quotes
Właściwość quotes jest użyteczna do dostosowywania znaków cudzysłowu używanych w cytatach tekstowych. Ustawiając odpowiednie znaki cudzysłowu w zależności od projektu i języka, możesz uzyskać bardziej wyrafinowaną prezentację strony. Korzystanie z właściwości quotes oferuje następujące korzyści:.
- Dostosowanie znaków cudzysłowu: Możesz zmienić domyślny kształt cudzysłowów lub ustawić znaki cudzysłowu dostosowane do konkretnego projektu.
- Obsługuje zagnieżdżone cytaty: Możesz zastosować różne zestawy znaków cudzysłowu dla zagnieżdżonych cytatów.
- Dostosowywanie w zależności od kraju i języka: Łatwo zastosuj różne style cudzysłowu w zależności od języka lub kraju, co jest przydatne w przypadku stron międzynarodowych.
Właściwość 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}-
Właściwość
user-selectto właściwość CSS używana do kontrolowania, czy użytkownicy mogą zaznaczać tekst. Korzystając z tej właściwości, możesz zapobiec kopiowaniu tekstu w określonych elementach lub na całej stronie, albo przeciwnie, umożliwić jego zaznaczanie. Jeśli określiszalldla właściwościuser-select, cały element zostanie wybrany jednocześnie. Na przykład, gdy użytkownik kliknie pole tekstowe lub akapit, cały element zostanie wybrany jednocześnie. -
Można go również użyć do masowego zaznaczania fragmentów kodu źródłowego.
-
W tym przykładzie tekst pierwszego akapitu można zaznaczyć, ale tekst drugiego akapitu nie jest zaznaczalny. W klasie
select-allwłaściwośćuser-selectjest ustawiona naall, dzięki czemu cały element można wybrać jednocześnie.
Składnia
1element {
2 user-select: auto | none | text | all | contain;
3}Właściwość user-select może być określona następującymi wartościami:.
auto: Użyj domyślnego zachowania przeglądarki. Zaznaczanie tekstu jest dozwolone w większości elementów, ale może być ograniczone w przypadku niektórych interaktywnych elementów, takich jak przyciski i linki.none: Zaznaczanie tekstu jest całkowicie wyłączone. Użytkownicy nie będą mogli zaznaczać tekstu w obrębie tego elementu.text: Pozwala zaznaczać tylko tekst w obrębie danego elementu.all: Cały element zostaje wybrany jednocześnie. Zamiast częściowego zaznaczania, cały element jest wybierany jako całość.contain: Obsługiwane tylko przez niektóre przeglądarki. Pozwala zaznaczyć tylko element w lokalizacji kliknięcia.
Obsługiwane przeglądarki
Właściwość user-select jest obsługiwana przez większość nowoczesnych przeglądarek. Jednak niektóre przeglądarki mogą wymagać prefiksów dostawców, takich jak -webkit-user-select.
- Chrome: Obsługiwane
- Firefox: Obsługiwane
- Safari: Obsługiwane (wymaga prefiksu
-webkit-). - Edge: Obsługiwane
- Internet Explorer: Nieobsługiwane
Główne przypadki użycia
Właściwość user-select oferuje następujące zalety:.
- Elementy interfejsu użytkownika: Wyłącz zaznaczanie tekstu, aby uniknąć zakłóceń podczas kliknięcia lub operacji przeciągania.
- Zapobieganie kopiowaniu tekstu: Uniemożliwienie zaznaczania i kopiowania tekstu w określonych elementach.
- Formularze i interaktywne elementy: Stosowanie w elementach interaktywnych, gdzie zaznaczanie tekstu nie jest konieczne, aby poprawić doświadczenie użytkownika.
Podsumowanie
Właściwość user-select to użyteczna właściwość CSS, która umożliwia elastyczne kontrolowanie zaznaczania tekstu na stronie internetowej. Może zapobiec przypadkowemu zaznaczeniu niepotrzebnego tekstu lub umożliwić użytkownikom zaznaczenie wszystkiego na raz, dostosowując się do różnych interakcji.
Właściwość 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}- Właściwość
tab-sizesłuży do dostosowania przestrzeni dla znaków tabulacji. Domyślnie szerokość tabulacji jest ustawiona zazwyczaj na 8 spacji, ale można ją dostosować do dowolnej wartości za pomocą właściwościtab-size.
Składnia
1element {
2 tab-size: length | number;
3}Właściwość tab-size może przyjmować następujące typy wartości.
number: Określa szerokość znaku tabulacji w liczbie znaków. Można określić zarówno liczbę całkowitą, jak i dziesiętną.length: Określa szerokość znaku tabulacji przy użyciu jednostek długości (np. px, em).
Notatki
-
Właściwość
tab-sizejest zazwyczaj stosowana w przypadku czcionek o stałej szerokości (monospace). W przypadku zastosowania czcionek proporcjonalnych szerokość tabulacji może być nierówna. -
Określając liczbę znaków, należy pamiętać o skalowaniu na różnych urządzeniach.
Podsumowanie
Użycie właściwości tab-size zwiększa elastyczność podczas wyświetlania kodu lub znaków tabulacji. Jako programista, odpowiednie ustawienie szerokości tabulacji zapewnia czytelność kodu i spójność projektu.
Właściwość 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}- Właściwość
text-indentsłuży do wcięcia pierwszej linii tekstu w elemencie blokowym o określoną odległość. Ta właściwość pozwala na stylizowanie wyłącznie pierwszej linii akapitu.
Składnia
1element {
2 text-indent: length | percentage;
3}Właściwość text-indent może przyjmować następujące typy wartości.
length: Określa wcięcie przy użyciu jednostek długości (np. px, em).percentage: Określa wcięcie jako procent w oparciu o szerokość elementu kontenera.
Notatki
text-indentdotyczy tylko elementów blokowych. Nie ma wpływu na elementy liniowe.
Podsumowanie
Właściwość text-indent to prosty, ale potężny sposób na tworzenie czytelnych projektów tekstowych. Poprzez opanowanie podstaw i zrozumienie zaawansowanych zastosowań i kwestii, możesz stylizować bardziej efektywnie.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.