Styles template blog dengan CSS Reset

CSS

Mengatur ulang gaya template blogger Anda, sering disebut sebagai CSS Reset atau Reset CSS adalah proses ulang (atau lebih tepatnya - pengaturan) gaya dari semua elemen ke nilai dasar sehingga menghindari perbedaan lintas-browser karena built-in pengaturan gaya default. Dengan mengatur ulang style blog Anda, Anda menghindari default ke gaya built-in browser, yang berbeda dari browser ke browser.

CSS Reset avoids menghindari inkonsistensi peramban

Misalnya, Anda menggunakan tag anchor <a> dalam dokumen HTML Anda. Biasanya, browser seperti Internet Explorer dan Firefox akan membuat itu di beri style biru dan digarisbawahi.

Tapi lima tahun dari sekarang, seseorang memutuskan untuk merilis browser baru (sebut saja UltraBrowser) dan mereka memutuskan bahwa mereka tidak suka biru dan link digarisbawahi - jadi bukannya mereka mengatur gaya default tag <a> merah dan boldfaced. Jika Anda selalu menetapkan nilai dasar untuk elemen <a> Anda, maka dijamin bahwa itu akan selalu sama, terlepas dari apa UltraBrowser berpikir elemen <a> akan terlihat sama.

Reset ke tempat semuanya dimulai

Konsep CSS reset pertama kali kembali dibahas secara resmi ketika dinosaurus masih berkeliaran di internet (2004 tepatnya) oleh Andrew Krespanis. Dalam artikelnya, ia menyarankan menggunakan pemilih yang universal (*) pada awal file CSS Anda untuk memilih semua elemen dan memberi mereka nilai 0 untuk margin dan padding, seperti:

* {
  margin: 0;
  padding: 0;
}

Tindakan pemilih yang universal seperti pencarian wildcard, mirip dengan pencocokan ekspresi reguler dalam pemrograman. Karena dalam kasus ini, * ini tidak didahului oleh pemilih lain, semua elemen (dalam teori - beberapa browser tidak sepenuhnya mendukung itu) adalah pertandingan dan karena itu semua margin dan paddings dari semua elemen dihapus (sehingga kita menghindari jarak perbedaan yang ditunjukkan).

Menerapkan pemilih margin / padding reset universal untuk contoh kita sebelumnya, sekarang kita menghapus semua spasi konsisten antara semua browser (dengan kata lain, kita tidak membuat browser berpikir untuk kita, kita menunjukkan kepada mereka siapa yang jadi bos).

Contoh: Menerapkan pemilih margin / Padding reset yang universal

Anda dapat melakukannya dengan beberapa cara - Anda dapat menempatkan margin (atau padding) di awal atau di atas paragraf Anda, atau keduanya. Anda dapat menggunakan ems sebagai unit atau piksel atau persentase.

Yang penting adalah bahwa kita memilih cara browser akan memunculkan itu. Sebagai contoh kita, saya memilih untuk menambahkan margin (bukan padding) baik di atas paragraf dan di bagian bawah - tapi itu pilihan saya, Anda mungkin ingin melakukannya secara berbeda.

Inilah yang saya gunakan:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }

Mendeklarasikan aturan gaya setelah pemilih universal.

Note: Contoh yang saya gunakan untuk diskusi adalah contoh sederhana. Jika Anda hanya menggunakan paragraf untuk halaman web Anda dan tidak ada unsur-unsur lain, Anda tidak akan ingin me-reset margin Anda ke 0 menggunakan pemilih yang universal hanya untuk menyatakan aturan gaya yang tepat setelah untuk paragraf Anda. Kita akan membahas ini lebih lengkap bersama dengan praktik terbaik lainnya nanti di bawah halaman.

mari kita telusuri contoh. Saya menggunakan Eric Meyer CSS reset Reloaded verbatim dalam contoh setelah menyatakan aturan gaya untuk margin <p> saya.

Menghindari redundansi dengan Reset CSS dan deklarasi gaya berikutnya

Alasan lain saya tidak suka memiliki stylesheet terpisah untuk reset CSS saya adalah bahwa hal itu dapat menyebabkan redudansi dengan aturan style lain setelah itu. Ini praktek yang baik untuk tidak mengulangi gaya Anda, dan meskipun kadang-kadang tidak dapat dihindari (karena Anda malas seperti saya), Anda harus melakukan upaya untuk mencoba. Kembali ke Eric Meyer CSS reset Reloaded seperangkat aturan, ia memberikan nilai default untuk line-height, warna, dan latar belakang dari elemen body seperti:

body {
  line-height: 1;
  color: black;
  background: white;
  }

Jika Anda sudah tahu bahwa gaya atribut tubuh (misalnya):

     background-color: # cccccc
     color: # 996633
     dan Anda ingin ubin gambar latar belakang horizontal

tidak ada gunanya menyatakan CSS pemilih lain untuk elemen body nanti di dokumen - Anda harus mengganti bagian CSS reset sebagai berikut:

body {
  line-height: 1;
  color: #996633
  background:#ccc url(your-tiled-image.gif) repeat-x top left;
  }

Jangan takut untuk menggunakan penilaian Anda sendiri. Tweak, re-struktur, menghapus, dan menambahkan hal-hal seperti yang Anda lihat cocok dan karena berkaitan dengan gaya tertentu.

Eric Meyer menekankan hal ini dalam diskusi tentang CSS reset Reloaded dengan pernyataan:

[...] Itu jauh dari titik di sini: bahwa ini bukan kasus "setiap orang harus menggunakan gaya ini dalam cara tertentu tanpa perubahan".

Demikian semoga bermanfaat...

Artikel Terkait

  • Membuat link berefek Nudge
    Dengan semakin berkembangnya jQuery dan CSS3 para blogger terus menciptakan hal baru yang terbilang menarik, salah satunya adalan link nudge ini. Link nudge adalah link yang berefek ketika mouse menyorotinya maka link tersebut akan bergeser. trik ini banyak di gunakan para blogger tidak terkecuali juga oleh master taufik nurohman, di bawah ini…
  • Pengertian Selector, Property dan Value
    Setelah mengetahui cara menginput kode CSS ke halaman HTML, saatnya untuk memahami kode CSS itu sendiri. Kali ini kita akan membahas inti dari CSS, yakni Pengertian Selector, Property dan Value pada CSS. Pengertian Selector CSS Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘men…
  • Input Kode CSS ke Halaman HTML
    Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets. Metode Inline Style Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:…
  • Cara Penulisan Kode CSS
    Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri. Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih me…
  • Pengertian CSS
    CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini. Pengertian CSS Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah …
  • Prioritas Selector CSS (Cascading)
    Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading. Pengertian Cascading dari CSS CSS adalah singkatan dari Cascading Style Sheet, dimana ca…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...