Apa yang dimaksud dengan "cascading 'di CSS?

Apa arti sebenarnya dari istilah "Cascading" di CSS? Saya mendapatkan pandangan yang berbeda, jadi saya bertanya di sini. Sebuah contoh akan membantu.

"Bertingkat" dalam konteks ini berarti bahwa karena lebih dari satu deklarasi stylesheet dapat diterapkan ke bagian HTML tertentu, harus ada cara yang diketahui untuk menentukan aturan lembar gaya tertentu yang berlaku untuk bagian HTML mana.

Aturan yang digunakan dipilih dengan menurunkan dari deklarasi yang lebih umum ke aturan spesifik yang diperlukan. Deklarasi paling spesifik dipilih.

Ketika saya mengajar CSS, saya selalu memberi tahu siswa bahwa "cascading style sheets" berarti sesuatu seperti " fighting style sheets".

Satu aturan memberi tahu tag H3 Anda menjadi merah, aturan lain mengatakan itu menjadi hijau - aturan saling bertentangan, siapa yang akan menang!? Stylesheet deathmatch!

Oke, mungkin itu sedikit berlebihan, tetapi ini jauh lebih bisa diterima oleh orang-orang non-kode dan non-pemrograman yang baru memulai daripada gagasan tentang kaskade, atau warisan.

Saya tentu saja memastikan untuk memberi tahu mereka bahwa tidak masalah bagi lembar gaya untuk berkelahi satu sama lain, begitulah cara bahasa dirancang.

Håkon Wium Lie (pembuat bersama CSS) mendefinisikan "cascade" dalam tesis PHD tentang CSS sebagai "Proses menggabungkan beberapa lembar gaya dan menyelesaikan konflik di antara mereka" https://www.wiumlie.no/2006/phd/

Artikel berikut menjawab pertanyaan Anda dengan sempurna.

Ini adalah urutan di mana properti diterapkan pada elemen tertentu.

http://www.blooberry.com/indexdot/css/topics/cascade.htm

Anda harus memikirkannya dari luar ke dalam. Jika Anda memiliki aturan yang ada di tag body, itu akan "mengalir" melalui setiap tag anak. Jika Anda meletakkan aturan pada tag apa pun di dalam body, aturan itu akan mengadopsi aturan itu, dan seterusnya. Jadi aturan mengalir melalui semua konten kecuali terganggu oleh aturan dari tag yang disematkan.

Anda dapat memperlakukan pemrosesan CSS sebagai air terjun yang berisi beberapa kaskade. Berikut adalah kaskade dari atas ke bawah secara berurutan: (Yang lebih rendah dapat menimpa properti yang sama di yang lebih tinggi.)

1. deklarasi agen pengguna
2. deklarasi normal pengguna
3. penulis deklarasi normal
4. penulis deklarasi penting
5. deklarasi penting pengguna

Lihat lebih lanjut di spesifikasi

The Cascading adalah untuk memilih nilai yang tepat dari beberapa asal-usul. Tapi ini berbeda dengan menyortir . Hanya sesuatu yang tidak berurutan yang perlu kita sortir. Namun dalam CSS, asal-usul ini memiliki prioritas tetap. Dan dengan demikian pseudo-code mungkin terlihat seperti berikut:

1. menginisialisasi array nilai;
2. menerapkan nilai dari asal pertama;
3. menerapkan nilai dari asal ke-2, menimpa jika nilainya ada;
4. ...
5. menerapkan nilai dari asal ke-N, menimpa jika nilainya ada;

Dari pseudo-code Anda dapat melihatnya terlihat seperti air terjun dari beberapa air terjun.

Satu klarifikasi yang mungkin bisa membantu. Jika Anda menyertakan dua lembar gaya dan ada aturan dengan kekhususan yang sama di masing-masing, yang termasuk kemenangan terakhir. IE yang terakhir di kaskade memiliki pengaruh paling besar.

(Ini hanyalah variasi dari memiliki dua aturan di lembar yang sama - yang terakhir menang jika semua hal lainnya sama.)

Misalnya, diberikan

body {
    background:blue;
}

body {
    background:green;
}

maka background akan menjadi hijau.

Jawaban ini untuk pemula absolut. Jika Anda menginginkan gambaran umum dari jawaban ini, silakan baca jawaban kedua saya.

Cascading adalah proses menggabungkan stylesheet yang berbeda dan menyelesaikan konflik antara aturan dan deklarasi CSS yang berbeda ketika lebih dari satu aturan berlaku untuk elemen tertentu . Karena seperti yang Anda mungkin sudah tahu deklarasi untuk properti gaya tertentu seperti ukuran font dapat muncul di beberapa lembar gaya dan juga beberapa kali di dalam satu lembar gaya.

Untuk memahami cascading, Anda harus mulai dengan fase penguraian CSS karena dalam fase penguraian, langkah pertama adalah menyelesaikan deklarasi CSS yang bertentangan dan langkah kedua adalah memproses nilai CSS akhir.

Sekarang CSS juga dapat berasal dari berbagai sumber. Yang paling umum adalah CSS yang kami tulis oleh pengembang. Deklarasi ini yang kita masukkan ke dalam stylesheet kita disebut deklarasi penulis. Sumber lain dapat berupa deklarasi pengguna, yaitu CSS yang berasal dari pengguna. Misalnya, ketika pengguna mengubah ukuran font default di browser maka itu adalah CSS pengguna, dan yang terakhir adalah deklarasi browser default.

Misalnya, jika kita meletakkan tag anchor di HTML untuk sebuah link dan kemudian tidak menatanya sama sekali, biasanya akan ditampilkan dengan teks biru dan digarisbawahi, benar. Itu disebut CSS agen pengguna karena disetel oleh browser. Jadi kaskade menggabungkan deklarasi CSS yang berasal dari semua sumber yang berbeda ini, tetapi bagaimana kaskade sebenarnya menyelesaikan konflik saat lebih dari satu aturan diterapkan?

Nah, yang dilakukannya adalah melihat kepentingannya, pada spesifisitas pemilih, dan urutan sumber dari deklarasi yang bertentangan untuk menentukan mana yang diutamakan, dan berikut ini cara kerjanya. Pertama, kaskade dimulai dengan memberikan deklarasi yang bertentangan dengan kepentingan yang berbeda berdasarkan di mana deklarasi tersebut dideklarasikan pada sumbernya. Deklarasi yang paling penting adalah deklarasi pengguna yang ditandai dengan kata kunci penting.

Deklarasi terpenting kedua adalah deklarasi penulis yang ditandai dengan penting. Ketiga, deklarasi author normal, kemudian deklarasi pengguna normal, dan terakhir deklarasi yang paling tidak penting adalah deklarasi browser default, yang sebenarnya sangat masuk akal bahwa kita dapat dengan mudah menimpa deklarasi ini yang datang secara default dari browser.

Sekarang sering kali kita hanya memiliki sekumpulan aturan yang saling bertentangan di stylesheet penulis kita tanpa kata kunci penting. Itu sebenarnya skenario yang paling umum dan dalam kasus ini, semua deklarasi memiliki kepentingan yang sama persis. Sekarang, apa yang terjadi dalam kasus ini? Apa yang dilakukan cascade jika ini masalahnya adalah menghitung dan membandingkan kekhususan pemilih deklarasi, dan begitulah cara kerjanya.

Gaya sebaris memiliki kekhususan tertinggi diikuti oleh ID, lalu kelas, kelas semu, dan pemilih atribut, dan terakhir pemilih elemen paling tidak spesifik dan elemen semu. Jadi, ketika kita memiliki deklarasi yang bertentangan dengan kepentingan yang sama seperti yang kita lihat di slide terakhir, kita menghitung spesifisitas selektornya berdasarkan prioritas yang baru saja saya tunjukkan, tapi mari kita lihat bagaimana kita sebenarnya menghitung kekhususan dengan contoh kecil, itu selalu terbaik, benar.

Dari contoh di atas, semua deklarasi ini memiliki kepentingan yang sama, karena semuanya adalah deklarasi penulis. Jadi mari kita hitung kekhususan pemilih mereka untuk mengetahui apakah warna latar belakang akan menjadi biru, hijau, ungu, atau kuning, dan beginilah cara kita melakukannya. Kekhususan sebenarnya bukan hanya satu angka, tetapi satu angka untuk masing-masing dari empat kategori yang saya tunjukkan sebelumnya. Gaya sebaris, ID, kelas, pseudo-elemen dan atribut, dan akhirnya elemen dan untuk masing-masing, kami menghitung jumlah kemunculan di selektor.

Jadi di sini, di selektor satu, kami tentunya tidak memiliki gaya sebaris, karena gaya sebaris harus ditulis dalam HTML, yang tidak terjadi di sini, jadi nol. Kami juga tidak memiliki ID di sini, jadi sekali lagi nol, tetapi kami memiliki satu kelas, kelas tombol. Jadi untuk kategori kelas, kita punya satu, dan akhirnya, tidak ada pemilih elemen di sini jadi nol untuk yang itu juga, dan hanya itu. Kekhususan pemilih adalah nol, nol, satu, nol.

Sekarang, sekarang mari bandingkan dengan yang lain. Yang berikutnya juga bukan gaya sebaris, jadi nol untuk yang pertama. Sekarang di sini kita sebenarnya memiliki pemilih ID untuk nav ID, ya, jadi itu satu untuk ID. Kami juga memiliki dua kelas tarik kanan dan tombol jadi dua untuk kategori kelas, dan terakhir, ada juga dua pemilih elemen di sini. Elemen nav dan elemen div, yang artinya itu juga dua untuk kategori elemen. Jadi akhirnya kekhususan selektor adalah nol, satu, dua, dua, yang sebenarnya merupakan selektor yang sangat spesifik.

Pemilih nomor tiga sangat sederhana. Itu hanya pemilih elemen dan spesifisitasnya adalah nol, nol, nol, satu.

Sekarang yang terakhir, pemilih nomor empat. Pertama lagi kita punya nav ID, jadi ini satu untuk ID. Selanjutnya, kita memiliki kelas, kelas tombol, dan juga kelas semu, yaitu hover, yang menjadikannya dua untuk kategori kelas secara total. Karena ada juga satu pemilih elemen, spesifisitas akhirnya adalah nol, satu, dua, satu.

Sekarang mari kita tahu bagaimana sebenarnya kita menggunakan angka-angka ini untuk mengetahui pemilih mana yang berlaku. Kita mulai melihat angka dari kiri ke kanan dimulai dengan kategori yang paling spesifik, gaya sebaris. Jika ada pemilih dengan satu untuk gaya sebaris menang melawan semua pemilih lainnya, karena ini adalah kategori yang paling spesifik. Nah, ini tidak terjadi di sini, jadi mari kita lanjutkan ke ID. Kami melihat bahwa penyeleksi dua dan empat memiliki satu di sini sementara yang lain memiliki nol sehingga penyeleksi dengan nol keluar dari permainan karena mereka kurang spesifik maka penyeleksi dua dan empat yang memiliki ID.

Sekarang karena kedua penyeleksi memiliki satu dalam kategori ID, kita harus melanjutkan dan memeriksa kelas. Keduanya memiliki dua di kategori ini yang masih memiliki ikatan di antara mereka, dan akhirnya, di kategori elemen, pemilih dua memiliki dua sedangkan pemilih empat hanya memiliki satu dan jadi kami memiliki pemenang di sini. Selektor nomor dua adalah selektor paling spesifik dari semuanya dan akan memberikan tombol kita latar belakang hijau.34 Nilai pernyataan pemenang disebut nilai bertingkat karena ini adalah hasil dari kaskade.

Jadi kita mulai dengan sekumpulan nilai yang dinyatakan dalam hal ini biru, hijau, ungu, dan kuning salah satunya menang dan menjadi nilai bertingkat, yang dalam contoh kita hijau.

Sekarang bayangkan sektor empat juga memiliki dua elemen maka kedua penyeleksi dua dan empat akan memiliki kekhususan yang sama, benar. Jadi apa yang terjadi dalam kasus ini dan saya berjanji ini hampir selesai sekarang, oke. Nah jika masih ada seri pada saat ini maka deklarasi CSS terakhir yang tertulis dalam kode adalah yang akan diterapkan. Jadi sekali lagi jika semuanya sama, jika semua pemilih deklarasi memiliki kekhususan yang sama maka itu hanyalah deklarasi terakhir yang akan digunakan untuk memberi gaya pada elemen yang dipilih.

Ini adalah proses yang digunakan untuk menyelesaikan konflik dalam spesifikasi style sheet.

Itu pada dasarnya adalah proses resolusi konflik yang dilakukan sesuai dengan prioritas yang disebutkan dalam CSS.

CSS adalah singkatan dari Cascading Style Sheet. Berdasarkan gaya alaminya lebih jauh ke bawah, lembar gaya bertingkat menggantikan gaya yang setara di bagian atas (kecuali gaya yang lebih tinggi lebih spesifik). Oleh karena itu, kita dapat menyetel gaya dasar di awal stylesheet, berlaku untuk semua versi desain kita, lalu mengganti bagian yang relevan dengan kueri media lebih jauh di dalam dokumen.

Cascading berarti menuangkan dalam beberapa langkah atau menambahkan langkah-langkah. Style sheets berisi kode untuk menata elemen html. Dan cara kode ditulis dalam lembar gaya adalah dengan gaya bertingkat. Atau sederhananya, kode back to back dalam lapisan untuk setiap elemen html dari halaman html dalam style sheet membuat style sheet berjenjang.

Cascading adalah algoritma yang memberikan bobot pada setiap aturan gaya. Jika beberapa aturan diterapkan, aturan dengan bobot terbesar akan diutamakan.

Ketika satu atau lebih gaya diterapkan ke elemen yang sama, CSS melakukan serangkaian aturan yang disebut berjenjang yang mengevaluasi kekuatan Kekhususan dari dua gaya yang diterapkan dan menentukan pemenangnya yaitu aturan gaya yang memiliki bobot lebih banyak menang. Jika kedua aturan tersebut memiliki bobot yang sama maka aturan yang diterapkan adalah kemenangan terakhir.

Cascade dan Specificity yang perlu Anda ketahui:

1. Deklarasi CSS yang ditandai dengan! Important memiliki prioritas tertinggi.

2. Tetapi hanya gunakan! Important sebagai resource terakhir. Lebih baik menggunakan kekhususan yang benar - kode yang lebih mudah dirawat!

3. Gaya sebaris akan selalu memiliki prioritas di atas gaya di lembar gaya eksternal.

4. Selektor yang berisi 1 ID lebih spesifik daripada yang memiliki 1000 kelas.

5. Selektor yang berisi 1 kelas lebih spesifik daripada yang memiliki 1000 elemen.

6. Selektor universal * tidak memiliki nilai spesifisitas (0,0,0)

7. Lebih mengandalkan spesifisitas daripada urutan penyeleksi.

8. Namun mengandalkan urutan saat menggunakan stylesheet pihak ke-3-selalu letakkan lembar gaya pengarang Anda di urutan terakhir.

Dalam memilih gaya CSS apa yang akan diterapkan ke elemen HTML, kekhususan menimpa umum sesuai dengan serangkaian aturan bertingkat yang menyelesaikan konflik antar gaya:

1. Tanpa CSS, HTML akan ditampilkan sesuai dengan gaya default browser.
2. Pemilih tag CSS (cocok dengan tag HTML) menggantikan default browser.
3. Pemilih kelas CSS (dengan.) Mengganti referensi tag.
4. Pemilih ID CSS (dengan #) menimpa referensi kelas.
5. Inline CSS kode ke tag HTML override ID, kelas, dan tag CSS.
6. Menambahkan nilai ! Important ke gaya CSS menimpa yang lainnya.
7. Jika pemilih CSS identik, browser menggabungkan propertinya. Jika properti CSS yang dihasilkan konflik, browser memilih nilai properti yang muncul belakangan atau yang paling baru dalam kode.

Pemilih CSS yang cocok dengan kombinasi tag, kelas, dan / atau ID yang lebih spesifik akan diprioritaskan. Dari contoh berikut, yang pertama akan didahulukan daripada yang kedua, terlepas dari urutan tampilannya di CSS:

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

akan membuat p pada font 14pt karena "lebih dekat" ke elemen sebenarnya (style sheets eksternal memuat dari atas file ke bawah file). Jika Anda menggunakan style sheet yang ditautkan dan kemudian menyertakan beberapa CSS di head dokumen Anda setelah menautkan ke dokumen CSS eksternal, deklarasi "in head" akan menang karena lebih mendekati elemen yang ditentukan. Ini hanya berlaku untuk pemilih yang memiliki bobot yang sama. Lihat http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html untuk penjelasan yang baik tentang bobot pemilih tertentu.

Semua yang dikatakan, Anda dapat mempertimbangkan 'warisan' sebagai bagian dari kaskade juga - untuk semua tujuan praktis. Hal-hal "menurun" dari elemen yang mengandung.