Algoritma keutamaan apabila peraturan CSS melata-tutorial css-php.cn

Keutamaan peraturan CSS ialah konsep yang mesti difahami oleh pembangun bahagian hadapan web. Terdapat 4 kaedah yang biasa digunakan untuk menambah gaya.

1. Gaya sebaris 2 gaya terbenam 3 gaya luaran 4. dengan elemen HTML, ia menyebabkan banyak masalah untuk pembangun bahagian hadapan web. Mereka sering muncul seperti ini:

Gaya dibenamkan lebih lembut daripada gaya sebaris Mereka juga berada dalam dokumen HTML, tetapi mereka tidak peduli untuk berselirat dengan elemen HTML. Ia sering muncul dalam elemen: This is a paragraph.

Salin selepas log masuk

gaya luaran ialah seorang bangsawan, jadi ia hanya wujud secara bebas dalam bentuk fail luaran . Biasanya kami menggunakan elemen atau pernyataan @import untuk mengimportnya ke dalam HTML. p{ color : red; } Salin selepas log masuk

Kita harus menggunakan gaya luaran sebanyak mungkin. Saya rasa ada banyak sebab semua orang tahu, jadi saya tidak akan mengulanginya. Salin selepas log masuk Terdapat juga gaya pengguna yang berbeza sedikit daripada tiga di atas Jika anda menggunakan pelayar IE, maka anda boleh mencari kaedah untuk menambah gaya pengguna di bawah Alat – Pilihan Internet – Umum – Penampilan – Kebolehcapaian – Pengguna. tempat helaian gaya (maafkan saya kerana tidak mempunyai pelayar IE versi Cina).

Memandangkan kami mempunyai begitu banyak cara untuk menambah gaya, adalah sukar untuk mengelakkan gaya berlatarkan. Contohnya:

Semasa menggunakan gaya sebaris di atas, kami juga menggunakannya dalam gaya luaran kami: This is a paragraph.

Salin selepas log masuk

Kami juga mempunyai The p{ color : yellow; } Salin selepas log masuk

Dengan cara ini, kami mempunyai berbilang peraturan CSS yang menentukan nilai pada warna atribut yang sama bagi elemen yang sama. Keadaan ini dipanggil melata. Apabila lata berlaku, Penghurai CSS akan menentukan nilai akhir yang dipilih berdasarkan algoritma keutamaan. p.intro{ color : blue; } Salin selepas log masuk Algoritma keutamaan mempertimbangkan tiga aspek berikut mengikut urutan:

1 Kepentingan dan sumber peraturan CSS 2 Keistimewaan peraturan CSS dalam dokumen The susunan penampilan

Proses algoritma dibahagikan kepada empat langkah: 1 Untuk atribut tertentu unsur tertentu, Menyenaraikan semua peraturan CSS yang memberikan nilai kepada sifat ini.

Dalam contoh di atas, pada elemen class="intro", terdapat tiga peraturan CSS yang menentukan atribut warna. 2. Utamakan mengikut kepentingan dan sumber pernyataan

Terdapat dua jenis kepentingan: penting dan biasa (iaitu tidak penting)

Kepentingan menambah !penting selepas peraturan CSS adalah lebih tinggi daripada tidak menambahnya.

Terdapat tiga sumber:

lembaran gaya ejen pengguna – gaya lalai penyemak imbas

lembaran gaya pengarang – gaya yang ditentukan pembangun

lembaran gaya pengguna – menyemak imbas pengguna Keutamaan daripada gaya yang ditakrifkan dalam alat

dari rendah ke tinggi ialah:

lembaran gaya ejen pengguna

peraturan biasa dalam helaian gaya pengguna

Peraturan biasa dalam pengarang helaian gaya

Peraturan penting dalam helaian gaya pengarang

Peraturan penting dalam helaian gaya pengguna

Selepas pengisihan di atas, jika terdapat peraturan CSS mempunyai keutamaan yang lebih tinggi daripada semua yang lain peraturan pertandingan, maka algoritma tamat dan nilai yang ditentukan oleh keutamaan tertinggi dikembalikan. Jika terdapat berbilang peraturan CSS dengan keutamaan tertinggi, mereka akan terus bersaing dan algoritma akan memasuki langkah 3.

3. Isih mengikut Kekhususan

CSS akan mengira nilai kekhususan pemilih yang dinyatakan dalam setiap peraturan dalam berbilang peraturan.

Nilai keistimewaan ialah nilai seperti tatasusunan yang terdiri daripada 4 integer: a, b, c, d, dengan a mempunyai berat tertinggi, dan seterusnya, d mempunyai berat terendah. Kaedah pengiraan nilai kekhususan pemilih ialah: Jika peraturan ialah gaya sebaris, maka a = 1

Jika peraturan ditentukan oleh pemilih, bilangan pemilih id yang muncul dalam pemilih ialah nilai b Jika Peraturan ditentukan oleh pemilih Jumlah bilangan pemilih atribut (termasuk pemilih kelas) atau pemilih kelas pseudo yang muncul dalam pemilih ialah nilai c Jika peraturan ditentukan oleh pemilih, pemilih unsur atau pemilih unsur pseudo yang terdapat dalam pemilih ialah Jumlah kuantiti ialah nilai d. Nilai kekhususan

pemilih universal * ialah 0,0,0,0

Tapak web rasmi menyediakan beberapa contoh untuk memperdalam pemahaman.

Apabila mengisih mengikut nilai kekhususan, memandangkan a mempunyai berat yang paling tinggi, a dibandingkan dahulu Jika a adalah sama, b dibandingkan, dan seterusnya. Oleh itu, tidak kira berapa besar nilai b, c, dan d, gaya sebaris sentiasa mempunyai kekhususan tertinggi.

Jika, selepas mengisih mengikut kekhususan di atas, terdapat peraturan CSS dengan keutamaan yang lebih tinggi daripada semua peraturan bersaing yang lain, maka algoritma akan tamat dan nilai yang ditentukan oleh keutamaan tertinggi dikembalikan. Jika terdapat berbilang peraturan CSS dengan keutamaan tertinggi, mereka akan terus bersaing dan algoritma akan memasuki langkah 4.

4 Bandingkan susunan peraturan CSS yang muncul dalam dokumen

Yang muncul kemudian sentiasa mempunyai keutamaan yang lebih tinggi daripada yang muncul sebelum ini, jadi ia muncul dalam Pernyataan terakhir akan digunakan sebagai nilai harta.