Dasar-dasar Css 3
Sudah lama dasar-dasar CSS dan konsultasi matematika absen. Tapi yang saya akan bicarakan hari ini bukanlah konsultasi matematika, melainkan dasar-dasar CSS. Saya akan membahas tentang properti yang digunakan untuk memformat suatu teks. Sebelum membaca yang ini, saya harap anda sudah membaca dasar-dasar CSS
edisi 1 dan edisi 2.
Maksudnya memformat suatu teks yaitu misalnya membuat teksnya berwarna biru atau membuat teksnya tebal. Ada beberapa properti. Yaitu:
1. color: warna dari teks. Bisa diisi dengan kode hex dari warna yang diinginkan atau memakai kata-kata (dalam bahasa inggris)
2. font-family: jenis huruf. Misalnya: Arial, Verdana, dll. atau dapat diisi dengan font generik. Contoh: Arial, Tahoma, Verdana; Trebuchet, Arial, Sans-serif, Verdana; dll.
3. font-size: ukuran huruf. Bisa diisi dengan angka dalam piksel, nilai: xx-small, x-small, small, medium, large, x-large, xx-large; atau menggunakan nilai smaller (lebih kecil) atau larger (lebih besar).
4. font-weight: ketebalan huruf. Nilainya: normal, bold, bolder, light, lighter.
5. text-transform: pengaturan huruf kapital pada teks. Nilainya: uppercase (huruf kapital semua), lowercase (huruf kecil semua), capitalize (huruf kapital pada awal setiap kata), atau none.
6. text-align: posisi perataan teks. Nilainya: left (rata kiri), center (rata tengah), right (rata kanan), atau justify (rata kiri-kanan).
7. line-height: tinggi baris. Nilainya: angka (dalam piksel atau em).
8. text-decoration: dekorasi teks. Nilainya: blink (tulisan berkedip), underline (bergaris bawah), line-through (teks tercoret), overline (garis diatas teks), atau none. Atau bisa juga digabung. Misal untuk membuat teks dengaan bergaris bawah dan berkedip maka tulisannya: underline blink.
9. text-indent: jarak teks dari garis terluar pada baris pertama. Nilainya diisi dengan angka (dalam piksel)
10. white-space: properti untuk mengatur tampilan spasi. Maksudnya, pada kode HTML biasa, kita tidak bisa menuliskan spasi lebih dari satu kali. Misalnya kita ketikkan Teks contoh. (dengan 5 spasi) maka yang tampil hanya Teks contoh. (dengan 1 spasi). Kita bisa mengakalinya dengan menggunakan tag
11. letter-spacing: jarak antarhuruf. Nilainya dapat diisi dengan angka (dalam satuan piksel).
12. word-spacing: jarak antarkata. Nilainya sama dengan letter-spacing, dapat diisi dengan angka dalam satuan piksel.
Buka Notepad lalu ketikkan seperti berikut.
Lalu buka file yang telah anda buat. Kira-kira hasilnya seperti ini (klik gambar untuk melihat lebih jelas).
Sekian pembahasan kali ini. Apabila ada kekurangan mohon maaf. Terima kasih.
edisi 1 dan edisi 2.
Maksudnya memformat suatu teks yaitu misalnya membuat teksnya berwarna biru atau membuat teksnya tebal. Ada beberapa properti. Yaitu:
1. color: warna dari teks. Bisa diisi dengan kode hex dari warna yang diinginkan atau memakai kata-kata (dalam bahasa inggris)
2. font-family: jenis huruf. Misalnya: Arial, Verdana, dll. atau dapat diisi dengan font generik. Contoh: Arial, Tahoma, Verdana; Trebuchet, Arial, Sans-serif, Verdana; dll.
3. font-size: ukuran huruf. Bisa diisi dengan angka dalam piksel, nilai: xx-small, x-small, small, medium, large, x-large, xx-large; atau menggunakan nilai smaller (lebih kecil) atau larger (lebih besar).
4. font-weight: ketebalan huruf. Nilainya: normal, bold, bolder, light, lighter.
5. text-transform: pengaturan huruf kapital pada teks. Nilainya: uppercase (huruf kapital semua), lowercase (huruf kecil semua), capitalize (huruf kapital pada awal setiap kata), atau none.
6. text-align: posisi perataan teks. Nilainya: left (rata kiri), center (rata tengah), right (rata kanan), atau justify (rata kiri-kanan).
7. line-height: tinggi baris. Nilainya: angka (dalam piksel atau em).
8. text-decoration: dekorasi teks. Nilainya: blink (tulisan berkedip), underline (bergaris bawah), line-through (teks tercoret), overline (garis diatas teks), atau none. Atau bisa juga digabung. Misal untuk membuat teks dengaan bergaris bawah dan berkedip maka tulisannya: underline blink.
9. text-indent: jarak teks dari garis terluar pada baris pertama. Nilainya diisi dengan angka (dalam piksel)
10. white-space: properti untuk mengatur tampilan spasi. Maksudnya, pada kode HTML biasa, kita tidak bisa menuliskan spasi lebih dari satu kali. Misalnya kita ketikkan Teks contoh. (dengan 5 spasi) maka yang tampil hanya Teks contoh. (dengan 1 spasi). Kita bisa mengakalinya dengan menggunakan tag
danatau menggunakan kode sebagai pengganti spasi. Nah, anda juga bisa menggunakan properti ini. Nilainya: pre (untuk menampilkan spasi) atau normal.
11. letter-spacing: jarak antarhuruf. Nilainya dapat diisi dengan angka (dalam satuan piksel).
12. word-spacing: jarak antarkata. Nilainya sama dengan letter-spacing, dapat diisi dengan angka dalam satuan piksel.
Buka Notepad lalu ketikkan seperti berikut.
Lalu simpan dengan nama apa saja, asalkan berekstensi .html (misal: belajarcss.html). Lalu pilih bagian Save as type, lalu ganti dengan All Files. Lalu klik Save.
Warnanya akan berwarna abu-abu
Hurufnya akan menggunakan font "Arial, Tahoma dan Verdana"
Huruf ini akan berukuran 24 piksel
Hurufnya akan menjadi tebal
Teksnya akan menjadi huruf kapital semua
Teksnya akan menjadi rata tengah.
Lihat kan???
Coba apa yang terjadi jika saya menggunakan properti line-height ini.
Oh... ternyata pada masing-masing baris akan diberi jarak sela sebesar 1,5 em.
Teks ini akan berkedip-kedip bikin pusing mata. Hehehe...
Pada teks ini akan mempunyai text indent sebesar 12 piksel.
Di Kode HTML kita tidak bisa memberikan spasi lebih dari satu kali.
kecuali dengan menggunakan properti white-space ini. Hehehe...
Spasi antarhuruf pada teks ini akan berjarak 1,5 piksel
Spasi antarkata pada teks ini akan berjarak 2 piksel
Lalu buka file yang telah anda buat. Kira-kira hasilnya seperti ini (klik gambar untuk melihat lebih jelas).
0 Response to "Dasar-dasar Css 3"
Posting Komentar