Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menentukan susunan kelas menggunakan CSS?
Bagaimana untuk menentukan susunan kelas menggunakan CSS?
- 王林ke hadapan
- 2023-08-28 22:01:021303semak imbas
Cascading Style Sheets (CSS) ialah komponen yang berkuasa dalam pembangunan web yang membolehkan pembangun menentukan penampilan visual tapak web mereka. Dalam CSS, kelas berfungsi sebagai pemilih yang membolehkan kami menggunakan berbilang gaya khusus pada elemen. Anda juga boleh menggunakan berbilang kelas untuk elemen tertentu.
Walau bagaimanapun, apabila anda menggunakan berbilang kelas pada elemen, adalah perlu untuk mengetahui cara menentukan susunan pemaparan kelas ini untuk mengelakkan percanggahan dan hasil yang tidak dijangka. Dalam artikel ini, kita akan membincangkan cara berbeza untuk menentukan susunan kelas dalam CSS, serta kepentingan kekhususan dan peraturan bertingkat untuk membantu menentukan keutamaan.
Apakah kelas dalam CSS?
Dalam CSS, kelas ialah pemilih yang digunakan untuk menggunakan set gaya tertentu pada elemen HTML. Ia adalah alat berkuasa yang membolehkan kami mengumpulkan elemen bersama-sama dan mengekalkan konsistensi merentas berbilang elemen pada halaman web. Ia membolehkan kami menggunakan semula gaya CSS merentas banyak elemen tapak web yang besar.
Gunakan berbilang kelas untuk satu elemen
Jika anda menentukan set kelas dalam CSS, anda boleh menggabungkannya untuk elemen tertentu untuk menjadikannya unik dan menarik. Walau bagaimanapun, anda mesti menentukan susunan kelas supaya pengkompil menjalankan kod dengan lancar dan menyediakan output mengikut keperluan anda. Ini dilakukan melalui peraturan cascade dan specificity.
Turutan di mana kami mentakrifkan kelas dalam fail CSS digunakan untuk menentukan keutamaannya apabila berbilang kelas digunakan pada elemen. Ini kerana CSS adalah melata , yang bermaksud pengkompil membacanya dari terakhir hingga dan dari kanan ke kiri . Oleh itu, terakhir yang disebut dalam kod CSS mendapat keutamaan. Mari kita fahami ini dengan lebih baik dengan contoh.
Contoh
Andaikan anda mempunyai dua kelas yang ditentukan dalam fail CSS anda.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
Sejak .class2 diisytiharkan selepas .class1 dalam kod CSS, class2 mempunyai keutamaan. Jadi apabila kita menggunakan class1 dan class2 pada elemen div, elemen div digayakan terutamanya berdasarkan class2.
Walau bagaimanapun, anda boleh melihat bahawa atribut yang tidak disebut dalam class2 tetapi hadir dalam class1 digunakan pada elemen div. Sama seperti text-align: center disebut dalam class1, tetapi tidak dalam class2. Tetapi elemen div terakhir masih sejajar di tengah. Ini kerana satu-satunya sifat dalam class1 akan digunakan pada elemen seperti sedia ada, namun, untuk sifat yang sama dalam kedua-dua kelas, pengkompil menggunakan peraturan cascading untuk menjadikannya.
Tempahan kelas
Susunan kelas yang ditulis dalam HTML tidak menentukan keutamaan. Pertimbangkan contoh berikut
Contoh
Andaikan anda mentakrifkan dua kelas yang serupa dengan contoh di atas. Walau bagaimanapun, anda telah menukar susunan kelas dalam kod HTML. Apa yang anda fikir kesudahannya? Adakah ia akan berbeza dari sebelumnya? Jom tengok.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
Seperti yang anda lihat, hasilnya tidak berubah. Gaya akan digunakan hanya mengikut susunan kelas yang disebut dalam CSS.
CSS Penggunaan peraturan penting
!Dalam CSS, peraturan !penting membolehkan pembangun mengatasi susunan gaya bertingkat dan memastikan gaya khusus yang diperlukan mendapat keutamaan tertinggi.
tatabahasa
selector{
property: value !important;
}
Jika anda menggunakan kata kunci !penting di sebelah sifat CSS, pengkompil akan memastikan ia digunakan pada elemen itu, tanpa mengira sebarang susunan gaya tertentu. Mari kita lihat satu contoh.
Masukkan
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
Contoh
Dalam contoh berikut, memandangkan b hadir sebelum a, gaya akan digunakan berdasarkan b elemen div terakhir . Walau bagaimanapun, warna teks digunakan seperti yang ditulis dalam kelas "a" , yang bermaksud warna teks ialah merah #🎜 🎜#. Ini kerana kami menggunakan kata kunci !penting dalam atribut color dalam kelas "a".
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
KESIMPULANDalam artikel ini, kami membincangkan lata dan peraturan kekhususan untuk menentukan susunan kelas dalam CSS apabila menggunakan berbilang kelas pada elemen tertentu. Kami juga membincangkan peraturan
!penting untuk mengatasi sebarang pesanan tertentu.
Atas ialah kandungan terperinci Bagaimana untuk menentukan susunan kelas menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!