3 Teknik CSS Reset
3 Teknik CSS Reset – CSS Reset adalah sebuah teknik untuk mengatur nilai default dari setiap elemen HTML yang akan di tampilkan pada halaman browser terutama untuk property css margin dan padding.
Pada dasarnya setiap elemen HTML mempunyai nilai default buat property padding & margin. Seperti body, p, h1, h2, ul, li & lain sebagainya. Karenanya sebelum kita membuat sebuah halaman website, ada baiknya kita melakukan reset terlebih dahulu dalam laman HTML kita. Reset CSS ini berfungsi jua supaya kita mempunyai kendali penuh dalam laman website yang akan kita kerjakan atau akan kita berikan modifikasi style.
Sintak HTML sebelum diberikan style CSS Reset:
<head> <meta charset="UTF-8"> <title>Reset CSS</title> <style> div { width: 300px; height: 300px; background-color: salmon; } </style> </head> <body> <div></div> <h1>Reset CSS</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam quas, natus quasi recusandae adipisci molestias laudantium ea consectetur autem vero tenetur possimus sed doloremque, saepe quae eveniet. Voluptatum blanditiis laudantium et, quam, animi enim veniam quas deleniti perferendis, cupiditate natus fugiat magni magnam reiciendis hic. Ducimus, consequuntur! Rem, veritatis. Temporibus nihil dolore mollitia dicta possimus nam obcaecati cumque commodi voluptas sequi, consequuntur aspernatur cum porro vel aliquid dignissimos pariatur, maxime voluptatibus sit dolorum quidem soluta? Tempore fugit libero, eveniet harum unde quas consequuntur, accusamus hic error officia ut repellendus nesciunt tenetur voluptatibus facilis culpa eum quaerat, cumque in quibusdam!</p> </body> </html>
Sintak HTML selesainya diberikan style CSS Reset
<head> <title>Reset CSS</title> <style> body, h1, p { margin: 0; padding: 0; } div { width: 300px; height: 300px; background-color: salmon; } </style> </head> <body> <div> </div> <h1> Reset CSS</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam quas, natus quasi recusandae adipisci molestias laudantium ea consectetur autem vero tenetur possimus sed doloremque, saepe quae eveniet. Voluptatum blanditiis laudantium et, quam, animi enim veniam quas deleniti perferendis, cupiditate natus fugiat magni magnam reiciendis hic. Ducimus, consequuntur! Rem, veritatis. Temporibus nihil dolore mollitia dicta possimus nam obcaecati cumque commodi voluptas sequi, consequuntur aspernatur cum porro vel aliquid dignissimos pariatur, maxime voluptatibus sit dolorum quidem soluta? Tempore fugit libero, eveniet harum unde quas consequuntur, accusamus hic error officia ut repellendus nesciunt tenetur voluptatibus facilis culpa eum quaerat, cumque in quibusdam!</body>
 |
| Contoh : Penggunaan CSS Reset |
Contoh diatas membuktikan bahwa body memiliki nilai default padding dan margin, karenanya letak kotak yang dibuat dan tampil di page browser tersebut, tidak inheren dalam bagian paling atas & bagian paling kiri browser. Perhatikan, terdapat sedikit jeda pinggir dibagian atas kotak, dan sebelah kiri kotak menggunakan laman browser. Lantaran hal tadi, kita perlu melakukan reset atas nilai default property margin dan padding menurut body tadi. Perhatikan gambar dibawahnya, sehabis body, h1, dan p diberikan CSS Reset, sekarang nilai default menurut padding & marginnya telah hilang, karenanya letak mereka menjadi padding & margin =0.
Untuk melakukan teknik reset ini, kita bisa memakai 3 teknik :
1. Reset CSS bisa dilakukan dengan melakukan Reset masing-masing elemen HTML. Namun dengan menggunakan cara ini, sangat tidak praktis, ketika kita menggunakan banyak elemen HTML pada halaman website yang kita buat. dan pastinya hal tersebut sangat merepotkan dan tidak efisien. Untuk contoh reset CSS per-elemen HTML silakan lihat contoh di atas.
2. Reset CSS bisa menggunakan selector universal ( * ). Namun dengan menggunakan teknik ini sangat berat, karena kekurangannya selector universal ( * ) tersebut, memberi margin dan padding ke semua elemen html meskipun yang tidak kita gunakan. Lihat contoh sintak dibawah ini :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Reset CSS</title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; background-color: salmon; } </style> </head> <body> <div></div> <h1>Reset CSS</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam quas, natus quasi recusandae adipisci molestias laudantium ea consectetur autem vero tenetur possimus sed doloremque, saepe quae eveniet. </p> </body> </html>
3. Reset CSS dengan menggunakan teknik seorang engineering yang bernama Erick Meyer. Sintak Reset CSS ini lebih praktis dan efisien dibanding dengan teknik sebelumnya. Untuk link sintak ini, silakan kunjungi Meyer Web dihttps://meyerweb.com/eric/tools/css/reset/
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Belum ada Komentar untuk "3 Teknik CSS Reset"
Posting Komentar