Tutorial CSS 8 menjelaskan kepada Anda tentang Pengaturan Teks Menggunakan CSS
Tutorial CSS 8 menjelaskan kepada Anda tentang Pengaturan Teks Menggunakan CSS. Bab ini mengajarkan Anda bagaimana untuk memanipulasi teks dengan menggunakan properti CSS. Anda dapat mengatur berikut sifat teks elemen :
- Properti color yang digunakan untuk mengatur warna teks.
- Properti direction digunakan untuk mengatur arah teks.
- Properti letter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang membentuk kata.
- Properti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata kalimat.
- Properti text-indent digunakan untuk indent teks paragraf.
- Properti text-align digunakan untuk menyelaraskan teks dokumen.
- Properti text-decoration digunakan untuk menggarisbawahi, overline, dan coret teks.
- Properti text-transform digunakan untuk memanfaatkan teks atau mengkonversi teks ke huruf besar atau kecil.
- Properti white-space digunakan untuk mengontrol aliran dan format teks.
- Properti text-shadow digunakan untuk mengatur teks bayangan di sekitar teks.
Pengaturan Text Color
Contoh berikut menunjukkan cara mengatur warna teks. Kemungkinan nilai bisa lebih nama warna dalam format valid.
<html><head></head><body><p style="color:red;">This text will be written in red.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Text Direction
Contoh berikut menunjukkan cara mengatur arah teks. Nilai yang mungkin adalah ltr dan rtl.
<html><head></head><body><p style="direction:rtl;">This text will be renedered from right to left</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Spasi Antar Karakter
Contoh berikut menunjukkan cara mengatur ruang antara karakter. Nilai yang mungkin adalah normal atau sejumlah menentukan ruang ..
<html><head></head><body><p style="letter-spacing:5px;">This text is having space between letters.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Spasi Antar Kata
Contoh berikut menunjukkan cara mengatur ruang antara kata-kata. Nilai yang mungkin adalah normal atau sejumlah menentukan ruang.
<html><head></head><body><p style="word-spacing:5px;">This text is having space between words.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Text Indent
Contoh berikut menunjukkan bagaimana indent baris pertama dari sebuah paragraf. Nilai yang mungkin adalah% atau sejumlah menentukan ruang indent.
<html><head></head><body><p style="text-indent:1cm;">This text will have first line indented by 1cm and this line will remain atits actual position this is done by CSS text-indent property.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Text Alignment
Contoh berikut menunjukkan bagaimana menyelaraskan teks. nilai yang mungkin adalah left, right, center, justify.
<html><head></head><body><p style="text-align:right;">This will be right aligned.</p><p style="text-align:center;">This will be center aligned.</p><p style="text-align:left;">This will be left aligned.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Dekorasikan Text
Contoh berikut menunjukkan bagaimana untuk menghias teks. Nilai yang mungkin adalah none, underline, overline, line-through, blink.
<html><head></head><body><p style="text-decoration:underline;">This will be underlined</p><p style="text-decoration:line-through;">This will be striked through.</p><p style="text-decoration:overline;">This will have a over line.</p><p style="text-decoration:blink;">This text will have blinking effect</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Text Cases
Contoh berikut menunjukkan bagaimana mengatur kasus untuk teks. Nilai yang mungkin adalah none, capitalize, uppercase, lowercase.
<html><head></head><body><p style="text-transform:capitalize;">This will be capitalized</p><p style="text-transform:uppercase;">This will be in uppercase</p><p style="text-transform:lowercase;">This will be in lowercase</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Mengatur White Space antara Teks
Contoh berikut menunjukkan bagaimana ruang putih di dalam sebuah elemen ditangani. Nilai yang mungkin adalah normal, pre, nowrap.
<html><head></head><body><p style="white-space:pre;">This text has a line break and the white-space pre setting tells the browser to honorit just like the HTML pre tag.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
Pengaturan Text Shadow
Contoh berikut menunjukkan cara mengatur bayangan di sekitar teks. Ini mungkin tidak didukung oleh semua browser.
<html><head></head><body><p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a blue shadow.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut:
COMMENTS