Cascading Style Sheets (CSS) ialah teknologi asas web, membenarkan pembangun mengawal persembahan visual dokumen HTML. Walaupun sintaks CSS mungkin kelihatan mudah pada pandangan pertama, cara gaya digunakan dan diwarisi boleh menjadi sangat rumit. Memahami selok-belok ini adalah penting untuk menulis CSS yang cekap, boleh diselenggara dan boleh diramal.
Dalam panduan komprehensif ini, kami akan meneroka konsep lata dan warisan CSS.
Lata ialah algoritma yang menentukan peraturan CSS yang digunakan pada elemen apabila wujud berbilang peraturan yang bercanggah. Adalah penting untuk memahami cara lata berfungsi untuk menulis CSS yang berkelakuan seperti yang diharapkan. Lata mempertimbangkan beberapa faktor dalam susunan berikut:
Untuk menjadi lengkap, kami boleh menambah:
Mari kita pecahkan faktor yang mempengaruhi lata, mengikut keutamaan:
CSS boleh datang daripada tiga sumber berbeza:
Secara amnya, gaya pengarang lebih diutamakan daripada gaya pengguna, yang seterusnya mengatasi gaya ejen pengguna. Ini membolehkan pembangun menyesuaikan penampilan elemen sambil tetap menghormati pilihan pengguna apabila perlu.
Gaya yang digunakan terus pada elemen menggunakan atribut gaya mempunyai keutamaan yang sangat tinggi:
<p style="color: red;">This text will be red.</p>
Gaya sebaris akan mengatasi mana-mana gaya yang ditakrifkan dalam helaian gaya luaran atau
Menggunakan gaya sebaris secara amnya tidak digalakkan kerana ia mencampurkan pembentangan dengan kandungan dan menjadikan gaya lebih sukar untuk dikekalkan.
Kekhususan ialah konsep penting dalam CSS yang menentukan gaya yang digunakan pada elemen apabila wujud berbilang peraturan yang bercanggah. Setiap pemilih CSS mempunyai nombor kekhususan, yang boleh dikira untuk meramal gaya yang akan diutamakan.
Kekhususan biasanya diwakili sebagai nombor empat bahagian (a,b,c,d), di mana:
Nombor yang terhasil bukan asas 10. Sebaliknya, anggap ia sebagai lajur berasingan yang dibandingkan dari kiri ke kanan. Lihat contoh:
Pertimbangkan dua peraturan yang bercanggah ini:
#header .nav li { color: blue; } /* (0,1,1,1) */ nav > li a { color: red; } /* (0,0,0,3) */
Peraturan pertama (0,1,1,1) mempunyai kekhususan yang lebih tinggi, jadi teks akan menjadi biru.
Pemilih kelas pseudo (seperti :hover) dan pemilih atribut (seperti [type="text"]) masing-masing mempunyai kekhususan yang sama seperti pemilih kelas.
Pemilih universal (*) dan penggabung (>, +, ~) tidak menjejaskan kekhususan.
Selain itu, kelas pseudo :not() juga tidak menambah nilai kekhususan; hanya pemilih di dalamnya dikira.
Beberapa alatan dalam talian boleh membantu mengira kekhususan (https://specificity.keegan.st/).
Jika semua yang lain adalah sama, peraturan yang muncul kemudian dalam lembaran gaya diutamakan:
.button { background-color: blue; } .button { background-color: green; } /* This one wins */
Dalam contoh ini, butang akan mempunyai latar belakang hijau.
Walaupun memahami lata adalah penting untuk menulis CSS yang boleh diselenggara, terdapat satu lagi teka-teki yang boleh mengatasi semua peraturan yang telah kita bincangkan setakat ini: kata kunci !penting.
Kata kunci !penting boleh mengatasi semua pertimbangan lain dalam lata, kecuali pengisytiharan !penting lain yang lebih diutamakan asalnya.
/* styles.css */ .button { background-color: blue !important; }
<!-- index.html --> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <button style="background-color: red"> My button </button> <!-- The color will be blue due to !important above --> </body>
In this example, even though inline styles usually have the highest priority, the button will still have a blue background because of the !important declaration.
The !important keyword actually introduces additional layers to the cascade. The full order of precedence, from highest to lowest, is:
While !important can be tempting as a quick fix, it's generally considered a last resort. Overuse can lead to specificity wars and make your CSS harder to maintain. Legitimate use cases include:
If you find yourself using !important often, consider refactoring your CSS to use more specific selectors or a more modern approach like utilising :is() and :where() to write more flexible and maintainable styles. (I talk about these two in more details here)
Also, the @layer at-rule, which is fairly supported, allows you to create "layers" of styles with explicitly defined order of precedence:
@layer base, components, utilities; @layer utilities { .btn { padding: 10px 20px; } } @layer components { .btn { padding: 1rem 2rem; } }
This offers a more structured approach to managing style precedence without resorting to !important or engaging in a specificity arms race. However, I haven’t used this in a production project myself, if you do, I’d love to hear about your experience :)
Inheritance is another fundamental concept in CSS. Some CSS properties are inherited by default, meaning child elements will take on the computed values of their parents. This is particularly useful for text-related properties like color, font, font-family, font- size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, and word-spacing.
body { font-family: Arial, sans-serif; color: #333; line-height: 1.5; }
In this example, all text within the body will inherit these styles unless explicitly overridden. This allows for efficient styling of document-wide typography without having to repeat rules for every element.
A few others inherit as well, such as the list properties: list-style, list-style-type, list-style-position, list-style-image, and some other table related properties
Not all properties are inherited by default. For example, border and padding are not inherited, which makes sense – you wouldn't want every child element to automatically have the same border as its parent.
CSS provides several keywords to give you fine-grained control over inheritance and to reset styles:
The initial and unset keywords override all styles, affecting both author and user-agent stylesheets. This means they reset the element's styling to its default state, ignoring any previous styling rules applied by the author or the browser.
However, there are scenarios where you only want to reset the styles you’ve defined in your author stylesheet, without disturbing the default styles provided by the browser (user-agent stylesheet). In such cases, the revert keyword is particularly useful. It specifically reverts the styles of an element back to the browser’s default styles, effectively undoing any custom author-defined styles while preserving the inherent browser styling.
Perhatikan bahawa apabila menggunakan sifat trengkas nilai yang ditinggalkan ditetapkan secara tersirat kepada nilai awalnya. Ini berpotensi mengatasi gaya lain yang telah anda tetapkan di tempat lain.
Dengan memahami selok-belok ciri lata, warisan dan CSS moden, anda akan lebih bersedia untuk menulis helaian gaya yang cekap, boleh diselenggara dan berkuasa. Ingat, CSS bukan hanya tentang menjadikan sesuatu kelihatan baik – ia tentang mencipta reka bentuk yang teguh dan fleksibel yang berfungsi merentas pelbagai peranti dan penyemak imbas.
Atas ialah kandungan terperinci Menguasai CSS: Memahami Cascade. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!