Ketika kamu membangun situs web dari awal, sebaiknya mulai dengan gaya dasar yang ditentukan. Ini seperti memulai dengan kanvas bersih dan kuas baru. Salah satu masalah pertama yang dihadapi desainer web adalah browser web semua berbeda. Ukuran font default berbeda dari platform ke platform, keluarga font default berbeda, beberapa browser menentukan margin dan padding pada tag tubuh sementara yang lain tidak, dan seterusnya. Atasi ketidakkonsistenan ini dengan menentukan gaya default untuk halaman web Anda.
CSS dan Kumpulan Karakter
Hal pertama yang pertama, atur set karakter dokumen CSS Anda ke utf-8. Meskipun mungkin sebagian besar halaman yang Anda desain ditulis dalam bahasa Inggris, beberapa mungkin dilokalkan—diadaptasi untuk konteks linguistik dan budaya yang berbeda. Ketika ya, utf-8 menyederhanakan prosesnya. Mengatur set karakter di lembar gaya eksternal tidak akan didahulukan dari HTTP header, tetapi dalam semua situasi lain, itu akan terjadi.
Sangat mudah untuk mengatur set karakter. Untuk baris pertama dokumen CSS, tulis:
@charset "utf-8";
Dengan cara ini, jika Anda menggunakan karakter internasional di properti konten atau sebagai nama kelas dan ID, lembar gaya akan tetap berfungsi dengan benar.
Menata Badan Halaman
Hal berikutnya yang dibutuhkan style sheet default adalah style untuk zero out margin, padding, dan border. Ini memastikan bahwa semua browser menempatkan konten di tempat yang sama, dan tidak ada ruang tersembunyi antara browser dan konten. Untuk sebagian besar halaman web, ini terlalu dekat dengan tepi untuk teks, tetapi penting untuk memulai dari sana sehingga gambar latar belakang dan pembagian tata letak berbaris dengan benar.
html, isi {
margin: 0 piksel;
bantalan: 0px;
batas: 0px;
}
Atur latar depan atau warna font default menjadi hitam dan warna latar belakang default menjadi putih. Meskipun ini kemungkinan besar akan berubah untuk sebagian besar desain halaman web, dengan menetapkan warna standar ini pada bodi dan tag HTML pada awalnya membuat halaman lebih mudah dibaca dan digunakan.
html, isi {
warna: #000;
latar belakang: #ff;
}
Gaya Font Default
Ukuran font dan keluarga font adalah sesuatu yang pasti akan berubah setelah desain bertahan tetapi mulai dengan ukuran font default 1 em dan default keluarga font dari Arial, Jenewa, atau lainnya font sans-serif. Penggunaan ems membuat halaman dapat diakses semudah mungkin, dan font sans-serif lebih mudah dibaca di layar.
html, isi, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
Mungkin ada tempat lain di mana Anda mungkin menemukan teks, tapi p, ini, td, li, DD, dan dt adalah awal yang baik untuk menentukan font dasar. Sertakan HTML dan tubuh untuk berjaga-jaga, tetapi banyak browser menimpa pilihan font jika Anda hanya menentukan font untuk HTML atau badan.
berita utama
Judul HTML penting untuk digunakan untuk membantu garis besar situs Anda dan membiarkan mesin telusur masuk lebih dalam ke situs Anda. Tanpa gaya, semuanya cukup jelek, jadi atur gaya default pada semuanya dan tentukan keluarga font dan ukuran font untuk masing-masing.
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 { ukuran font: 2em; }
h2 { ukuran font: 1.5em; }
h3 { ukuran font: 1.2em; }
h4 { ukuran font: 1.0em; }
h5 { ukuran font: 0.9em; }
h6 { ukuran font: 0.8em; }
Jangan Lupa Linknya
Menata warna tautan hampir selalu merupakan bagian penting dari desain, tetapi jika Anda tidak mendefinisikannya dalam gaya default, kemungkinan besar Anda akan melupakan setidaknya salah satu kelas semu. Tentukan mereka dengan beberapa variasi kecil pada warna biru dan kemudian ubah setelah Anda memiliki palet warna untuk situs yang ditentukan.
Untuk mengatur link dalam nuansa biru, atur:
- link seperti biru
- tautan yang dikunjungi seperti biru tua
- arahkan tautan seperti biru muda
- tautan aktif bahkan lebih pucat lagi
Seperti yang ditunjukkan dalam contoh ini:
a: tautan { warna: #00f; }
a: dikunjungi { warna: #009; }
a: hover { warna: #06f; }
a: aktif { warna: #0cf; }
Dengan menata tautan dengan skema warna yang tidak berbahaya, ini memastikan bahwa Anda tidak akan melupakan salah satu kelas dan juga membuatnya sedikit kurang keras daripada default biru, merah, dan ungu.
Lembar Gaya Penuh
Berikut adalah lembar gaya lengkap:
@charset "utf-8";
html, isi {
margin: 0 piksel;
bantalan: 0px;
batas: 0px;
warna: #000;
latar belakang: #ff;
}
html, isi, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 { ukuran font: 2em; }
h2 { ukuran font: 1.5em; }
h3 { ukuran font: 1.2em; }
h4 { ukuran font: 1.0em; }
h5 { ukuran font: 0.9em; }
h6 { ukuran font: 0.8em; }
a: tautan { warna: #00f; }
a: dikunjungi { warna: #009; }
a: hover { warna: #06f; }
a: aktif { warna: #0cf; }