Articles
Panimula sa CSS
Mga katangian ng CSS na may kaugnayan sa teksto

Mga katangian ng CSS na may kaugnayan sa teksto

Ipinaliwanag ng artikulong ito ang mga katangian ng CSS na may kaugnayan sa teksto.

Matututuhan mo kung paano gamitin at isulat ang mga katangiang text-align, text-decoration, at text-transform.

YouTube Video

Paglikha ng HTML para sa preview

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>

Tipograpiya (May kaugnayan sa Teksto)

Ari-ariang 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}

Ang text-align ay isang katangian sa CSS na ginagamit upang tukuyin ang pahalang na pagkakahanay ng teksto at inline na mga elemento. Karaniwan itong ginagamit upang ihanay ang mga talata o pamagat ng teksto sa kaliwa, kanan, o gitna. May mahalagang papel ito sa layout ng mga web page at pag-format ng teksto.

Pangunahing halaga para sa text-align

left (kaliwa ang pagka-ayos) 
1p {
2    text-align: left;
3}
  • Ang left ay inuunahing ihanay ang teksto sa kaliwa (ito ang default na paraan ng pag-aayos para sa maraming wika).
right (kanan ang pagka-ayos) 
1p {
2    text-align: right;
3}
  • Ang right ay inuunahing ihanay ang teksto sa kanan. Partikular itong epektibo para sa mga wikang isinulat mula kanan papuntang kaliwa, tulad ng Arabic at Hebrew.
center (gitna ang pagka-ayos) 
1p {
2    text-align: center;
3}
  • Ang center ay inuusog ang teksto papunta sa gitna. Madalas itong ginagamit para sa mga pamagat at heading.
justify (nakabigyang-katarungan) 
1p {
2    text-align: justify;
3}
  • Ang justify ay inaanay ang kaliwa at kanang gilid ng mga linya nang pantay, nagbibigay ito ng maayos na pagkakaayos. Ginagamit ito sa mga layout tulad ng sa pahayagan at magasin.
start (simula ang pagka-ayos) 
1p {
2    text-align: start;
3}
  • Ang start ay inaanay ang teksto base sa panimulang posisyon. Para sa mga wikang isinulat mula kaliwa papuntang kanan, ito ay umaasta tulad ng kaliwang pagkakahanay.
end (wakas ang pagka-ayos) 
1p {
2    text-align: end;
3}
  • Ang end ay inaanay ang teksto base sa huling posisyon. Sa mga wikang isinulat mula kaliwa papuntang kanan, ito ay umaasta tulad ng kanang pagkakahanay.

Gamit at mga halimbawa ng text-align

Pamagat na gumagamit ng pagka-ayos sa gitna
  • Ang pagkakahanay sa gitna ay madalas ginagamit para sa mga pamagat ng web page at dokumento. Mukha itong maganda at nagreresulta ng biswal na balanseng disenyo.
Kaliwa o kanan ang pagka-ayos para sa mga talata
  • Karaniwan, ang mga talata ng teksto ay kaliwang inayos bilang default, ngunit maaaring gamitin ang kanang pagkakahanay o gitnang pagkakahanay para sa tiyak na disenyo.
Pantay ang pagbibigay-katarungan sa teksto
  • Kapag inayos gamit ang justify, ang bawat linya ng teksto ay pantay na inayos sa parehong kaliwa at kanang gilid. Ito ay kapaki-pakinabang para sa layout na estilo ng pahayagan o magasin.

Buod

  • Ang text-align ay isang katangian ng CSS na ginagamit upang pahalang na ihanay ang teksto o inline na mga elemento.
  • Kaya nitong pamahalaan ang iba't ibang layout tulad ng kaliwang pagkakahanay, kanang pagkakahanay, gitnang pagkakahanay, at justified na pagkakahanay.
  • Ang pagpili ng angkop na pagkakahanay base sa layout at mga layunin ng disenyo ay mahalaga upang makamit ang isang madaling basahin at magandang disenyo.

Gamitin natin nang epektibo ang pagkakahanay ng teksto bilang bahagi ng iyong disenyo gamit ang text-align.

Ang katangian ng 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 ay isang katangian ng CSS na ginagamit upang maglagay ng mga underline, overline, strikethrough, o mga custom na linya sa teksto. Sa paggamit ng katangiang ito, maaari mong gawing mas dekoratibo o biswal na naka-highlight ang estilo ng teksto.

Paliwanag:

  • Ang klase na text-decoration-underline ay naglalagay ng underline sa teksto.
  • Ang klase na text-decoration-overline ay naglalagay ng linya sa ibabaw ng teksto.
  • Ang klase na text-decoration-line-through ay naglalagay ng strikethrough sa teksto.
  • Ang klase na text-decoration-custom-underline ay isang halimbawa ng pagpapasadya ng kulay, istilo, at kapal ng underline.

Pangunahing mga halaga ng text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Ang pagtukoy ng none ay mag-aalis ng anumang dekorasyon sa teksto. Ginagamit kapag nais mong alisin ang underline mula sa mga link, halimbawa.
underline 
1p {
2    text-decoration: underline;
3}
  • Ang pagtukoy ng underline ay maglalagay ng underline sa ilalim ng teksto. Maaari itong gamitin para sa mga link o sa mga bahagi ng teksto na nais mong bigyang-diin.
overline 
1p {
2    text-decoration: overline;
3}
  • Ang pagtukoy ng overline ay maglalagay ng linya sa ibabaw ng teksto. Ginagamit para sa pagbabago ng hitsura o para sa espesyal na dekorasyon.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Ang pagtukoy ng line-through ay maglalagay ng strikethrough sa buong teksto. Ito ay ginagamit upang ipakita ang mga pagwawasto.
blink（点滅）
  • blink ay isang halaga na nagpapakutit-kutit ng teksto, ngunit hindi na ito karaniwang ginagamit dahil hindi na ito sinusuportahan ng karamihan sa mga browser.

Mga advanced na setting ng text-decoration

Ang text-decoration ay nagpapahintulot ng mas detalyadong mga setting gaya ng sumusunod:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Ang katangiang text-decoration-color ay nagbibigay-daan upang tukuyin ang kulay ng underline o strikethrough. Sa default, ito ay tugma sa kulay ng teksto, ngunit maaari kang magdagdag ng biswal na accent sa pamamagitan ng pagpili ng ibang kulay.
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}
  • Ang katangiang text-decoration-style ay nagbibigay-daan upang tukuyin ang istilo ng mga dekorasyong linya. Kasama sa mga halaga ang mga sumusunod:.
    • solid (Default, tuwid na linya)
    • double (dobleng linya)
    • dotted (tuldok-tuldok na linya)
    • dashed (putol-putol na linya)
    • wavy (Kulot na linya)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Ang katangiang text-decoration-thickness ay nagbibigay-daan upang tukuyin ang kapal ng mga dekorasyong linya. Maaari mo itong ayusin gamit ang mga unit tulad ng 2px o 0.1em, halimbawa.

Buod:

  • text-decoration ay isang katangian para sa pagdaragdag ng mga dekorasyong linya sa teksto, tulad ng underline o strikethrough.
  • Sa text-decoration-color, text-decoration-style, at text-decoration-thickness, mas detalyadong pagpapasadya ang posible.
  • Karaniwan itong ginagamit upang bigyang-diin ang mga link o mahalagang teksto, o bilang elemento ng disenyo.

Sa paggamit ng text-decoration, maaari kang magdagdag ng banayad na mga accent o diin sa teksto.

Ari-arian ng 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 ay isang katangian ng CSS para baguhin ang anyo ng mga titik sa teksto. Ang property na ito ay nagpapahintulot sa iyo na kontrolin ang format ng pagpapakita ng tekstong tinukoy sa HTML, awtomatikong binabago ang kaso ng tekstong inilagay ng gumagamit o umiiral na teksto.

Paliwanag:

  • Ang klase na text-transform-none ay nagpapakita ng teksto nang hindi binabago ang orihinal nito.
  • Ang klase na text-transform-capitalize ay nagko-convert ng unang letra ng bawat salita patungo sa malaking titik.
  • Ang klase na text-transform-uppercase ay nagko-convert ng buong teksto patungo sa malaking titik.
  • Ang klase na text-transform-lowercase ay nagko-convert ng buong teksto patungo sa maliit na titik.

Pangunahing halaga ng text-transform

none 
1p {
2    text-transform: none;
3}
  • Kapag tinukoy ang none, ang teksto ay hindi binabago.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Kapag tinukoy ang capitalize, ang unang letra ng bawat salita ay ginagawang malaking titik. Ang hanggahan ng salita ay kinikilala gamit ang espasyo o bantas.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Kapag tinukoy ang uppercase, ang buong teksto ay ginagawang malaking titik.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Kapag tinukoy ang lowercase, ang buong teksto ay ginagawang maliit na titik.
full-width
  • Kapag tinukoy ang full-width, ang teksto ay kinokonvert sa full-width na mga karakter. Ito ay karaniwang ginagamit bilang isang espesyal na estilo kapag gumagawa ng Kanji o Kana, ngunit kakaunting mga browser ang sumusuporta rito.

Buod:

  • Ang text-transform ay isang maginhawang property ng CSS para baguhin ang kaso ng teksto.
  • Ito ay madalas gamitin upang lumikha ng visual na pagkakapare-pareho para sa mga heading, navigation menu, at teksto ng form.
  • Ito ay kapaki-pakinabang kapag nais mong ipakita ang teksto sa isang tiyak na estilo anuman ang input ng gumagamit.

Sa pamamagitan ng paggamit ng property na ito, madali mong mababago ang teksto habang pinananatili ang visual na pagkakapare-pareho.

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 Nauukol sa FontMga katangian ng CSS na may kaugnayan sa pagpuwang ng teksto