Dapatkan untuk Tahu Cascading Style Sheets Dengan Cheat Sheet CSS ini

Tinjauan tentang Cascading Style Sheets Dengan Sample Style Sheet

Ketika Anda membangun sebuah situs web dari awal, itu pintar untuk memulai dengan gaya dasar yang ditentukan. Ini seperti memulai dengan kanvas bersih dan sikat baru. Salah satu masalah pertama yang dihadapi perancang web adalah bahwa peramban web semuanya berbeda. Ukuran font default berbeda dari platform ke platform, keluarga font default berbeda, beberapa browser menentukan margin dan padding pada tag body sementara yang lain tidak, dan seterusnya. Dapatkan sekitar inkonsistensi ini dengan menentukan gaya default untuk halaman web Anda.

CSS dan Kumpulan Karakter

Pertama-tama, atur rangkaian karakter dokumen CSS Anda ke utf-8 . Meskipun sebagian besar laman yang Anda rancang ditulis dalam bahasa Inggris, beberapa mungkin dilokalkan — disesuaikan untuk konteks linguistik dan budaya yang berbeda. Ketika mereka, utf-8 menyederhanakan proses. Mengatur set karakter dalam style sheet eksternal tidak akan didahulukan daripada header HTTP , tetapi dalam semua situasi lain, itu akan terjadi.

Sangat mudah untuk mengatur set karakter. Untuk baris pertama dari dokumen CSS tulis:

@charset "utf-8";

Dengan cara ini, jika Anda menggunakan karakter internasional dalam properti konten atau sebagai kelas dan nama ID, style sheet akan tetap berfungsi dengan benar.

Styling Tubuh Halaman

Hal berikutnya yang perlu dilakukan oleh style sheet standar adalah style to zero out margin, padding, dan border. Ini memastikan bahwa semua browser menempatkan konten di tempat yang sama, dan tidak ada ruang tersembunyi di antara browser dan konten. Untuk sebagian besar halaman web, ini terlalu dekat dengan tepi untuk teks, tetapi penting untuk mulai di sana sehingga gambar latar belakang dan pembagian tata letak disusun dengan benar.

html, body {margin: 0px; padding: 0px; border: 0px; }

Atur latar depan atau warna font menjadi hitam dan warna latar belakang default menjadi putih. Meskipun hal ini kemungkinan besar akan berubah untuk sebagian besar desain halaman web, memiliki warna standar yang ditetapkan pada tubuh dan tag HTML pada awalnya membuat halaman lebih mudah dibaca dan bekerja dengan.

html, body {color: # 000; latar belakang: #fff; }

Gaya Font Default

Ukuran font dan font family adalah sesuatu yang pasti akan berubah setelah desain berlangsung tetapi mulai dengan ukuran font default 1 em dan font font default Arial, Geneva, atau font sans-serif lainnya. Penggunaan ems menjaga agar halaman dapat diakses semaksimal mungkin, dan font sans-serif lebih mudah dibaca di layar.

html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }

Mungkin ada tempat lain di mana Anda mungkin menemukan teks, tetapi p , th , td , li , dd , dan dt adalah awal yang baik untuk mendefinisikan font dasar. Sertakan HTML dan badan untuk berjaga-jaga, tetapi banyak browser mengganti 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 pencari masuk lebih dalam ke situs Anda. Tanpa gaya, semuanya cukup jelek, jadi tetapkan gaya default pada semuanya dan tentukan font family dan ukuran font untuk masing-masing.

h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }

Jangan Lupakan Tautan

Styling warna tautan hampir selalu merupakan bagian penting dari desain, tetapi jika Anda tidak mendefinisikannya dalam gaya default, kemungkinan Anda akan melupakan setidaknya salah satu kelas pseudo. Tentukan mereka dengan beberapa variasi kecil pada warna biru dan kemudian ubah mereka setelah Anda memiliki palet warna untuk situs yang ditentukan.

Untuk mengatur tautan dalam nuansa biru, atur:

seperti yang ditunjukkan dalam contoh ini:

a: tautan {color: # 00f; } a: dikunjungi {color: # 009; } a: hover {color: # 06f; } a: aktif {color: # 0cf; } Dengan menata tautan dengan skema warna yang cukup tidak berbahaya, ini memastikan bahwa saya tidak akan melupakan salah satu kelas, dan juga membuatnya sedikit kurang keras daripada warna biru, merah, dan ungu default.

Lembar Gaya Penuh

Berikut ini adalah style sheet lengkap:

@charset "utf-8"; html, body {margin: 0px; padding: 0px; border: 0px; warna: # 000; latar belakang: #fff; } html, body, 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 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: tautan {color: # 00f; } a: dikunjungi {color: # 009; } a: hover {color: # 06f; } a: aktif {color: # 0cf; }