Gambaran Keseluruhan Lembaran Gaya Cascading Dengan Lembaran Gaya Sampel
Apabila anda membina laman web dari awal, ia bijak untuk bermula dengan gaya asas yang ditakrifkan. Ia seperti bermula dengan kanvas bersih dan berus segar. Salah satu masalah pertama yang dihadapi oleh pereka web adalah bahawa pelayar web semua berbeza. Saiz fon lalai berbeza dari platform ke platform, keluarga font lalai berbeza, sesetengah pelayar menentukan margin dan padding pada tag badan manakala yang lain tidak, dan sebagainya. Dapatkan sekitar ketidakkonsistenan ini dengan menentukan gaya lalai untuk halaman web anda.
CSS dan Set aksara
Pertama sekali, tetapkan set aksara dokumen CSS anda ke utf-8 . Walaupun kemungkinan besar kebanyakan halaman yang anda reka bentuk ditulis dalam Bahasa Inggeris, ada yang dapat disesuaikan-diterapkan untuk konteks linguistik dan budaya yang berlainan. Apabila mereka berada, utf-8 menyederhanakan proses itu. Menetapkan aksara yang ditetapkan dalam helaian luaran tidak akan diutamakan di atas pengepala HTTP , tetapi dalam semua situasi lain, ia akan.
Sangat mudah untuk menetapkan set watak. Untuk baris pertama dokumen CSS tulis:
@charset "utf-8";Dengan cara ini, jika anda menggunakan aksara antarabangsa dalam kandungan kandungan atau sebagai nama kelas dan ID, lembaran gaya masih berfungsi dengan betul.
Menggayakan Body Page
Perkara seterusnya, keperluan helaian gaya lalai adalah gaya untuk mengeluarkan margin, padding, dan sempadan. Ini memastikan bahawa semua pelayar meletakkan kandungan di tempat yang sama, dan tidak ada ruang tersembunyi di antara penyemak imbas dan kandungannya. Untuk kebanyakan laman web, ini terlalu dekat dengan tepi untuk teks, tetapi penting untuk bermula di sana supaya gambar latar belakang dan bahagian susun atur dipenuhi dengan betul.
html, badan {margin: 0px; padding: 0px; sempadan: 0px; }Tetapkan latar depan lalai atau warna fon ke hitam dan warna latar belakang lalai ke putih. Walaupun ini kemungkinan akan berubah untuk kebanyakan reka bentuk laman web, dengan warna-warna standard yang ditetapkan pada tag body dan HTML pada mulanya membuat halaman lebih mudah dibaca dan berfungsi.
html, badan {color: # 000; latar belakang: #fff; }Gaya Fon Default
Saiz fon dan keluarga font adalah sesuatu yang tidak dapat dielakkan akan berubah sebaik sahaja reka bentuk mengambil masa tetapi bermula dengan saiz fon lalai dari 1 em dan font fon keluarga Arial, Geneva, atau beberapa font sans-serif lain. Penggunaan ems menyimpan laman sebagai mudah, dan fon sans-serif lebih mudah dibaca pada skrin.
html, badan, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Mungkin ada tempat lain di mana anda mungkin mencari teks, tetapi p , th , td , li , dd , dan dt adalah permulaan yang baik untuk menentukan font asas. Sertakan HTML dan badan sekiranya berlaku, tetapi banyak pelayar menimpa pilihan font jika anda hanya menetapkan fon anda untuk HTML atau badan.
Tajuk utama
Tajuk HTML penting untuk digunakan untuk membantu garis besar laman web anda dan membiarkan enjin pencarian menjadi lebih dalam ke laman web anda. Tanpa gaya, mereka semua agak hodoh, jadi tetapkan gaya lalai pada semua mereka dan tentukan keluarga font dan saiz fon untuk setiap.
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 Pautan
Menggayakan warna pautan hampir selalu menjadi bahagian kritikal reka bentuk, tetapi jika anda tidak mendefinisikannya dalam gaya lalai, kemungkinannya anda akan melupakan sekurang-kurangnya salah satu kelas pseudo. Tentukan mereka dengan beberapa variasi kecil pada biru dan kemudian ubahnya apabila anda mempunyai palet warna untuk tapak yang ditetapkan.
Untuk menetapkan pautan dalam warna biru, tetapkan:
- pautan sebagai biru
- melawat pautan sebagai biru gelap
- hover pautan sebagai cahaya biru
- pautan aktif sebagai warna biru
seperti yang ditunjukkan dalam contoh ini:
a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Dengan menyusun pautan dengan skema warna yang agak tidak menyenangkan ia memastikan bahawa saya tidak akan melupakan mana-mana kelas, dan juga membuat mereka sedikit kurang kuat daripada biru, merah, dan ungu.Helaian Gaya Penuh
Berikut adalah helaian gaya penuh:
@charset "utf-8"; html, badan {margin: 0px; padding: 0px; sempadan: 0px; warna: # 000; latar belakang: #fff; } html, badan, 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: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }