Bagaimana cara memuat file css terlebih dahulu?

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

Prasyarat. Literasi komputer dasar, perangkat lunak dasar yang diinstal, pengetahuan dasar tentang bekerja dengan file, dan dasar-dasar HTML (studi Pengantar HTML. )Objektif. Untuk memahami dasar-dasar bagaimana CSS dan HTML diuraikan oleh browser, dan apa yang terjadi saat browser menemukan CSS, browser tidak memahaminya

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

  1. Browser memuat HTML (mis. g. menerimanya dari jaringan)
  2. Itu mengubah HTML menjadi DOM (Document Object Model). DOM mewakili dokumen dalam memori komputer. DOM dijelaskan sedikit lebih detail di bagian selanjutnya
  3. Browser kemudian mengambil sebagian besar sumber daya yang ditautkan oleh dokumen HTML, seperti gambar tersemat, video, dan bahkan CSS tertaut. JavaScript ditangani sedikit kemudian dalam prosesnya, dan kami tidak akan membicarakannya di sini untuk membuatnya lebih sederhana
  4. Browser mem-parsing CSS yang diambil, dan mengurutkan aturan yang berbeda berdasarkan jenis pemilihnya ke dalam "ember" yang berbeda, mis. g. elemen, kelas, ID, dan sebagainya. Berdasarkan pemilih yang ditemukannya, ia menentukan aturan mana yang harus diterapkan ke simpul mana di DOM, dan menerapkan gaya padanya sesuai kebutuhan (langkah perantara ini disebut pohon render)
  5. Pohon render ditata dalam struktur yang seharusnya muncul setelah aturan diterapkan padanya
  6. Tampilan visual halaman ditampilkan di layar (tahapan ini disebut lukisan)

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

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Di DOM, simpul yang sesuai dengan elemen <p> kita adalah induk. Anak-anaknya adalah node teks dan tiga node yang sesuai dengan elemen <span> kita. Simpul

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

p {
  margin: 0;
}

Katakanlah kita menambahkan beberapa CSS ke dokumen kita, untuk menatanya. Sekali lagi, HTML adalah sebagai berikut

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Misalkan kita menerapkan CSS berikut untuk itu

span {
  border: 1px solid black;
  background-color: lime;
}

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 layar

Output 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;

<p>I want this text to be large, bold and blue.</p>

p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}
_

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

.box {
  width: 500px;
  width: calc(100% - 50px);
}

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