Komen digunakan dalam CSS untuk menjelaskan sekatan kod atau untuk membuat perubahan sementara semasa pengembangan. Kod yang dikomen tidak dilaksanakan.
Komen tunggal dan berbilang baris dalam CSS bermula dengan /*dan diakhiri */, dan anda boleh menambahkan seberapa banyak komen ke helaian gaya 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 boleh menjadikan komen anda lebih mudah dibaca dengan mencantumkannya:
/* *** * 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. *** */Menyusun CSS dengan komen
Dalam projek yang lebih besar, fail CSS dapat tumbuh dengan cepat dan menjadi sukar untuk dijaga. Adalah berguna untuk mengatur CSS anda ke dalam bahagian-bahagian yang berbeza dengan senarai isi untuk memudahkan mencari peraturan tertentu di masa hadapan:
/* * 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 mengenai CSS: CSS Syntax and Selectors
Apabila kita bercakap mengenai sintaks CSS, kita bercakap tentang bagaimana segala sesuatu disusun. Terdapat peraturan mengenai apa yang berlaku di mana, keduanya sehingga anda dapat menulis CSS secara konsisten dan program (seperti penyemak imbas) dapat menafsirkannya dan menerapkannya ke halaman dengan betul.
Terdapat dua cara utama untuk menulis CSS.
CSS sebaris
Spesifik mengenai Kekhususan CSS: Trik CSS
Inline CSS menerapkan gaya untuk satu elemen dan anak-anaknya, sehingga gaya lain yang mengatasi yang pertama ditemui.
Untuk menerapkan CSS sebaris, tambahkan atribut "style" ke elemen HTML yang ingin anda ubah. Petikan dalam, sertakan senarai pasangan kunci / nilai yang dipisahkan dengan titik koma (masing-masing dipisahkan oleh titik dua) yang menunjukkan gaya untuk ditetapkan.
Berikut adalah contoh CSS sebaris. Kata-kata "Satu" dan "Dua" akan memiliki warna latar belakang kuning dan warna teks merah. Kata "Three" mempunyai gaya baru yang menggantikan yang pertama, dan akan memiliki warna latar hijau dan warna teks cyan. Dalam contohnya, kami menerapkan gaya pada tag, tetapi Anda dapat menerapkan gaya ke elemen HTML apa pun.
One Two Three CSS dalaman
Walaupun menulis gaya sebaris adalah cara cepat untuk mengubah satu elemen, ada cara yang lebih cekap untuk menerapkan gaya yang sama pada banyak elemen halaman sekaligus.
CSS dalaman mempunyai gaya yang ditentukan dalam tag, dan tertanam dalam tag.
Berikut adalah contoh yang mempunyai kesan yang serupa dengan contoh "sebaris" di atas, kecuali CSS telah diekstrak ke kawasannya sendiri. Kata-kata "Satu" dan "Dua" akan sesuai dengan divpemilih dan berwarna merah pada latar belakang kuning. Kata-kata "Tiga" dan "Empat" juga akan cocok dengan divpemilih, tetapi juga cocok dengan .nested_divpemilih yang berlaku untuk elemen HTML yang merujuk kelas tersebut. Pemilih yang lebih spesifik ini menggantikan yang pertama, dan akhirnya muncul sebagai teks sian dengan latar hijau.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four Pemilih yang ditunjukkan di atas sangat mudah, tetapi boleh menjadi agak rumit. Sebagai contoh, mungkin menerapkan gaya hanya pada elemen bersarang; iaitu elemen yang merupakan anak dari elemen lain.
Inilah contoh di mana kami menentukan gaya yang hanya boleh diterapkan pada divelemen yang merupakan anak langsung dari divelemen lain . Hasilnya adalah bahawa "Dua" dan "Tiga" akan muncul sebagai teks merah pada latar belakang kuning, tetapi "Satu" dan "Empat" akan tetap tidak terpengaruh (dan kemungkinan besar teks hitam pada latar belakang putih).
div > div { color: red; background: yellow; } One Two Three Four CSS luaran
Semua gaya mempunyai dokumen sendiri yang dihubungkan dalam tag. Sambungan fail yang dipautkan adalah.css