Asas CSSKekhususan dan Warisan

Dalam artikel ini, kami akan meneroka dua konsep CSS3 utama yang harus dikuasai oleh setiap pereka reka letak dan pembangun bahagian hadapan: kekhususan dan warisan. Asas-asas ini penting untuk memahami cara gaya digunakan dan cara mengawal gelagatnya dalam pelbagai elemen halaman kami.

Kekhususan

Kekhususan menentukan cara "khusus" seorang pemilih dalam menentukan gaya yang hendak digunakan. Ini dikira dengan nilai berangka berdasarkan jenis pemilih yang kami gunakan:

• Tag dan unsur pseudo: nilai 001
• Kelas, atribut dan kelas pseudo: nilai 010
• ID: nilai 100
• Gaya dalam talian: nilai 1000
• !penting: menimpa segala-galanya, jadi adalah disyorkan untuk mengelakkannya untuk mengelakkan melanggar kekhususan.

Contoh kekhususan:

Dalam kes ini, pengiraan kekhususan ialah 111, diperoleh dengan menambah:

h1 (label) = 001
.tajuk (kelas) = ​​010
#tajuk (ID) = 100
Jumlah = 111

Lebih tinggi nombor, lebih besar kekhususan, dan ini membolehkan satu pemilih mempunyai lebih berat daripada yang lain tanpa mengira susunan dalam helaian gaya (atau lata).

Nota: Lata akan berfungsi selagi kekhususan pemilih pada elemen yang sama adalah sama. Inilah sebabnya mengapa anda disyorkan untuk menggunakan kelas untuk memastikan kekhususan terurus dan mengelakkan konflik.

Terdapat alatan yang membantu kami menganalisis kekhususan dalam kod kami, contohnya:

- Penjana Graf Kekhususan CSS

Jika kita melihat lonjakan tinggi dalam graf alat ini, ini adalah petanda bahawa kekhususan mungkin diurus dengan buruk.

- Kalkulator Kekhususan

Hanya letakkan pemilih anda dan secara visual, anda akan dapat mengetahui sejauh mana kekhususannya bersamaan dengannya.

• Kod Visual Studio juga membolehkan anda mengetahui kekhususan pemilih anda. Anda hanya perlu meletakkan diri anda di atas pemilih yang ingin anda semak dan alat itu akan menunjukkan kepada anda betapa spesifiknya.

Warisan

Warisan dalam CSS ialah keupayaan elemen tertentu untuk "mewarisi" sifat daripada elemen yang mengandunginya. Ini bermakna beberapa gaya yang digunakan pada elemen bekas dihantar secara automatik kepada keturunannya.

Sebagai contoh, dalam kod berikut, elemen dalam

mewarisi gaya daripada teg h1, manakala di luar h1 tidak mewarisi mereka:

Harta yang biasa diwarisi:

• warna
• Semua sifat berkaitan fon (seperti keluarga fon, saiz fon, dsb.)

Nota: Pautan () tidak secara automatik mewarisi gaya warna daripada unsur induknya, kerana ia biasanya mempunyai gaya tersendiri secara lalai. Untuk menggunakan gaya yang diwarisi padanya, kita boleh menggunakan kelas tertentu atau nilai warisi.

Untuk memaksa pewarisan pada harta yang biasanya tidak memilikinya, nilai warisan:

digunakan

Dalam kes di mana kita mahu elemen mengabaikan harta yang diwarisi, kita boleh menetapkannya semula kepada nilai awalnya menggunakan paras:

Amalan dan Pertimbangan Baik dalam Kekhususan dan Pewarisan

1. Elakkan penggunaan ID yang berlebihan dalam pemilih: Walaupun ID mempunyai kekhususan yang tinggi, penggunaan berlebihan boleh menyebabkan CSS sukar untuk dikekalkan dan ditulis ganti. Adalah lebih baik untuk menggunakan kelas untuk memastikan kod lebih fleksibel.

2. Gunakan kelas untuk kebolehgunaan semula dan kebolehskalaan: Kelas membolehkan anda menggunakan gaya secara konsisten pada berbilang elemen. Pendekatan ini amat berguna dalam projek besar kerana ia meningkatkan kebolehselenggaraan.

3. Elakkan menggunakan !important apabila boleh: !important mengatasi semua kekhususan, tetapi boleh merumitkan penyelenggaraan kod dan menyebabkan konflik. Gunakannya hanya dalam situasi yang sangat khusus dan apabila benar-benar perlu.

4. Fahami lata dan aliran gaya: Lata (urutan gaya digunakan) masih penting. Jika dua pemilih mempunyai kekhususan yang sama, gaya yang paling hampir dengan penghujung helaian gaya akan digunakan. Tingkah laku ini boleh dimanfaatkan dalam gaya global dan khusus.

5. Pertimbangkan kesan reka letak yang diwarisi pada komponen: Apabila menggunakan warisan, pastikan unsur keturunan mendapat gaya yang diingini. Warisan tidak selalunya jelas dan perubahan pada bekas boleh menjejaskan berbilang elemen secara tidak dijangka.

6. Gunakan pemilih yang tersusun dengan baik untuk meningkatkan kebolehbacaan: Apabila menggunakan pemilih bersarang atau menurun, cuba kekalkan struktur yang jelas dan elakkan sarang yang berlebihan, yang boleh menjadikan kod lebih sukar dibaca dan ditulis ganti .

7. Optimumkan dengan alat analisis kekhususan: Terdapat alatan dan sambungan yang membantu anda menggambarkan dan menganalisis kekhususan pemilih anda, yang boleh berguna dalam projek yang kompleks. Ini juga membantu mengenal pasti puncak kekhususan yang mungkin memerlukan pemfaktoran semula.

Asas ini akan membolehkan anda mengawal cara gaya digunakan pada halaman anda, mencapai reka bentuk yang lebih bersih dan lebih profesional. Dalam artikel seterusnya, kami akan menyelidiki sifat penting CSS3 yang lain untuk meningkatkan lagi pemahaman dan pengendalian gaya dalam projek web.

Atas ialah kandungan terperinci Asas CSSKekhususan dan Warisan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!