Jadwal Kursus

Tutorial Tingkat Lanjut CSS

• Buku Lepas untuk CSS
• Ringkasan CSS
• Basis Gramatika CSS
• Gramatika Tingkat Lanjut CSS
• Pemilihan Pencabut Anak
• Pemilihan Pencabut id
• Pemilihan Pencabut Klas
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model Bok CSS

• Ringkasan Model Bokor CSS
• Margin Dalam CSS
• Batas CSS
• Margin Luar CSS
• Percampuran Margin Luar CSS

Pemosisian CSS

• Ringkasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Gelombang CSS

Pemilih CSS

• Pemilihan Elemen CSS
• Pemecahan Pemilihan CSS
• Pemilihan Klas Detaill CSS
• Pemilihan ID Detaill CSS
• Pemilihan Pemilihan Attribut Detaill CSS
• Pemilihan Anak Keturunan CSS
• Pemilihan Anak Elemen CSS
• Pemilihan Saudara Kepada Kiri CSS

Kursus Pilihan

Rekomendasi Kursus:

• Kotak Pusaka CodeW3C.com

Atribut huruf CSS mendefinisikan seri huruf, ukuran, tebal, gaya (seperti italic) dan deformat (seperti kapital kecil).

Seri Font CSS

Dalam CSS, ada 2 jenis nama seri font yang berbeda:

• Seri font universal - kombinasi sistem font yang memiliki penampilan yang serupa (seperti "Serif" atau "Monospace")
• Seri font khusus - seri font yang spesifik (seperti "Times" atau "Courier")

Selain berbagai seri font khusus, CSS mendefinisikan 5 seri font universal:

• Font Serif
• Font Sans-serif
• Font Monospace
• Font Cursive
• Font Fantasy

Jika Anda ingin mendapatkan pengetahuan lebih lanjut tentang seri font, baca Seri Font CSS.

Seri font yang ditentukan

Menggunakan Properti font-family Mendefinisikan seri font teks.

Menggunakan seri font universal

Jika Anda ingin dokumen menggunakan font sans-serif, tetapi Anda tak peduli font mana, pernyataan berikut adalah yang cocok:

body {font-family: sans-serif;}

Coba sendiri

Agensi pengguna akan memilih font dari seri font sans-serif (seperti Helvetica) dan menerapkannya ke elemen body. Karena warisan, pilihan font ini akan diterapkan ke semua elemen yang terdapat di dalam elemen body, kecuali ada pemilihan yang lebih spesifik untuk menutupinya.

Seri font yang ditentukan

Selain menggunakan seri font universal, Anda juga dapat menetapkan font yang lebih khusus melalui properti font-family.

Contoh di bawah ini menetapkan font Georgia untuk semua elemen h1:

h1 {font-family: Georgia;}

Coba sendiri

Aturan ini akan memunculkan masalah lainnya, jika font Georgia tidak terinstal di agensi pengguna, font baku agensi pengguna hanya dapat digunakan untuk menampilkan elemen h1.

Kami dapat memecahkan masalah ini dengan menggabungkan nama font khusus dan seri font universal:

h1 {font-family: Georgia, serif;}

Coba sendiri

Jika pembaca belum menginstal Georgia, tetapi telah menginstal font Times (font serif yang satu), agensi pengguna mungkin akan menggunakan Times untuk elemen h1. Meskipun Times tidak sepenuhnya cocok dengan Georgia, tetapi setidaknya cukup dekat.

Kemudian, kami menyarankan untuk menyediakan seri font universal di semua aturan font-family. Dengan cara ini, disediakan jalur alternatif, jika agensi pengguna tidak dapat menyediakan font yang cocok dengan aturan, font kandidat dapat dipilih.

Jika Anda sangat akrab dengan font, Anda juga dapat menentukan sekelompok font yang serupa untuk elemen yang diberikan. Untuk melakukannya, perlu mengatur font tersebut berdasarkan prioritas dan menghubungkannya dengan koma:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Coba sendiri

Menurut daftar ini, peran pengguna akan mencari font-fon ini berdasarkan urutan yang diinginkan. Jika semua font yang terdaftar tidak tersedia, maka akan secara sederhana memilih font serif yang tersedia.

Penggunaan tanda kutip

Anda mungkin sudah mengetahui, di contoh di atas digunakan tanda kutip tunggal. Hanya jika nama font mengandung beberapa spasi (seperti New York), atau jika nama font termasuk simbol seperti # atau $, maka perlu menambahkan tanda kutip di deklarasi font-family.

Tanda kutip tunggal atau ganda dapat diterima. Namun, jika atribut font-family disimpan di dalam atribut style HTML, maka perlu menggunakan tanda kutip yang belum digunakan oleh atribut itu sendiri:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

Coba sendiri

Gaya font

Atribut font-styleDipakai paling sering untuk menentukan teks oblique.

Atribut ini memiliki tiga nilai:

• normal - menampilkan teks dengan normal
• italic - menampilkan teks dengan italic
• oblique - menampilkan teks dengan oblique

Contoh

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Coba sendiri

Perbedaan antara italic dan oblique

font-style sangat sederhana: digunakan untuk memilih antara teks normal, teks italic, dan teks oblique. Yang kompleks adalah membedakan teks italic dan teks oblique.

Italic (italic) adalah gaya font yang sederhana, dengan beberapa perubahan kecil pada struktur setiap huruf untuk merefleksikan penampilan yang berubah. Lawan nya, teks oblique adalah versi slanting dari teks vertikal normal.

Pada umumnya, teks italic dan oblique terlihat sama di dalam browser web.

Deformasi font

Atribut font-variantDapat diatur huruf besar kecil.

Besar kecil bukan huruf kapital biasa, tetapi juga bukan huruf kecil, huruf ini menggunakan ukuran huruf kapital yang berbeda.

Contoh

p {font-variant:small-caps;}

Coba sendiri

Tebal font

Atribut font-weightAtur ketebalan teks.

gunakan kata kunci bold untuk membuat teks tebal.

Kata kunci 100 ~ 900 menentukan 9 tingkat tebal untuk font. Jika dalam teks terdapat tingkat tebal ini, angka-angka langsung dipetakan ke tingkat yang didefinisi, 100 untuk font terhalus, dan 900 untuk font tertebal. Angka 400 setara dengan normal, dan 700 setara dengan bold.

Jika teks elemen disetting tebal, browser akan menetapkan ukuran tebal yang lebih tebal daripada nilai yang diwarisi. Seperti lawannya, kata kunci lighter akan mengurangi tingkat tebal, bukan meningkatkannya.

Contoh

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Coba sendiri

Ukuran font

Atribut font-sizeAtur ukuran teks.

Kemampuan untuk mengelola ukuran teks penting di bidang desain web. Tetapi, Anda seharusnya tidak mengatur ukuran teks sehingga paragraf terlihat seperti judul, atau judul terlihat seperti paragraf.

Pertahankan selalu penggunaan judul HTML yang benar, seperti penggunaan <h1> - <h6> untuk menandai judul, dan penggunaan <p> untuk menandai paragraf.

Nilai font-size dapat berupa nilai absolut atau relatif.

Nilai absolut:

• Atur teks ke ukuran yang ditentukan.
• Tidak mengizinkan pengguna untuk mengubah ukuran teks di semua browser (tidak menguntungkan untuk ketersediaan).
• Ukuran absolut sangat berharga saat menentukan ukuran fisik output.

Ukuran relatif:

• Atur ukuran dengan berbandingkan elemen sekeliling.
• Izinkan pengguna untuk mengubah ukuran teks di browser.

Perhatian:Jika ukuran font belum disebutkan, ukuran teks normal (seperti paragraf) adalah 16 pixel (16px=1em).

Gunakan pixel untuk mengatur ukuran font.

Mengatur ukuran teks dengan pixel dapat mengendalikan sepenuhnya ukuran teks:

Contoh

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Coba sendiri

Di Firefox, Chrome, dan Safari, dapat diatur ulang ukuran teks di contoh di atas, tetapi di Internet Explorer tidak dapat.

Walaupun ukuran teks dapat diatur menggunakan alat perbesar skala browser, hal ini sebenarnya adalah penyesuaian seluruh halaman, bukan hanya teks.

Gunakan em untuk mengatur ukuran font.

Jika ingin menghindari masalah ukuran teks yang tak dapat diatur di Internet Explorer, banyak pengembang menggunakan satuan em untuk menggantikan pixel.

W3C menyarankan menggunakan satuan ukuran em.

1em sama dengan ukuran font saat ini. Jika font-size elemen adalah 16 piksel, maka 1em untuk elemen itu adalah 16 piksel. Saat mengatur ukuran font, nilai em akan berubah relatif terhadap ukuran font parent element.

Ukuran teks default di browser adalah 16 piksel. Jadi 1em berukuran 16 piksel.

Dapat digunakan formula di bawah untuk mengkonversi piksel ke em:piksel/16=em

(Catatan: 16 sama dengan ukuran font default parent element, asumsikan ukuran font parent element adalah 20px, maka formula perlu diubah:piksel/20=em

Contoh

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Coba sendiri

Dalam contoh di atas, ukuran teks dalam satuan em sama dengan ukuran teks dalam satuan piksel di contoh sebelumnya. Namun, jika menggunakan satuan em, dapat mengatur ukuran teks di semua browser.

Sayangnya, masih ada masalah di IE. Saat mengatur ukuran teks, dapat lebih besar atau lebih kecil daripada ukuran normal.

Kombinasi persen dan EM

Solusi yang efektif untuk semua browser adalah menata elemen body (parent element) dengan nilai font-size dalam persen:

Contoh

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Coba sendiri

Kode kami sangat efektif. Dalam semua browser, dapat menampilkan ukuran teks yang sama dan memungkinkan perbesaran ukuran teks dalam semua browser.

Atribut Tipe Huruf CSS

Alat Tangkap

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS

Tautan Pendukung