CSS - Teks

Hai there, para pemaju web masa depan! Hari ini, kita akan mendalami dunia yang menakjubkan dari sifat-sifat teks CSS. Seperti guru komputer tetangga anda, saya sangat gembira untuk membimbing anda dalam perjalanan ini. Ingat, sama seperti belajar menunggang basikal, menguasai CSS memerlukan latihan, tetapi saya berjanji ia akan menikmati!

CSS Teks - Warna Teks

Mari kita mulakan dengan sesuatu yang berwarna-warni! Dalam CSS, kita dapat mudah mengubah warna teks kita menggunakan sifat color. Ia seperti mempunyai pensel ajaib untuk kata-kata anda!

p {
color: biru;
}

Baris ini akan mengubah semua teks paragraf anda menjadi biru. Tetapi tunggu, ada lagi! Anda boleh menggunakan nama warna, kod HEX, atau nilai RGB:

h1 {
color: #FF5733; /* Kod HEX untuk warna jingga yang cerah */
}

span {
color: rgb(50, 205, 50); /* Nilai RGB untuk hijau limau */
}

CSS Teks - Penyelarasan Teks

Bab berikutnya, mari kita bicarakan penyelarasan teks. Ia seperti mengatur buku di rak - anda boleh menempatkan mereka di sebelah kiri, sebelah kanan, atau menengahkan mereka dengan baik.

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

Nilai justify adalah sangat menarik. Ia menyebarkan teks secara merata di sepanjang garis, seperti bagaimana suratkhabar mengatur kolom mereka.

CSS Teks - Penyelarasan Vertikal

Penyelarasan vertikal adalah sedikit lebih sulit, tetapi jangan khawatir! Ia biasanya digunakan bersama unsur inline atau table-cell.

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

Sifat ini boleh mengambil nilai seperti top, middle, bottom, sub, super, dan bahkan nilai panjang khusus!

CSS Teks - Arah

Dalam desa global kita, kita seringkali perlu bekerja dengan bahasa yang dibaca dari kanan ke kiri. Itulah di mana sifat direction menjadi berguna:

.arabic-text {
direction: rtl; /* Kanan ke Kiri */
}

.english-text {
direction: ltr; /* Kiri ke Kanan */
}

CSS Teks - Dekorasi Teks

Ingin menambah sedikit keanggunan ke teks anda? Dekorasi teks adalah teman baik anda! Ia seperti menambah perhiasan ke kata-kata anda.

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

Petua pro: Gunakan text-decoration: none; untuk menghapus garis bawah default dari pautan!

CSS Teks - Skip Dekorasi Teks

Sifat ini menentukan mana bahagian teks yang perlu dilepaskan saat applying dekorasi teks.

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

Ini akan menggaris bawah teks tetapi melepaskan ruang, menciptakan penampilan yang lebih rapi.

CSS Teks - Skip Ink Dekorasi Teks

Ini adalah yang menarik! Ia menentukan sama ada dekorasi teks harus digambar di atas atau di bawah "tinta" (iaitu, teks itu sendiri).

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

Dengan auto, browser akan secara cerdas melepaskan huruf-huruf yang menjorok seperti 'g' atau 'y'.

CSS Teks - Transformasi Teks

Ingin menjerit dalam huruf BESAR atau bisik dalam huruf kecil? Transformasi teks adalah sifat yang anda cari!

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

Nilai capitalize adalah sangat menarik - ia mengubah huruf pertama setiap kata menjadi huruf besar.

CSS Teks - Penekanan Teks

Penekanan teks membolehkan anda menambah tanda penekanan ke teks anda. Ia seperti menambah titik kecil atau bulatan di atas atau di bawah teks anda.

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

Ini menambah bulatan berisi di atas dan sebelah kanan setiap aksara.

CSS Teks - Indentasi Teks

Ingat saat guru anda minta anda mengindentasi baris pertama setiap paragraf? CSS boleh melakukan itu secara automatik!

p {
text-indent: 50px;
}

Ini mengindentasi baris pertama setiap paragraf sebanyak 50 piksel.

CSS Teks -jarak Huruf

Jarak huruf membolehkan anda mengubah ruang di antara aksara. Ia seperti memberikan ruang personal kepada huruf anda!

h1 {
letter-spacing: 5px;
}

Ini menambah 5 piksel ruang di antara setiap huruf dalam tajuk anda.

CSS Teks - Jarak Kata

Seperti jarak huruf, tetapi untuk kata-kata keseluruhan:

p {
word-spacing: 10px;
}

Ini menambah 10 piksel ruang ekstra di antara setiap kata.

CSS Teks - Ruang Putih

Sifat white-space menentukan bagaimana ruang putih di dalam unsur adalah ditangani.

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrap menghalang teks daripada melengkung ke baris berikutnya, pre menyimpan ruang seperti yang ditulis dalam HTML, dan pre-wrap menyimpan ruang tetapi membolehkan melengkung.

CSS Teks - Kecelakan Ruang Putih

Sifat ini sebenarnya adalah sebahagian daripada sifat white-space yang kita diskusikan sebelum ini. Ia menentukan bagaimana ruang putih disembelih.

CSS Teks - Bayangan Teks

Ingin menambah sedikit kedalaman ke teks anda? Bayangan teks adalah di sini untuk membantu!

h1 {
text-shadow: 2px 2px 5px merah;
}

Ini menambah bayangan merah 2 piksel ke kanan, 2 piksel ke bawah, dengan 5 piksel kabur.

CSS Teks - Pemutus Garis

Sifat line-break menentukan bagaimana memutus garis dalam kata.

p {
line-break: strict;
}

Ini mengenforce peraturan pemutus garis yang lebih ketat.

CSS Teks - Pemutus Kata

Seperti line-break, tetapi untuk pemutus kata di akhir garis:

p {
word-break: break-all;
}

Ini membolehkan kata untuk diputus di mana-mana aksara.

CSS Teks - Sifat berkaitan

Berikut adalah jadual rujukan cepat bagi semua sifat yang kita diskusi:

Sifat	Keterangan
color	Menetapkan warna teks
text-align	Menentukan penyelarasan horizontal teks
vertical-align	Menetapkan penyelarasan vertikal bagi kotak inline atau table-cell
direction	Menentukan arah teks/direction tulisan
text-decoration	Menentukan dekorasi yang ditambahkan ke teks
text-decoration-skip	Menentukan mana bahagian unsur yang perlu dilepaskan saat applying dekorasi teks
text-decoration-skip-ink	Menentukan bagaimana overlines dan underlines digambar saat mereka melepasi glyph ascenders dan descenders
text-transform	Mengawal huruf besar huruf kecil teks
text-emphasis	Menambah tanda penekanan ke teks
text-indent	Menentukan inden baris pertama dalam blok teks
letter-spacing	Menambah atau mengurangkan ruang di antara aksara
word-spacing	Menambah atau mengurangkan ruang di antara kata
white-space	Menentukan bagaimana ruang putih di dalam unsur ditangani
text-shadow	Menambah bayangan ke teks
line-break	Menentukan bagaimana memutus garis
word-break	Menentukan peraturan pemutus kata

Danitu! Anda kini dilengkapi dengan pengetahuan untuk menyesuaikan teks anda dalam pelbagai cara. Ingat, kunci untuk menguasai CSS adalah latihan. Jadi, teruskan, cuba-cuba, dan buat halaman web yang menarik dan boleh dibaca. Selamat coding!

Credits: Image by storyset