Pembahasan kali ini adalah pengelompokan dan nesting dalam CSS, berikut penjelasannya dan pembahasannya, semoga anda dapat memahami apa yang kami sampaikan di bawah ini, baiklah simak penjelasannya.
Pengelompokan Dan Nesting dalam CSS
Dalam dookumen web yang di buat menggunakan syle kita dapat memformat berbagai aturan yang di buatnya menjadi makin ramping sesuai dengan keinginan kita. Adapun format untuk style CSS tersebut berupa :
1. Pengelompokan atau Grouping
Dalam Css kita mengenal adanya pengelompokan atau grouping, pengelompokan di sini berfungsi untuk mengelompokan berbagai selector ID atau Class yang memiliki nilai property yang sama. Anda dapat memberikan propety yang sama tersebut ke dalam sejumlah selector tanpa harus mengulang penulisannya dengan membagi selector-selector tersebut dengan koma (,).
Pengelompokan dalam CSS berfungsi untuk menyingkat berbagai penulisan dari aturan-aturan yang menyingkat berbagai penulisan dari aturan-aturan yang banyak hingga membentuk aturan baru yang jauh lebih singkat. Berikut ini adalah contoh mengelompokan tag yang memiliki nilai yang sama :
- <style type="text/css">
- p {background-color:yelow;}
- b {background-color:yelow;}
- i {background-color:yelow;}
- </style>
Dengan demikian, dalam pengelompokan menggunakan CSS penulisannya dapat di ringkas menjadi :
- <html>
- <head>
- <title>Pengelompokan tag</title>
- <style type="text/css">
- p, b, i {background-color: yelow;}
- </style>
- </head>
- <body>
- <p> pengelompokan dengan tag p</p>
- <b> pengelompokan dengan tag b</b>
- <i> pengelompokan dengan tag i</i>
- </body></html>
Maksud aturan di atas adalah CSS akan memberikan nilai p yang di dalam dokumen HTML seharusnya adalah format untuk membuat paragraf, namun juga memiliki nilai warna background-biru yang sama dengan tag b (bold atau tebal) dan i (italic atau miring) seperti terlihat browser Netscape berikut :
Bila kita menerapkan pengelompokan tersebut dalam selector class, ID dan tag scriptnya akan seperti berikut ini :
- <style type="text/css">
- p {font-family: Arial, Verdana;}
- .teks1 {font-family: Arial, Verdana;}
- #teks2 {font-family: Arial, Verdana;}
- </style>
Dengan demikian, dalam pengelompokan dengan CSS, penulisannya akan menjadi seperti script di bawah ini :
- <html>
- <head>
- <title>pengelompokan tag </title>
- <style>
- .teks, .title, #teks2 {font-family:verdana; background-color:yellow;}
- </style>
- </head>
- <body>
- <span class="teks">pengelompokan dengan tag p </span><br>
- <span class="title">pengelompokan dengan class teks1</span><hr>
- <div id="teks2">pengelompokan dengan class teks2</div>
- </body>
- </html>
Penampakannya akan terlihat seperti di bawah ini :
2. Nesting
CSS memiliki struktur bahasa yang baik sehingga dapat di manfaatkan untuk menyingkat style CSS agar lebih efisien dalam dokumen web yang di buat menggunakan CSS. Anda tidak membutuhkan class atau ID selector yang terlalu banyak untuk membuat sebuah dokumen web dengan bantuan CSS karena anda dapat menentukan property dari selector untuk di tempatkan dalam selector lain.
Contoh :
#atas {background-color: #ccc; padding: 2em}
#atas h1 {color: #ff0;}
#atas p {color: red; font-weight: bold;}
Dengan menghilangkan kebutuhan akan class atau ID yang cukup banyak tersebut, anda dapat menyingkatnya dengan menggunakan cara nesting sehingga dalam penulisaanya akan menjadi lebih singkat seperti berikut :
- <div id="atas">
- <h1> menyingkat CSS dengan nestingM</h1>
- <p> penyingkatan ini menggunakan cara nesting </p>
- <p> mudah sekali ya .. </p>
- </div>
Dengan cara ini, memisahkan selector dengan spasi dapat berarti bahwa h1 berada dalam ID atas, yang memiliki nilai warna latar #ccc dan warna isi #ff0 dalam h1, serta penambahan tag p dalam ID atas yang berarti merah dan tebal.
Cara ini dapat di terapkan lebih dari dua tingkatan seperti di dalam dan di dalamnya ID atau class tertentu yang anda inginkan hingga di akhiri dengan penutup </div> seperti contoh di atas.Adapun script keseluruhan jika anda menggunakan nesting dalam HTML bisa anda lihat di bawah ini :
- <html>
- <title>Nesting</title>
- <head>
- <style>
- #atas {background-color: #ccc; padding:2em}
- #atas h1 {color: #ff0;}
- #atas p {color: red: font-weight: bold;}
- </style>
- </head>
- <body>
- <div id="atas">
- <h1> menyingkat CSS dengan nesting </h1>
- <p> penyingkatan ini menggunakan cara nesting</p>
- <p> mudah sekali ya..</p>
- <div>
- </body?
- </html>
Contoh Script yang di atas bila di eksekusi akan seperti di bawah ini :
Nah itu lah pembahasan mengenai pengelopokan dan nesting dalam css, semoga artikel ini dapat membantu anda dan bermafaat khusunya bagi yang membaca dan juga untuk penulis, sampai di sini pembahasannya, Salam Sukai Penuli
0 Komentar