Contoh Komentar CSS - Cara Mengomentari CSS

Komentar digunakan di CSS untuk menjelaskan blok kode atau untuk membuat perubahan sementara selama pengembangan. Kode yang dikomentari tidak dijalankan.

Baik komentar tunggal dan banyak baris di CSS dimulai dengan /*dan diakhiri dengan */, dan Anda dapat menambahkan komentar ke stylesheet sebanyak yang Anda suka. Sebagai contoh:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Anda juga dapat membuat komentar Anda lebih mudah dibaca dengan menatanya:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Mengatur CSS dengan komentar

Dalam proyek yang lebih besar, file CSS dapat bertambah besar dengan cepat dan menjadi sulit untuk dipelihara. Akan sangat membantu untuk mengatur CSS Anda menjadi beberapa bagian yang berbeda dengan daftar isi untuk mempermudah menemukan aturan tertentu di masa mendatang:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Sedikit lebih banyak tentang CSS: Sintaks dan Selektor CSS

Saat kita berbicara tentang sintaks CSS, kita berbicara tentang bagaimana hal-hal ditata. Ada aturan tentang apa yang terjadi di mana, sehingga Anda dapat menulis CSS secara konsisten dan program (seperti browser) dapat menafsirkannya dan menerapkannya ke halaman dengan benar.

Ada dua cara utama untuk menulis CSS.

CSS sebaris

Spesifikasi tentang Kekhususan CSS: Trik CSS

CSS sebaris menerapkan gaya ke satu elemen dan turunannya, sampai gaya lain yang menggantikan gaya pertama ditemukan.

Untuk menerapkan CSS sebaris, tambahkan atribut "style" ke elemen HTML yang ingin Anda ubah. Di dalam tanda kutip, sertakan daftar pasangan kunci / nilai yang dipisahkan titik koma (masing-masing dipisahkan oleh titik dua) yang menunjukkan gaya untuk disetel.

Berikut contoh CSS sebaris. Kata “Satu” dan “Dua” akan memiliki warna latar belakang kuning dan warna teks merah. Kata "Tiga" memiliki gaya baru yang menggantikan gaya pertama, dan akan memiliki warna latar belakang hijau dan warna teks cyan. Dalam contoh, kami menerapkan gaya ke tag, tetapi Anda dapat menerapkan gaya ke elemen HTML apa pun.

 One Two Three 

CSS internal

Meskipun menulis gaya sebaris adalah cara cepat untuk mengubah satu elemen, ada cara yang lebih efisien untuk menerapkan gaya yang sama ke banyak elemen halaman sekaligus.

CSS internal memiliki gayanya yang ditentukan di tag, dan ini disematkan di tag.

Berikut adalah contoh yang memiliki efek serupa seperti contoh "sebaris" di atas, kecuali CSS telah diekstraksi ke areanya sendiri. Kata "Satu" dan "Dua" akan cocok dengan divpemilih dan berupa teks merah dengan latar belakang kuning. Kata "Tiga" dan "Empat" akan cocok dengan divpemilih juga, tetapi mereka juga cocok dengan .nested_divselektor yang berlaku untuk setiap elemen HTML yang mereferensikan kelas itu. Pemilih yang lebih spesifik ini menimpa yang pertama, dan mereka akhirnya muncul sebagai teks cyan dengan latar belakang hijau.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Pemilih yang ditunjukkan di atas sangat sederhana, tetapi bisa menjadi sangat rumit. Misalnya, mungkin untuk menerapkan gaya hanya ke elemen bertingkat; yaitu, elemen yang merupakan anak dari elemen lain.

Berikut adalah contoh di mana kami menentukan gaya yang seharusnya hanya diterapkan ke divelemen yang merupakan turunan langsung dari divelemen lain . Hasilnya adalah "Dua" dan "Tiga" akan muncul sebagai teks merah dengan latar belakang kuning, tetapi "Satu" dan "Empat" tidak akan terpengaruh (dan kemungkinan besar teks hitam dengan latar belakang putih).

 div > div { color: red; background: yellow; } One Two Three Four 

CSS Eksternal

Semua gaya memiliki dokumennya sendiri yang ditautkan di tag. Ekstensi dari file yang ditautkan adalah.css