Dapatkan fakta dengan tips ini
Semua browser web menyertakan apa yang dikenal sebagai "gaya defaense." Ini adalah gaya yang menentukan tampilan dan nuansa elemen HTML tanpa adanya informasi gaya lainnya. Misalnya, di hampir setiap browser, tampilan default hyperlink adalah warna biru cerah dengan garis bawah. Ini adalah bagaimana tautan tersebut terlihat kecuali Anda memberi tahu mereka untuk menampilkan dengan cara yang berbeda.
Gaya peramban bawaan dapat membantu, tetapi dalam banyak kasus desainer web ingin menghapus gaya ini sehingga mereka dapat memulai gaya baru yang mereka kontrol 100%. Ini dilakukan menggunakan apa yang dikenal sebagai "stylesheet master."
Stylesheet master harus menjadi stylesheet pertama yang Anda panggil di semua dokumen Anda. Anda menggunakan stylesheet master untuk mengosongkan pengaturan browser default yang dapat menyebabkan masalah dalam desain Web lintas-browser. Setelah Anda menyelesaikan gaya dengan stylesheet master, desain Anda dimulai dari tempat yang sama di semua browser - seperti kanvas bersih untuk melukis.
Default Global
Stylesheet master Anda harus mulai dengan meniadakan margin, paddings, dan border pada halaman. Beberapa peramban Web menetapkan standar dokumen untuk 1 atau 2 piksel yang di-indentasi dari tepi panel peramban. Ini memastikan bahwa semuanya menunjukkan hal yang sama:
html, body {margin: 0px; padding: 0px; border: 0px; }Anda juga ingin membuat font konsisten. Pastikan juga mengatur ukuran font menjadi 100 persen atau 1em, sehingga halaman Anda dapat diakses, tetapi ukurannya tetap konsisten. Dan pastikan untuk menyertakan garis-tinggi.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Pemformatan Headline
Headline atau tag header (H1, H2, H3, dll.) Biasanya default untuk teks tebal dengan margin besar atau padding di sekelilingnya. Dengan membersihkan berat, margin, dan padding, Anda memastikan bahwa tag ini masih tetap lebih besar (atau lebih kecil) daripada teks di sekitarnya tanpa memiliki gaya ekstra:
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 ukuran tertentu, spasi-huruf dan paddings ke tag headline Anda, tetapi itu benar-benar tergantung pada gaya situs yang Anda rancang dan harus ditinggalkan dari style sheet master. Anda dapat menambahkan lebih banyak gaya untuk judul ini sesuai kebutuhan untuk desain khusus Anda.
Pemformatan Teks Biasa
Di luar berita utama, ada tag teks lain yang harus Anda pastikan untuk dihapus. Satu set yang sering dilupakan orang adalah tag sel tabel (TH dan TD) dan tag formulir (SELECT, TEXTAREA dan INPUT). Jika Anda tidak mengaturnya dengan ukuran yang sama dengan tubuh dan teks paragraf Anda, Anda mungkin terkejut dengan tidak nyaman tentang bagaimana browser membuatnya.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, masukan, pilih, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Ini juga bagus untuk memberikan kutipan Anda (BLOCKQUOTE dan Q), akronim, dan singkatan sedikit gaya ekstra, sehingga mereka lebih menonjol:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kursor: bantuan; border-bottom: 1px berlari; }Tautan dan Gambar
Tautan mudah dikelola dan diubah dari teks bergaris biru terang yang disebutkan sebelumnya. Saya lebih suka agar tautan saya tetap digarisbawahi, tetapi jika Anda lebih suka dengan cara yang berbeda Anda dapat mengatur opsi ini secara terpisah. Saya juga tidak memasukkan warna dalam style sheet master, karena itu tergantung pada desain.
a, a: link, a: visited, a: active, a: hover {text-decoration: garis bawah; }Dengan gambar, penting untuk mematikan batas. Meskipun sebagian besar browser tidak menampilkan perbatasan di sekitar gambar polos, saat gambar ditautkan, peramban akan mengaktifkan batas. Untuk memperbaiki ini:
img {border: none; }Meja
Meskipun tabel tidak lagi digunakan untuk keperluan tata letak, situs Anda tetap dapat menggunakannya untuk data tabluar aktual. Ini adalah penggunaan baik dari tabel HTML. Kami sudah memastikan bahwa ukuran teks default sama untuk sel tabel Anda, tetapi ada beberapa gaya lain yang harus Anda tetapkan sehingga tabel Anda tetap sama:
tabel {margin: 0; padding: 0; border: none; }Formulir
Seperti dengan elemen lain, Anda harus membersihkan margin dan padding di sekitar formulir Anda. Hal lain yang saya suka lakukan adalah menulis ulang tag form sebagai " inline " sehingga tidak menambah ruang ekstra di mana Anda menempatkan tag dalam kode. Seperti elemen teks lainnya, saya mendefinisikan informasi font untuk pilih, textarea, dan masukan di atas, sehingga sama dengan sisa teks saya.
bentuk {margin: 0; padding: 0; display: inline; }Itu juga ide yang baik untuk mengubah kursor untuk label Anda. Ini membantu orang untuk melihat bahwa label akan melakukan sesuatu ketika mereka mengkliknya.
label {kursor: penunjuk; }Kelas Umum
Untuk bagian stylesheet master ini, Anda harus menentukan kelas yang masuk akal bagi Anda. Ini adalah beberapa kelas yang paling sering saya gunakan. Perhatikan bahwa mereka tidak disetel ke elemen tertentu, sehingga Anda dapat menetapkannya ke apa pun yang Anda perlukan:
.clear {clear: keduanya; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: kiri; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-kanan: otomatis; } / * ingat untuk mengatur lebar * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: garis bawah; } .noindent {margin-left: 0; padding-kiri: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: tidak ada; }Ingat bahwa karena kelas-kelas ini ditulis sebelum gaya lain dan mereka hanya kelas, mereka mudah diganti dengan sifat gaya yang lebih spesifik yang terjadi nanti dalam kaskade . Jika Anda menemukan bahwa Anda menetapkan kelas umum pada elemen dan tidak berpengaruh, Anda harus memeriksa untuk memastikan bahwa tidak ada gaya lain di salah satu stylesheet nanti yang memengaruhi elemen yang sama.
Seluruh Master Stylesheet
/ * Default Global * / html, body {margin: 0px; padding: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Judul * / 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, masukan, pilih, 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: bantuan; border-bottom: 1px berlari; } kecil {ukuran font: .85em; } besar {font-size: 1.2em; } / * Tautan dan Gambar * / a, a: tautan, a: dikunjungi, a: aktif, a: hover {text-decoration: garis bawah; } img {border: none; } / * Tabel * / tabel {margin: 0; padding: 0; border: none; } / * Formulir * / bentuk {margin: 0; padding: 0; display: inline; } label {kursor: penunjuk; } / * Kelas Umum * / .clear {clear: keduanya; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: kiri; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-kanan: otomatis; } / * ingat untuk mengatur lebar * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: garis bawah; } .noindent {margin-left: 0; padding-kiri: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: tidak ada; }Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 10/6/17