Articles
Panimula sa CSS
Mga Katangian ng CSS para sa Pagpapakita ng Kodigo at mga Quotations

Mga Katangian ng CSS para sa Pagpapakita ng Kodigo at mga Quotations

Ipapaliwanag ng artikulong ito ang mga katangian ng CSS na may kaugnayan sa pagpapakita ng kodigo at mga quotations.

Maaari mong matutunan ang tungkol sa mga katangian ng CSS na may kaugnayan sa pagpapakita ng mga code at sipi, tulad ng quotes at user-select, kabilang ang kanilang mga gamit at kung paano isusulat ang mga ito.

YouTube Video

HTML para sa Preview

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>

Mga Katangian ng CSS para sa Pagpapakita ng Kodigo at mga Quotations

Katangiang 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}

Ang white-space ay isang katangian ng CSS na tumutukoy kung paano pinangangasiwaan ang mga whitespace at line breaks sa loob ng isang elemento. Sa default, itinuturing ng HTML ang maraming puwang bilang isang solong puwang, ngunit pinapayagan ka ng white-space na katangian na baguhin ang pag-uugaling ito.

Pangunahing mga halaga ng white-space

  • normal ang default na halaga, kung saan ang maraming puwang ay pinagsasama bilang isa, at awtomatikong naghihiwa-hiwalay ang mga linya.
  • nowrap pinagtutulungan ang mga puwang bilang isa ngunit pinipigilan ang paghihiwa ng linya. Ang nilalaman ay ipinapakita sa isang linya lamang.
  • pre pinapanatili ang whitespace at line breaks kung ano ang mga ito. Hindi nagaganap ang line wrapping.
  • pre-wrap pinapanatili ang whitespace at line breaks habang pinapayagan ang line wrapping.
  • pre-line pinagsasama ang mga puwang ngunit pinapanatili ang line breaks, at pinapayagan ang line wrapping.
  • break-spaces pinapanatili ang puwang at mga line break, habang pinapayagan ang mga break sa mahahabang salita o whitespace.

Katangiang 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}

Ang overflow-wrap na katangian, na dati ay kilala bilang word-wrap, ay tumutukoy kung paano hinahawakan ang mga salita kapag lumampas ang mga ito sa lapad ng lalagyan. Gamit ang katangiang ito, maaari mong maayos na ibalot ang mga salita upang maiwasan ang pag-apaw ng teksto at masira ang ayos.

Sa halimbawang ito, gamit ang normal, ang mahahabang salita ay maaaring lumampas sa lalagyan at magdulot ng pahalang na pag-scroll, ngunit pinipilit ng break-word na ibalot ang mahahabang salita.

Mga halaga ng katangian

Pangunahin ang overflow-wrap ay may dalawang halaga:.

  • normal

    normal ang default na halaga, kung saan ang browser ay sumusunod sa karaniwang mga patakaran sa pagbabalot ng salita. Karaniwan, ang mga salita ay nagbabalot lamang sa madaling mabali na mga punto tulad ng mga puwang o gitling. Kung ang isang salita ay napakahaba, maaari itong lumampas sa lapad ng lalagyan at masira ang layout.

  • break-word Pinipilit ng break-word ang paghihiwalay ng linya kung kinakailangan, binabalot ang teksto sa susunod na linya anuman ang haba ng salita. Nakakatulong ito na maiwasan ang pagkasira ng layout ng container dahil sa mahahabang salita.

    Kapag tinukoy ang break-word, ang mga salita ay binabalot kahit sa mga lugar na walang espasyo o gitling upang magkasya sa lapad ng screen. Ito ay lalong kapaki-pakinabang para sa mga URL o napakahahabang salita.

Mga Pagkakaiba sa Pagitan ng overflow-wrap at Iba Pang Mga Katangian

Ang mga katangiang katulad ng overflow-wrap ay kinabibilangan ng word-break at white-space.

Pagkakaiba mula sa word-break

Ang word-break ay tumutukoy sa kung paano pinangangasiwaan ang buong mga salita, habang ang overflow-wrap ay nagti-trigger lang ng pagbabalot kapag lumampas ang isang salita sa lapad ng container. Halimbawa, ang word-break: break-all; ay binabali ang mga salita sa anumang posisyon, kahit hindi mahaba, samantalang ang overflow-wrap ay nagbabalot lamang ng mga salita kapag lumampas ang mga ito sa container.

Pagkakaiba mula sa white-space

Ang kinokontrol ng katangiang white-space kung paano pinangangasiwaan ang mga paghihiwalay ng linya at espasyo sa buong teksto. Hindi tulad ng overflow-wrap, ang white-space ay tumutukoy kung ang mga paghihiwalay ng linya at espasyo ay itinatabi ngunit hindi direktang nakakaapekto sa pagbabalot ng mga salita.

Halimbawa, ang white-space: nowrap; ay nagsisiguro na ang buong teksto ay nananatili sa isang linya lamang na walang balot. Sa kabilang banda, ang overflow-wrap ay kinokontrol ang pagbabalot ng teksto.

Mga Praktikal na Gamit

Ang overflow-wrap ay partikular na kapaki-pakinabang sa mga sumusunod na sitwasyon:.

  1. Pagpapakita ng mga URL: Pinipigilan ang mga isyu sa layout kapag nagpapakita ng mahahabang URL.
  2. Mga Teknikal na Termino: Pinangangasiwaan ang mga kaso kung saan ang patuloy na Ingles na mga salita o teknikal na termino ay lumampas sa lapad ng container.
  3. Tumutugon na Disenyo: Tinitiyak na ang mahabang teksto ay hindi sisira sa layout kahit sa maliliit na screen.

Ari-arian ng quotes 

1q {
2    quotes: "(" ")" "[" "]";
3}

Ang ari-arian na quotes ay ginagamit upang i-customize ang mga marka ng panipi. Karaniwan, awtomatikong idinadagdag ang mga marka ng panipi kapag inilalagay sa <blockquote> o <q> na mga elemento, ngunit ang paggamit ng ari-arian na quotes ay nagbibigay-daan sa iyo na magtakda ng pasadyang mga marka ng panipi.

Sa halimbawang ito, ang panaklong ((, )) ay ginagamit bilang panlabas na mga panipi. Dagdag pa rito, ang mga panipi sa loob ay kinakatawan ng mga square bracket ([, ]).

Sintaks 

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

Ang ari-arian na quotes ay maaaring tukuyin gamit ang mga halaga tulad ng sumusunod:.

  • none: Walang ipapakitang mga marka ng panipi.
  • Isang serye ng mga marka ng panipi: Itakda ang pambungad at pagsasara na mga marka ng panipi. Ang unang set ay kumakatawan sa panlabas na mga panipi, habang ang mga sumunod na set ay para sa mga paniping nasa loob.

Pangunahing mga punto ng quotes

Ang ari-arian na quotes ay isang kapaki-pakinabang na ari-arian para sa pag-customize ng mga marka ng panipi na ginagamit sa mga teksto. Sa pamamagitan ng pagtatakda ng angkop na mga marka ng panipi ayon sa disenyo at wika, maaari kang makamit ang mas sopistikadong presentasyon ng pahina. Ang paggamit ng ari-arian na quotes ay nagbibigay ng mga benepisyo tulad ng sumusunod:.

  • I-customize ang mga marka ng panipi: Maaari mong baguhin ang default na anyo ng mga marka ng panipi o magtakda ng mga marka ng panipi na angkop sa isang tiyak na disenyo.
  • Sinusuportahan ang mga naka-nest na panipi: Maaari kang gumamit ng iba't ibang hanay ng mga marka ng panipi para sa mga naka-nest na panipi.
  • Maaring i-customize ayon sa bansa at wika: Madaling mag-apply ng iba't ibang estilo ng mga marka ng panipi depende sa wika o bansa, na kapaki-pakinabang para sa mga internasyonal na website.

Ari-arian ng 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}

  • Ang ari-arian na user-select ay isang katangian ng CSS na ginagamit upang kontrolin kung maaaring pumili ng teksto ang isang gumagamit. Sa pamamagitan ng paggamit ng ari-arian na ito, maaari mong pigilan ang pagkopya ng teksto sa mga tiyak na elemento o sa buong pahina, o sa kabaligtaran ay gawing maaring piliin ang teksto. Kung tukuyin mo ang all para sa property na user-select, ang buong elemento ay pinipili agad. Halimbawa, kapag ang isang gumagamit ay nag-click sa isang text field o talata, ang buong elemento ay pinipili agad.

  • Maaari rin itong gamitin para sa maramihang pagpili ng source code.

  • Sa halimbawang ito, ang teksto ng unang talata ay maaaring piliin, ngunit ang teksto ng pangalawang talata ay hindi. Sa class na select-all, ang property na user-select ay nakatakda sa all, na nagpapahintulot sa buong elemento na mapili agad.

Sintaks 

1element {
2    user-select: auto | none | text | all | contain;
3}

Ang property na user-select ay maaaring tukuyin gamit ang mga sumusunod na halaga:.

  • auto: Gamitin ang default na pag-uugali ng browser. Pinapahintulutan ang pagpili ng teksto sa karamihan ng mga elemento, ngunit maaaring paghigpitan ito sa ilang interactive na elemento tulad ng mga button at link.
  • none: Ang pagpili ng teksto ay ganap na hindi pinapahintulutan. Ang mga gumagamit ay hindi makakapili ng teksto sa loob ng elementong iyon.
  • text: Pinapahintulutan lamang ang teksto sa loob ng elemento na mapili.
  • all: Ang buong elemento ay pinipili agad. Imbes na bahagyang pagpili, ang buong elemento ay pinipili bilang buo.
  • contain: Sinusuportahan lamang ng iilang browser. Pinapahintulutan lamang ang elemento sa lokasyong na-click na mapili.

Sinusuportahang Browsers

Ang property na user-select ay sinusuportahan ng karamihan sa mga modernong browser. Gayunpaman, ang ilang browser ay maaaring mangailangan ng vendor prefixes tulad ng -webkit-user-select.

  • Chrome: Sinusuportahan
  • Firefox: Sinusuportahan
  • Safari: Sinusuportahan (kailangan ang prefix na -webkit-)
  • Edge: Sinusuportahan
  • Internet Explorer: Hindi Sinusuportahan

Pangunahing Gamit

Ang property na user-select ay nag-aalok ng mga sumusunod na benepisyo.

  • Mga elemento ng UI: Huwag payagan ang pagpili ng teksto upang maiwasan ang pagkagambala sa mga operasyon ng pag-click o pag-drag.
  • Pigilan ang pagkopya ng teksto: Pigilan ang pagpili at pagkopya ng teksto sa ilang mga elemento.
  • Mga form at interactive na elemento: Ilapat sa mga interactive na elemento kung saan hindi kinakailangan ang pagpili ng teksto upang mapabuti ang karanasan ng gumagamit.

Buod

Ang katangiang user-select ay isang kapaki-pakinabang na ari-arian ng CSS na nagbibigay-daan sa nababaluktot na kontrol sa pagpili ng teksto sa isang webpage. Maaaring pigilan nito ang mga gumagamit na aksidenteng pumili ng hindi kinakailangang teksto o payagan silang pumili ng lahat nang sabay-sabay, umaayon sa iba't ibang interaksyon.

Ang katangiang 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}
  • Ang katangiang tab-size ay ginagamit upang i-customize ang espasyo para sa mga tab na karakter. Sa default, ang lapad ng tab ay karaniwang nakatakda sa 8 na espasyo, ngunit maaari itong ayusin sa anumang halaga gamit ang katangiang tab-size.

Sintaks 

1element {
2    tab-size: length | number;
3}

Ang katangiang tab-size ay maaaring tumanggap ng mga sumusunod na uri ng halaga.

  • number: Tinutukoy ang lapad ng tab na karakter batay sa bilang ng mga karakter. Maaari kang magtakda ng integer o decimal.
  • length: Tinutukoy ang lapad ng tab na karakter gamit ang mga unit ng haba (e.g., px, em).

Mga Tala

  • Ang katangiang tab-size ay karaniwang ginagamit sa mga monospace na font. Kapag ginamit sa mga proportional na font, ang lapad ng tab ay maaaring hindi pantay.

  • Kapag tinutukoy ang bilang ng mga karakter, maging maingat sa pag-scale sa iba't ibang mga device.

Buod

Ang paggamit ng katangiang tab-size ay nagpapahusay sa kakayahang umangkop kapag nagpapakita ng code o mga tab na karakter. Bilang isang developer, ang tamang pagtatakda ng lapad ng tab ay tinitiyak ang madaling mabasa ng code at kaayusan ng disenyo.

Ang katangiang 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}
  • Ang katangiang text-indent ay ginagamit upang i-indent ang unang linya ng teksto sa isang block na elemento sa isang tinukoy na distansya. Ang ari-arian na ito ay nagbibigay-daan sa iyo na i-style lamang ang unang linya ng isang talata.

Sintaks 

1element {
2    text-indent: length | percentage;
3}

Ang katangiang text-indent ay maaaring tumanggap ng mga sumusunod na uri ng halaga.

  • length: Tinutukoy ang indentation gamit ang mga unit ng haba (e.g., px, em).
  • percentage: Tinutukoy ang indentation bilang porsyento batay sa lapad ng elemento ng lalagyan.

Mga Tala

  • Ang text-indent ay naaangkop lamang sa mga block na elemento. Wala itong epekto sa inline na mga elemento.

Buod

Ang katangiang text-indent ay isang simpleng ngunit makapangyarihang tool para sa paggawa ng mga nababasang disenyo ng teksto. Sa pamamagitan ng pagpapahusay ng mga batayan at pag-unawa sa mga advanced na paggamit at konsiderasyon, maaari kang magdisenyo nang mas epektibo.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga katangian ng CSS na may kaugnayan sa pagpuwang ng tekstoMga katangian ng CSS na nauugnay sa modelong kahon