Sebelumnya: CSS Text (teks)
Berikutnya: CSS tautan (link)
properti font CSS mendefinisikan font, bold, ukuran, gaya teks.
Perbedaan antara serif dan sans-serif font antara
Pada layar komputer, font sans-serif dianggap lebih mudah untuk dibaca daripada font serif
Font CSS
Dalam CSS, ada dua jenis nama keluarga font:
- Generik keluarga font - memiliki kombinasi font sistem penampilan serupa (seperti "Serif" atau "Monospace")
- keluarga font tertentu - keluarga font tertentu (seperti "Times" atau "Courier")
| serif | Times New Roman Georgia | font akhir Serif memiliki karakter tambahan di garis dekoratif |
| Sans-serif | Arial Verdana | "Sans" berarti tanpa - font ini pada akhir tanpa hiasan tambahan |
| monospace | Courier New Lucida Console | Semua karakter monospace memiliki lebar yang sama |
keluarga Font
Properti font-family dari keluarga Fon teks.
Properti font-family harus ditetapkan beberapa nama font sebagai mekanisme "fallback", jika browser tidak mendukung font pertama, ia akan mencoba font berikutnya.
Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus tertutup dalam tanda kutip, seperti Font Family: "Times New Roman."
keluarga font yang beberapa ditentukan oleh dipisahkan koma:
p{font-family:"Times New Roman", Times, serif;}
Coba »
Untuk kombinasi font yang lebih umum digunakan, melihat kami Web-aman kombinasi font .
gaya font
Terutama atribut menentukan gaya font teks miring.
Properti ini memiliki tiga nilai:
- Biasa - tampilan teks normal
- Miring - teks yang ditampilkan dalam huruf miring
- karakter miring - satu sisi cenderung untuk teks (dan sangat mirip dengan miring, tapi kurang didukung)
p.normal {font-style:normal;} p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Coba »
Font Size
Ukuran properti font-ukuran teks.
Dapat mengatur ukuran teks dalam desain web sangat penting. Namun, Anda tidak dapat menyesuaikan ukuran font untuk membuat paragraf terlihat seperti pos, atau membuat judul terlihat seperti paragraf.
Pastikan untuk menggunakan tag yang benar HTML untuk <h1> - <h6> merupakan judul dan <p> mewakili sebuah paragraf:
Font nilai ukuran bisa ukuran absolut atau relatif.
ukuran absolut:
- Mengatur teks dari ukuran tertentu
- Kita tidak bisa mengubah ukuran teks dalam semua browser
- Tentukan ukuran fisik output dari ukuran absolut dari berguna
ukuran relatif:
- Sehubungan dengan elemen sekitarnya untuk mengatur ukuran
- Hal ini memungkinkan pengguna untuk mengubah ukuran teks dalam browser Anda
Jika Anda tidak menentukan ukuran font, ukuran default, dan paragraf teks biasa, itu adalah 16 piksel (16px = 1em).
Mengatur ukuran font pixel
Mengatur ukuran teks dengan piksel, memberi Anda kontrol penuh atas ukuran teks:
h1 {font-size:40px;} h2 {font-size:30px;}
p {font-size:14px;}
Coba »
Contoh di atas 9, Firefox, Chrome, Opera, dan Safari, menyesuaikan ukuran teks dengan skala browser Internet Explorer.
Meskipun Anda dapat menyesuaikan ukuran teks melalui alat zoom browser, bagaimanapun, penyesuaian ini adalah seluruh halaman, tidak hanya teks
Gunakan em untuk mengatur ukuran font
Untuk menghindari Internet Explorer tidak dapat disesuaikan dalam teks, banyak pengembang menggunakan em unit bukan piksel.
Unit em-size direkomendasikan oleh W3C.
1em sama dengan ukuran font saat ini. Dalam browser default ukuran teks adalah 16px.
Oleh karena itu, ukuran default dari 1em 16px. Rumus berikut dapat dikonversi ke piksel em: px / 16 = em
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Coba »
Dalam contoh di atas, ukuran em teks adalah sama dengan contoh sebelumnya dalam pixel. Namun, jika Anda menggunakan unit em, Anda dapat menyesuaikan ukuran teks dalam semua browser.
Sayangnya, IE masih masalah browser. Mengubah ukuran teks, itu akan lebih kecil dari normal atau lebih besar ukurannya.
Gunakan kombinasi persentase dan EM
Dalam semua solusi browser, mengatur <body> unsur ukuran font default adalah persentase:
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;}
p {font-size:0.875em;}
Coba »
kode kita sangat efektif. Dalam semua browser dapat menampilkan ukuran teks yang sama, dan memungkinkan semua browser untuk memperbesar ukuran teks.
Mengatur font bold
Contoh ini menunjukkan bagaimana untuk mengatur font tebal.
Anda dapat mengatur mengubah font
Contoh ini menunjukkan bagaimana untuk mengatur perubahan font.
Semua properti font dalam satu deklarasi
Contoh ini menunjukkan bagaimana menggunakan properti singkat untuk mengatur properti font dalam satu deklarasi.
Semua properti font CSS
Sebelumnya: CSS Text (teks)
Berikutnya: CSS tautan (link)
You're Reading a Free Preview
Pages 6 to 8 are not shown in this preview.
You're Reading a Free Preview
Pages 12 to 22 are not shown in this preview.
Penggunaan Style dan Atribut dalam Elemen HTML cukup penting untuk memperindah tampilan halaman web dan pengaturan tag-tag agar dapat berfungsi secara optimal. Style bermanfaat untuk mengatur gaya dari elemen html bagaimana ditampilkan, seperti mengatur warna latar halaman web, mengatur warna, ukuran, jenis huruf, dll. Sedangkan atribut memberikan informasi tambahan tentang elemen html, dimana style juga termasuk salah satu atribut yang digunakan dalam elemen html.
Semua elemen html dapat memiliki atribut yang diletakan selalu di bagian tag pembuka dengan nama dan nilainya, seperti <div width=”100px”>…</div>, dimana width=”100px” adalah atribut dengan width sebagai nama atribut dan 100px sebagai nilai dari nama atribut width. Berikut ini beberapa atribut elemen html yang sering digunakan, diantaranya:
- style, merupakan atribut penggunaan css untuk mengatur gaya isi elemen yang diletakan dalam tag pembuka elemen html.
- href, merupakan atribut dari tag a yang digunakan untuk menentukan url dari suatu link.
- title, merupakan atribut untuk memberikan informasi suatu elemen dengan tampilan tool-tip yang akan muncul saat kursor di atasnya.
- src, merupakan atribut dari tag img untuk menentukan url suatu gambar, agar gambar dapat ditampilkan di halaman web.
- alt, merupakan atribut dari tag img untuk membuat alternatif teks pada saat gambar tidak tampil.
- width, merupakan atribut untuk mentukan lebar dari elemen.
- height, merupakan atribut untuk menentukan tinggi dari elemen.
- id, merupakan atribut untuk memberikan id unik suatu elemen untuk memberikan gaya hanya pada nama id tersebut.
- class, merupakan atribut untuk menentukan gaya yang sama pada beberapa elemen dengan nama class yang sama.
Atribut Style, berperan dalam pengaturan tampilan agar lebih artistik. Pembahasan lebih lengkap tentang style ada dalam tutorial CSS. Penggunaan atribut style pada elemen html mengacu pada sintax <namatag style=”property:value;”>…</namatag>. Property adalah nama properti css dan value adalah nilai nama properti css-nya. Contoh: <p style=”color:red;text-align:left”>…</p>, dimana color adalah properti css dan red adalah nilai dari propertinya. Berikut ini beberapa properti css yang biasa digunakan, diantaranya:
- background-color, merupakan properti untuk menentukan warna latar terhadap isi elemen dengan nilai nama-nama warna seperti red, blue, yellow, black, dll. atau dengan nilai rgb seperti rgb(255,0,0), atau dengan nilai rgba seperti rgba(255, 99, 71, 0.8), atau dengan nilai hsl seperti hsl(0, 100%, 50%), atau dengan nilai hsla seperti hsla(9, 100%, 64%, 0.8), atau dengan nilai hexadecimal seperti #ff0000. Contoh <h1 style=”background-color:#ff0000″>…</h1>.
- color, merupakan properti untuk menentukan warna huruf dengan nilai warna baik nama warna, rgb, rgba, hsl, hsla atau hexadecimal. Contoh <p style=”color:blue”>…</p>.
- font-family, merupakan properti untuk menentukan jenis huruf yang digunakan dengan nilai nama jenis huruf seperti arial, times new roman, georgia, helvetica, dll. Contoh <p style=”font-family:arial”>…</p>.
- font-size, merupakan properti untuk menentukan ukuran huruf. Contoh <p style=”font-size:10px”>…</p>. Pemberian nilai dapat berformat px, em atau pt.
- text-align, merupakan properti untuk menentukan perataan teks dengan nilai left untuk rata kiri, right untuk rata kanan, center untuk rata tengah dan justify untuk rata kiri kanan. Contoh <p style=”text-align:justify”>…</p>.
- border, merupakan properti untuk memberikan border/bingkai dengan nilai ukuran ketebalan dalam px, em atau pt. Contoh <p style=”border:2px solid”>…</p>.
- padding, merupakan properti untuk menentukan jarak ke dalam isi elemen. Padding terdiri atas padding-top, padding-right, padding-bottom, dan padding left dengan nilai ukuran dalam px, em atau pt. Dapat ditulis padding: 2px 1px 2px 3px; kalau nilainya sama cukup ditulis padding:2px.
- margin, merupakan properti untuk menentukan jarak antar elemen. Margin terdiri atas margin-top, margin-right, margin-bottom dan margin-left dengan nilai ukuran dalam px, em atau pt. Dapat ditulis margin:2px 2px 2px 2px; atau lebih sederhana margin:2px; membacanya jarak dari atas, kanan, bawah dan kiri.
Khusus penggunaan warna mengikuti aturan berikut ini:
- Nama warna diantaranya: aqua, blue, black, brown, chocolate, cyan, fuchsia, gold, grey, green, lavender, lime, magenta, maroon, navy, olive, orange, orchid, pink, purple, red, salmon, sienna, silver, tan, teal, tomato, Turquoise, violet, white, yellow, dsb.
- Nilai rgb(red, green, blue), diisi dengan nilai intensitas mulai dari 0 hingga 255. Misalnya untuk warna merah rgb(255, 0, 0), warna hitam rgb(0,0,0) dan warna putih rgb(255, 255, 255)
- Nilai hexadecimal, mengikuti aturan #rrggbb dengan rr adalah red, gg adalah green dan bb adalah blue dengan nilai diantara 00 hingga ff (sama dengan nilai 0-255). Contoh warna merah maka hexadecimal nya dalah #ff0000, karena diset ke nilai tertinggi yaitu ff dan lainnya diset ke nilai terendah yaitu 00. Contoh lainnya #0000ff, #3cb371, #ee82ee, #ffa500, #6a5acd, dsb.
- Nilai hsl(hue, saturation, lightness), hue diisi dengan nilai derajat mulai 0 hingga 360, misalnya 0 untuk red, 120 untuk green, dan 240 untuk blue. Saturation diisi dengan nilai persentasi antara 0% hingga 100%, dimana 0% untuk grey dan 100% untuk full collor. Lightness diisi juga dengan nilai persen antara 0% hingga 100%, dimana 0% untuk hitam, 50% sedikit terang, dan 100% untuk putih. Contoh hsl(0, 100%, 50%), hsl(240, 100%, 50%).
- Nilai rgb(red, green, blue, alpha), dengan r, g dan b diisi dengan nilai intensitas mulai dari 0 hingga 255. Sedangkan alpha antara 0.0 untuk full transparan hingga 1.0 untuk tidak transparan. Contoh rgba(255, 99, 71, 0), rgba(255, 99, 71, 0.2), rgba(255, 99, 71, 0.6), rgba(255, 99, 71, 1), dsb.
- Nilai hsla(hue, saturation, lightness, alpha), hue diisi dengan nilai derajat mulai 0 hingga 360. Saturation diisi dengan nilai persentasi antara 0% hingga 100%, dimana 0% untuk grey dan 100% untuk full collor. Lightness diisi juga dengan nilai persen antara 0% hingga 100%, dimana 0% untuk hitam, 50% sedikit terang, dan 100% untuk putih. Sedangkan alpha antara 0.0 untuk full transparan hingga 1.0 untuk tidak transparan. Contoh hsla(9, 100%, 64%, 0), hsla(9, 100%, 64%, 0.2), hsla(9, 100%, 64%, 0.6), hsla(9, 100%, 64%, 1), dsb.
Demikianlah tutorial tentang Penggunaan Style dan Atribut dalam Elemen HTML. Beberapa hal yang harus diperhatikan adalah dalam penulisan nama tag, atribut dan propert dan nilainya direkomendasikan menggunakan huruf kecil semua, dan juga direkomendasikan menggunakan tanda petik ganda untuk mengapit nilai dari atribut atau nilai dari properti.