Dapatkan fakta dengan tips ini
Semua penyemak imbas web termasuk apa yang dikenali sebagai "gaya menipu." Ini adalah gaya yang menentukan rupa dan nuansa elemen HTML tanpa ketiadaan sebarang maklumat gaya lain. Sebagai contoh, dalam hampir setiap penyemak imbas, rupa lalai hyperlink adalah warna biru terang dengan garis bawah. Inilah cara melihat pautan tersebut melainkan anda memberitahu mereka supaya dipaparkan dengan cara yang berbeza.
Gaya penyemak imbas lalai boleh membantu, tetapi dalam banyak kes, pereka web ingin menghapus gaya ini supaya mereka boleh mula segar dengan gaya yang mereka berada dalam kawalan 100%. Ini dilakukan menggunakan apa yang dikenali sebagai "stylesheet master".
Lembaran gaya induk hendaklah menjadi helaian gaya pertama yang anda panggil dalam semua dokumen anda. Anda menggunakan stylesheet induk untuk membersihkan tetapan penyemak imbas lalai yang boleh menyebabkan masalah dalam reka bentuk web pelayar silang. Sebaik sahaja anda telah membersihkan gaya dengan stylesheet induk, reka bentuk anda bermula dari tempat yang sama di semua pelayar - seperti kanvas bersih untuk lukisan.
Lalai Global
Lembaran gaya induk anda harus bermula dengan menjauhkan margin, pad dan sempadan pada halaman. Sesetengah penyemak imbas web mengalihkan badan dokumen kepada 1 atau 2 piksel yang diindentifikasi dari tepi pane penyemak imbas. Ini memastikan bahawa mereka semua memaparkan yang sama:
html, badan {margin: 0px; padding: 0px; sempadan: 0px; }Anda juga mahu membuat fon tetap konsisten. Pastikan juga menetapkan saiz fon ke 100 peratus atau 1em, supaya halaman anda boleh diakses, tetapi saiznya tetap konsisten. Dan pastikan anda memasukkan ketinggian baris.
badan {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Pemformatan Utama
Tag tajuk atau tajuk (H1, H2, H3, dan lain-lain) biasanya lalai kepada teks tebal dengan margin besar atau padding di sekelilingnya. Dengan membersihkan berat, margin dan padding, anda memastikan bahawa teg ini masih tetap lebih besar (atau lebih kecil) daripada teks di sekelilingnya tanpa gaya tambahan:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }Anda mungkin ingin mempertimbangkan untuk menetapkan saiz tertentu, jarak huruf dan padam pada tag tajuk anda, tetapi itu benar-benar bergantung kepada gaya laman web yang anda reka dan harus dibiarkan daripada lembaran gaya induk. Anda boleh menambah lebih banyak gaya untuk tajuk ini seperti yang diperlukan untuk reka bentuk khusus anda.
Pemformatan Teks Plain
Di luar tajuk utama, terdapat tag teks lain yang harus anda jelaskan. Satu set yang sering dilupakan adalah tag sel (TH dan TD) dan bentuk tag (SELECT, TEXTAREA dan INPUT). Sekiranya anda tidak menetapkan saiz yang sama seperti teks badan dan perenggan anda, anda mungkin terkejut dengan cara penyemak imbas menyebabkannya.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Ia juga baik untuk memberikan sebut harga anda (BLOCKQUOTE dan Q), akronim, dan singkatan gaya tambahan sedikit, supaya mereka menonjol sedikit lagi:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kursor: help; border-bottom: 1px dashed; }Pautan dan Imej
Pautan mudah untuk diurus dan berubah dari teks yang digariskan biru cerah tersebut. Saya lebih suka sentiasa mempunyai pautan saya yang masih digariskan, tetapi jika anda lebih suka dengan cara yang berbeza, anda boleh menetapkan pilihan ini secara berasingan. Saya juga tidak memasukkan warna dalam helaian gaya induk, kerana itu bergantung pada reka bentuk.
a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }Dengan imej, penting untuk mematikan sempadan. Walaupun kebanyakan penyemak imbas tidak memaparkan sempadan di sekeliling imej biasa, apabila imej itu dipautkan, pelayar menghidupkan sempadan. Untuk membetulkan ini:
img {border: none; }Jadual-jadual
Walaupun jadual tidak lagi digunakan untuk tujuan susun atur, laman web anda mungkin masih menggunakannya untuk data tabluar sebenar. Ini adalah penggunaan jadual HTML yang baik. Kami telah memastikan bahawa saiz teks lalai adalah sama untuk sel-sel meja anda, tetapi terdapat beberapa gaya lain yang perlu anda tetapkan supaya jadual anda tetap sama:
jadual {margin: 0; padding: 0; sempadan: tiada; }Borang
Seperti dengan unsur-unsur lain, anda perlu membersihkan margin dan padding di sekitar borang anda. Satu lagi perkara yang saya suka lakukan ialah menulis semula tag borang sebagai " inline " supaya ia tidak menambah ruang tambahan di mana anda meletakkan teg dalam kod. Seperti dengan elemen teks lain, saya menentukan maklumat fon untuk pilih, textarea dan input di atas, supaya ia sama dengan sisa teks saya.
bentuk {margin: 0; padding: 0; paparan: inline; }Ia juga merupakan idea yang baik untuk menukar kursor untuk label anda. Ini membantu orang melihat label itu akan melakukan sesuatu apabila mereka mengkliknya.
label {kursor: penunjuk; }Kelas Biasa
Untuk bahagian induk gaya induk ini, anda harus menentukan kelas yang masuk akal untuk anda. Ini adalah sebahagian daripada kelas yang saya gunakan paling kerap. Perhatikan bahawa mereka tidak diset untuk elemen tertentu, jadi anda boleh memberikannya kepada apa sahaja yang anda perlukan:
.clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * ingat untuk menetapkan lebar * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; }. tidak diketahui {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {senarai gaya: tiada; senarai gaya-imej: tiada; }Ingatlah bahawa kerana kelas-kelas ini ditulis sebelum gaya-gaya lain dan mereka hanya kelas, mereka mudah mengatasi sifat-sifat gaya yang lebih spesifik yang berlaku kemudian dalam lata . Jika anda mendapati bahawa anda menetapkan kelas biasa pada elemen dan ia tidak berkuatkuasa, anda perlu menyemak untuk memastikan bahawa tidak ada gaya lain di salah satu stylesheets anda yang kemudian mempengaruhi unsur yang sama.
Gaya Sepenuhnya Sarjana
/ * Lalai Global * / html, badan {margin: 0px; padding: 0px; sempadan: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Gaya Teks * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kursor: help; border-bottom: 1px dashed; } kecil {font-size: .85em; } besar {font-size: 1.2em; } / * Pautan dan Imej * / a, a: pautan, a: dikunjungi, a: aktif, a: hover {text-decoration: underline; } img {border: none; } / * Tables * / table {margin: 0; padding: 0; sempadan: tiada; } / * Borang * / borang {margin: 0; padding: 0; paparan: inline; } label {kursor: penunjuk; } / * Kelas Biasa * / .clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * ingat untuk menetapkan lebar * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; }. tidak diketahui {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {senarai gaya: tiada; senarai gaya-imej: tiada; }Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 10/6/17