Kami telah mempelajari dasar-dasar CSS, untuk apa dan bagaimana menulis stylesheet sederhana. Dalam pelajaran ini kita akan melihat bagaimana browser menggunakan CSS dan HTML dan mengubahnya menjadi halaman web Show Saat browser menampilkan dokumen, browser harus menggabungkan konten dokumen dengan informasi gayanya. Ini memproses dokumen dalam beberapa tahap, yang telah kami cantumkan di bawah ini. Ingatlah bahwa ini adalah versi yang sangat disederhanakan dari apa yang terjadi ketika browser memuat halaman web, dan browser yang berbeda akan menangani prosesnya dengan cara yang berbeda. Tapi ini kira-kira yang terjadi
Diagram berikut juga menawarkan tampilan proses yang sederhana DOM memiliki struktur seperti pohon. Setiap elemen, atribut, dan potongan teks dalam bahasa markup menjadi simpul DOM dalam struktur pohon. Node ditentukan oleh hubungannya dengan node DOM lainnya. Beberapa elemen adalah orang tua dari simpul anak, dan simpul anak memiliki saudara kandung Memahami DOM membantu Anda mendesain, men-debug, dan memelihara CSS karena DOM adalah tempat CSS dan konten dokumen bertemu. Saat Anda mulai bekerja dengan browser DevTools, Anda akan menavigasi DOM saat Anda memilih item untuk melihat aturan mana yang berlaku Daripada penjelasan yang panjang dan membosankan, mari kita lihat contoh untuk melihat bagaimana cuplikan HTML asli diubah menjadi DOM Ambil kode HTML berikut
Di DOM, simpul yang sesuai dengan elemen P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"0 juga merupakan induk, dengan simpul teks sebagai anaknya P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"_ Beginilah cara browser menginterpretasikan cuplikan HTML sebelumnya — ini merender pohon DOM di atas dan kemudian menampilkannya di browser seperti itu
Katakanlah kita menambahkan beberapa CSS ke dokumen kita, untuk menatanya. Sekali lagi, HTML adalah sebagai berikut
Misalkan kita menerapkan CSS berikut untuk itu
Browser mem-parsing HTML dan membuat DOM darinya. Selanjutnya, ini mem-parsing CSS. Karena satu-satunya aturan yang tersedia di CSS memiliki pemilih P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"1, browser mengurutkan CSS dengan sangat cepat. Itu menerapkan aturan itu untuk masing-masing dari tiga <span> s, lalu melukis representasi visual akhir ke layarOutput yang diperbarui adalah sebagai berikut Dalam artikel Debugging CSS kami di modul berikutnya, kami akan menggunakan browser DevTools untuk men-debug masalah CSS, dan akan mempelajari lebih lanjut tentang cara browser menginterpretasikan CSS Disebutkan bahwa browser tidak serta merta mengimplementasikan fitur CSS baru secara bersamaan. Selain itu, banyak orang tidak menggunakan browser versi terbaru. Mengingat bahwa CSS sedang dikembangkan sepanjang waktu, dan karenanya lebih unggul dari apa yang dapat dikenali oleh browser, Anda mungkin bertanya-tanya apa yang terjadi jika browser menemukan pemilih atau deklarasi CSS yang tidak dikenalinya Jawabannya adalah tidak melakukan apa-apa, dan hanya beralih ke bagian CSS berikutnya Jika browser mengurai aturan Anda, dan menemukan properti atau nilai yang tidak dipahami, browser akan mengabaikannya dan melanjutkan ke deklarasi berikutnya. Ini akan dilakukan jika Anda membuat kesalahan dan salah mengeja properti atau nilai, atau jika properti atau nilai terlalu baru dan browser belum mendukungnya Demikian pula, jika browser menemukan pemilih yang tidak dimengerti, itu hanya akan mengabaikan seluruh aturan dan beralih ke yang berikutnya. Dalam contoh di bawah ini saya telah menggunakan ejaan British English untuk warna, yang membuat properti tersebut tidak valid karena tidak dikenali. Jadi paragraf saya belum berwarna biru. Namun, semua CSS lainnya telah diterapkan;
_Perilaku ini sangat berguna. Ini berarti Anda dapat menggunakan CSS baru sebagai peningkatan, mengetahui bahwa tidak akan terjadi kesalahan jika tidak dipahami — browser akan mendapatkan fitur baru atau tidak. Ini memungkinkan gaya fallback dasar Ini bekerja sangat baik ketika Anda ingin menggunakan nilai yang cukup baru dan tidak didukung di semua tempat. Misalnya, beberapa browser lama tidak mendukung P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"3 sebagai nilai. Saya mungkin memberikan lebar mundur untuk sebuah kotak dalam piksel, kemudian memberikan lebar dengan nilai P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"3 dari P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"5. Browser lama akan menggunakan versi piksel, mengabaikan baris tentang P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"3 karena mereka tidak memahaminya. Browser baru akan menginterpretasikan garis menggunakan piksel, tetapi kemudian menimpanya dengan garis menggunakan P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"3 karena garis itu muncul nanti di kaskade
Kami akan melihat lebih banyak cara untuk mendukung berbagai browser di pelajaran selanjutnya Anda hampir menyelesaikan modul ini — kita hanya memiliki satu hal lagi yang harus dilakukan. Dalam penilaian halaman Styling biografi Anda akan menggunakan pengetahuan baru Anda untuk mengubah gaya contoh, menguji beberapa CSS dalam prosesnya Bagaimana Anda memuat file di CSS?Menggunakan CSS . Sebaris - dengan menggunakan atribut gaya di dalam elemen HTML Internal - by using a |