Articles
Pengenalan kepada CSS
Hartanah CSS yang berkaitan dengan teks

Hartanah CSS yang berkaitan dengan teks

Artikel ini menerangkan sifat-sifat CSS yang berkaitan dengan teks.

Anda boleh mempelajari penggunaan dan cara menulis sifat-sifat text-align, text-decoration, dan text-transform.

YouTube Video

Mencipta HTML untuk pratonton

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>

Tipografi (Berkaitan Teks)

sifat 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 adalah sifat dalam CSS yang digunakan untuk menentukan penjajaran mendatar teks dan elemen sebaris. Ia biasanya digunakan untuk menjajarkan teks perenggan atau tajuk ke kiri, kanan, atau tengah. Ia berperanan penting dalam reka letak halaman web dan pemformatan teks.

Nilai utama untuk text-align

left (perataan kiri) 
1p {
2    text-align: left;
3}
  • left menjajarkan teks ke kiri (ini adalah kaedah penjajaran lalai bagi banyak bahasa).
right (perataan kanan) 
1p {
2    text-align: right;
3}
  • right menjajarkan teks ke kanan. Ia sangat berkesan untuk bahasa yang ditulis dari kanan ke kiri, seperti bahasa Arab dan Ibrani.
center (perataan tengah) 
1p {
2    text-align: center;
3}
  • center menjajarkan teks ke tengah. Ia sering digunakan untuk tajuk dan heading.
justify (rata kiri kanan) 
1p {
2    text-align: justify;
3}
  • justify menjajarkan tepi kiri dan kanan baris secara sama rata, memberikan kesan penjajaran yang kemas. Ia digunakan dalam reka letak seperti akhbar dan majalah.
start (perataan mula) 
1p {
2    text-align: start;
3}
  • start menjajarkan teks berdasarkan posisi permulaan. Untuk bahasa yang ditulis dari kiri ke kanan, ia berfungsi sama seperti penjajaran kiri.
end (perataan akhir) 
1p {
2    text-align: end;
3}
  • end menjajarkan teks berdasarkan posisi akhir. Dalam bahasa yang ditulis dari kiri ke kanan, ia berfungsi sama seperti penjajaran kanan.

Penggunaan dan contoh text-align

Tajuk menggunakan perataan tengah
  • Penjajaran tengah sering digunakan untuk tajuk halaman web dan dokumen. Ia kelihatan menarik dan menghasilkan reka bentuk yang seimbang secara visual.
Perataan kiri atau kanan untuk perenggan
  • Perenggan teks biasanya dijajarkan ke kiri secara lalai, tetapi penjajaran kanan atau tengah boleh digunakan untuk reka bentuk tertentu.
Membenarkan teks dengan sekata
  • Apabila dijajarkan dengan justify, setiap baris teks dijajarkan secara sama rata dengan kedua-dua tepi kiri dan kanan. Ia berguna untuk reka letak bergaya akhbar atau majalah.

Ringkasan

  • text-align adalah sifat CSS yang digunakan untuk menjajarkan teks atau elemen sebaris secara mendatar.
  • Ia boleh menguruskan pelbagai reka letak seperti penjajaran kiri, penjajaran kanan, penjajaran tengah, dan penjajaran justify.
  • Memilih penjajaran yang sesuai berdasarkan reka letak dan objektif reka bentuk adalah kunci untuk mencapai reka bentuk yang mudah dibaca dan menarik.

Mari gunakan penjajaran teks secara berkesan sebagai sebahagian daripada reka bentuk anda dengan text-align.

Sifat 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 ialah satu sifat CSS yang digunakan untuk menambah garis bawah, garis atas, garis potong, atau garis bergaya khusus pada teks. Dengan menggunakan sifat ini, anda boleh menjadikan gaya teks lebih hiasan atau lebih menonjol secara visual.

Penjelasan:

  • Kelas text-decoration-underline memaparkan garis bawah pada teks.
  • Kelas text-decoration-overline melukis garis di atas teks.
  • Kelas text-decoration-line-through menambah garis potong pada teks.
  • Kelas text-decoration-custom-underline adalah contoh penyesuaian warna, gaya, dan ketebalan garis bawah.

Nilai utama text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Menentukan none akan menghilangkan sebarang hiasan dari teks. Digunakan apabila anda mahu menghilangkan garis bawah dari pautan, sebagai contoh.
underline 
1p {
2    text-decoration: underline;
3}
  • Menentukan underline akan melukis garis bawah pada teks. Ia boleh digunakan untuk pautan atau bahagian yang anda mahu tekankan.
overline 
1p {
2    text-decoration: overline;
3}
  • Menentukan overline akan melukis garis di atas teks. Digunakan untuk mengubah rupa atau untuk hiasan khas.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Menentukan line-through akan melukis garis potong pada teks. Ia digunakan untuk menunjukkan pembetulan.
blink（点滅）
  • blink ialah nilai yang menyebabkan teks berkelip, tetapi ia tidak lagi digunakan kerana tidak disokong oleh kebanyakan pelayar.

Tetapan lanjutan text-decoration

text-decoration membolehkan tetapan terperinci seperti berikut:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Sifat text-decoration-color membolehkan anda menentukan warna garis bawah atau garis potong. Secara lalai, ia sepadan dengan warna teks, tetapi anda boleh menambahkan aksen visual dengan memilih warna yang berbeza.
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}
  • Sifat text-decoration-style membolehkan anda menentukan gaya garis hiasan. Nilai-nilai termasuk yang berikut:.
    • solid (Lalai, garisan padu)
    • double (garisan dua)
    • berbintik (garisan berbintik)
    • bergaris putus (garisan putus-putus)
    • beralun (garisan beralun)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Sifat text-decoration-thickness membolehkan anda menentukan ketebalan garis hiasan. Anda boleh melaraskannya menggunakan unit seperti 2px atau 0.1em, sebagai contoh.

Ringkasan:

  • text-decoration ialah satu sifat untuk menambah garis hiasan pada teks, seperti garis bawah atau garis potong.
  • Dengan text-decoration-color, text-decoration-style, dan text-decoration-thickness, penyesuaian yang lebih terperinci adalah mungkin.
  • Ia kerap digunakan untuk menekankan pautan atau teks penting, atau sebagai elemen reka bentuk.

Dengan menggunakan text-decoration, anda boleh menambah aksen halus atau menekankan teks.

Harta 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 ialah satu sifat CSS untuk mengubah bentuk huruf pada teks. Ciri ini membolehkan anda mengawal format paparan teks yang ditentukan dalam HTML, dengan secara automatik menukar bentuk huruf teks yang dimasukkan pengguna atau teks sedia ada.

Penjelasan:

  • Kelas text-transform-none memaparkan teks tanpa mengubahnya dari bentuk asal.
  • Kelas text-transform-capitalize menukar huruf pertama setiap perkataan kepada huruf besar.
  • Kelas text-transform-uppercase menukar keseluruhan teks kepada huruf besar.
  • Kelas text-transform-lowercase menukar keseluruhan teks kepada huruf kecil.

Nilai utama text-transform

none 
1p {
2    text-transform: none;
3}
  • Menentukan none akan meninggalkan teks tanpa berubah.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Menentukan capitalize akan menukar huruf pertama setiap perkataan kepada huruf besar. Sempadan perkataan dikenal pasti melalui ruang atau tanda baca.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Menentukan uppercase akan menukar keseluruhan teks kepada huruf besar.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Menentukan lowercase akan menukar keseluruhan teks kepada huruf kecil.
full-width
  • Menentukan full-width akan menukar teks kepada aksara lebar penuh. Ini biasanya digunakan sebagai gaya khas semasa menggunakan Kanji atau Kana, tetapi hanya beberapa pelayar yang menyokongnya.

Ringkasan:

  • text-transform adalah ciri CSS yang mudah untuk mengubah bentuk huruf teks.
  • Ia sering digunakan untuk mencipta konsistensi visual untuk tajuk, menu navigasi, dan teks borang.
  • Ia berguna apabila anda ingin memaparkan teks dalam gaya tertentu tanpa mengira input pengguna.

Dengan menggunakan ciri ini, anda boleh memanipulasi teks dengan mudah sambil mengekalkan konsistensi visual.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat CSS Berkaitan FonCiri-ciri CSS berkaitan dengan jarak teks