Apa's perbedaan antara <div class="">
dan <div id="">
ketika datang untuk CSS? Apakah baik-baik saja untuk menggunakan <div id="">
?
Saya melihat berbagai pengembang melakukan hal ini di kedua cara, dan sejak saya'm otodidak, saya've tidak pernah benar-benar mengetahuinya.
id
harus unik di mana sebagai kelas
dapat diterapkan untuk banyak hal. Dalam CSS, id ini terlihat seperti
#elementIDdan
kelasunsur-unsur yang terlihat seperti
.someClass`
Secara umum, penggunaan id
setiap kali anda ingin merujuk ke elemen tertentu dan kelas
ketika anda memiliki sejumlah hal yang semuanya sama. Misalnya, umum id
elemen adalah hal-hal seperti header
, footer
, sidebar
. Umum kelas
elemen adalah hal-hal seperti highlight
atau eksternal-link
.
It's merupakan ide yang baik untuk membaca tentang cascade dan memahami prioritas yang ditetapkan untuk berbagai penyeleksi: http://www.w3.org/TR/CSS2/cascade.html
Yang paling dasar didahulukan anda harus memahami, bagaimanapun, adalah bahwa id
penyeleksi didahulukan dari kelas
penyeleksi. Jika anda memiliki ini:
<p id="intro" class="foo">Hello!</p>
dan:
#intro { color: red }
.foo { color: blue }
Teks akan menjadi merah karena id
pemilih harus didahulukan dari kelas
pemilih.
Mungkin analogi ini akan membantu memahami perbedaan:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
Mahasiswa ID kartu yang berbeda. Ada dua mahasiswa di kampus akan memiliki mahasiswa yang sama ID kartu. Namun, banyak siswa dapat dan akan berbagi setidaknya satu Kelas dengan satu sama lain.
It's baik-baik saja untuk menempatkan beberapa siswa di bawah satu Kelas judul, seperti Biologi. Tapi itu's tidak pernah diterima untuk menempatkan beberapa siswa di bawah satu mahasiswa ID.
Ketika memberikan Peraturan lebih dari sekolah sistem interkom, anda dapat memberikan Peraturan ke Kelas:
"Besok, semua siswa memakai baju merah ke kelas Biologi."
.Biology {
color: red;
}
Atau anda dapat memberikan aturan-aturan Tertentu Siswa, dengan memanggil-nya yang unik **ID:
"Jonathan Sampson adalah dengan mengenakan kemeja hijau besok."
#JonathanSampson {
color: green;
}
Dalam hal ini, Jonathan Sampson menerima dua perintah: satu sebagai mahasiswa di kelas Biologi, dan lain-lain sebagai persyaratan langsung. Karena Jonathan diberitahu secara langsung, melalui atribut id, untuk memakai baju hijau, ia akan mengabaikan permintaan sebelumnya untuk memakai kemeja merah.
Lebih spesifik penyeleksi menang.
Perbedaan sederhana antara keduanya adalah bahwa sementara kelas yang dapat digunakan berulang kali pada sebuah halaman, ID hanya dapat digunakan sekali per halaman. Oleh karena itu, adalah tepat untuk menggunakan ID pada elemen div yang menandai konten pada laman utama, karena hanya akan ada satu konten utama bagian. Sebaliknya, anda harus menggunakan sebuah kelas untuk mengatur baris bergantian warna di atas meja, karena mereka adalah dengan definisi yang akan digunakan lebih dari sekali.
Id adalah alat yang sangat kuat. Sebuah elemen dengan ID dapat menjadi target dari bagian JavaScript yang memanipulasi elemen atau isinya dalam beberapa cara. Atribut ID dapat digunakan sebagai target dari sebuah link internal, mengganti tag anchor dengan nama atribut. Akhirnya, jika anda membuat Id yang jelas dan logis, mereka dapat berfungsi sebagai semacam "self dokumentasi" dalam dokumen. Misalnya, anda tidak selalu perlu untuk menambahkan komentar sebelum blok yang menyatakan bahwa sebuah blok kode akan mengandung konten utama jika tag pembuka blok memiliki ID, mengatakan, "main", "header", "footer", dll.
Id harus unik di seluruh halaman.
Sebuah kelas dapat berlaku untuk banyak elemen.
Kadang-kadang, itu's merupakan ide yang baik untuk menggunakan id.
Di sebuah halaman, anda biasanya memiliki satu footer, satu header...
Maka footer dapat menjadi sebuah div dengan id
<div id="footer" class="...">
dan masih memiliki kelas
A KELAS harus digunakan untuk beberapa elemen yang anda ingin gaya yang sama untuk. An ID harus untuk elemen yang unik. Melihat ini tutorial.
Anda harus merujuk ke standar W3C jika anda ingin menjadi yang ketat konformis, atau jika anda ingin halaman anda untuk menjadi divalidasi dengan standar.
Id yang unik. Kelas aren't. Elemen juga dapat memiliki beberapa kelas. Juga kelas dapat ditambahkan dan dihapus secara dinamis untuk sebuah elemen.
Di mana saja anda dapat menggunakan ID anda bisa menggunakan kelas sebagai gantinya. Sebaliknya adalah tidak benar.
Konvensi ini tampaknya akan menggunakan Id untuk elemen halaman yang ada di setiap halaman (seperti "navbar" atau "menu") dan kelas-kelas untuk segala sesuatu yang lain tapi ini hanya konvensi dan anda'll menemukan berbagai varians dalam penggunaan.
Salah satu perbedaan lain adalah bahwa untuk form input elemen, <label>
elemen referensi sebuah field dengan ID sehingga anda perlu menggunakan Id jika anda're akan menggunakan <label>
.
Dalam tahun-tahun berlalu Id juga disukai karena mereka're mudah diakses di Javascript (getElementById). Dengan munculnya jQuery dan Javascript framework ini cukup banyak non-isu sekarang.
Kelas-kelas seperti kategori. Banyak elemen HTML dapat termasuk ke dalam kelas, dan sebuah elemen HTML dapat memiliki lebih dari satu kelas. Kelas yang digunakan untuk menerapkan gaya umum atau gaya yang dapat diterapkan di beberapa elemen HTML.
Id pengenal. Mereka're unik; tidak ada orang lain yang diizinkan untuk memiliki ID yang sama. Id yang digunakan untuk menerapkan gaya yang unik untuk sebuah elemen HTML.
Saya menggunakan Id dan kelas dalam mode ini:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
Dalam contoh ini, header dan bagian isi dapat ditata melalui #header dan #isi. Setiap bagian dari konten yang dapat diterapkan gaya umum melalui #isi .bagian. Hanya untuk iseng, saya menambahkan "khusus" kelas untuk bagian tengah. Misalkan anda ingin bagian tertentu untuk memiliki gaya khusus. Hal ini dapat dicapai dengan .kelas khusus, namun bagian yang masih mewarisi gaya umum dari #isi .bagian.
Ketika saya melakukan JavaScript atau CSS pengembangan, saya biasanya menggunakan Id untuk mengakses atau memanipulasi yang sangat spesifik elemen HTML, dan saya menggunakan kelas untuk mengakses/menerapkan gaya untuk berbagai elemen.
CSS selector ruang benar-benar memungkinkan untuk bersyarat id-style:
h1#my-id {color:red}
p#my-id {color:blue}
akan membuat seperti yang diharapkan. Kenapa kau melakukan ini? Kadang-kadang IDs yang dihasilkan secara dinamis, dll. Lebih lanjut digunakan untuk membuat judul yang berbeda berdasarkan tingkat tinggi ID tugas:
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
Secara pribadi, saya lebih suka lagi classname penyeleksi:
body#list-page .title-block > h1 {font-size:56px}
seperti yang saya temukan menggunakan nested Id untuk membedakan pengobatan yang akan sedikit sesat. Hanya tahu bahwa sebagai pengusaha di Sass/SCSS dunia mendapatkan tangan mereka pada hal ini, bersarang Id menjadi norma.
Akhirnya, ketika datang ke pemilih kinerja dan didahulukan, ID cenderung menang. Ini adalah keseluruhan subjek lain.
Ketika menerapkan CSS, menerapkannya ke kelas dan mencoba untuk menghindari sebanyak yang anda bisa untuk id. ID hanya boleh digunakan di JavaScript untuk mengambil elemen atau untuk acara apapun mengikat.
Kelas harus digunakan untuk menerapkan CSS.
Kadang-kadang anda harus menggunakan kelas untuk acara mengikat. Dalam kasus tersebut, cobalah untuk menghindari kelas yang sedang digunakan untuk menerapkan CSS dan agak menambahkan kelas baru yang doesn't memiliki CSS yang sesuai. Ini akan datang untuk membantu ketika anda perlu untuk mengubah CSS untuk setiap kelas atau mengubah nama kelas CSS semua bersama-sama untuk setiap elemen.
Setiap elemen dapat memiliki sebuah class atau id.
Kelas ini digunakan untuk referensi jenis tertentu dari layar, misalnya, anda mungkin memiliki sebuah class css untuk div yang mewakili jawaban untuk pertanyaan ini. Karena akan ada banyak jawaban, beberapa divs akan membutuhkan gaya yang sama dan anda akan menggunakan kelas.
Id mengacu pada hanya satu elemen, misalnya terkait di bagian kanan mungkin memiliki gaya tertentu untuk tidak kembali di tempat lain, itu akan menggunakan id.
Secara teknis anda dapat menggunakan kelas-kelas untuk semua itu, atau membaginya secara logis. Anda tidak bisa, bagaimanapun, menggunakan kembali id's untuk beberapa elemen.
Kelas adalah untuk menerapkan gaya anda untuk sekelompok elemen. ID styles hanya berlaku untuk elemen dengan ID tersebut (seharusnya hanya ada satu). Biasanya anda menggunakan kelas-kelas, tetapi jika ada's satu-off anda dapat menggunakan Id (atau hanya menempel gaya lurus ke elemen).
Dalam lanjutan pengembangan ids kita pada dasarnya dapat menggunakan JavaScript.
Untuk berulang tujuan, kelases berguna bertentangan dengan ids yang seharusnya menjadi unik.
Di bawah ini adalah contoh yang menggambarkan ekspresi di atas:
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
Sekarang anda dapat melihat di sini kotak
dan box1
adalah dua (2) berbeda <div>
elemen, tetapi kita dapat menerapkan kotak
dan bg-warna-merah
kelas untuk mereka berdua.
Konsep pewarisan dalam OOP bahasa.
div id tidak dapat digunakan kembali dan hanya boleh diterapkan untuk salah satu elemen dari HTML sambil div class dapat ditambahkan ke beberapa elemen.
id memiliki kepentingan yang lebih besar jika keduanya diterapkan untuk unsur yang sama dan memiliki gaya yang saling bertentangan, gaya id akan diterapkan.
Gaya elemen selalu merujuk div class dengan meletakkan . (titik) di depan nama-nama mereka saat div id class disebut dengan memberi tanda # (pagar) di depan nama mereka.
Contoh :-
kelas
<style>
deklarasi.merah-background { background-color: red; }
id di
<style>
deklarasi -#biru-background {background-color: blue;}
<div class="red-latar belakang" id="biru-latar belakang">Halo</div>
di Sini latar belakang akan dalam warna biru