Lembar gaya tertanam, tertanam dan luaran: Inilah yang anda perlu ketahui
Pembangunan laman web di bahagian hadapan sering dianggap sebagai bangku 3 kaki. Kaki ini adalah seperti berikut:
Bahagian kedua najis ini, CSS atau Cascading Style Sheets, adalah apa yang kita lihat di sini hari ini. Khususnya, kami ingin menangani 3 jenis gaya yang boleh anda tambahkan pada dokumen.
- Gaya inline
- Gaya tertanam
- Gaya luaran
Setiap jenis gaya CSS ini mempunyai manfaat dan kekurangannya, jadi mari kita lihat lebih mendalam setiap satu secara individu.
Gaya Dalam Talian
Gaya inline adalah gaya yang ditulis secara langsung dalam tag dalam dokumen HTML. Gaya inline hanya menjejaskan tag khusus yang digunakan untuknya. Berikut adalah contoh gaya inline yang digunakan pada pautan standard, atau sauh, tag:
Peraturan CSS ini akan mengubah standard hiasan teks garis bawah dari pautan ini. Walau bagaimanapun, ia tidak akan mengubah mana-mana pautan lain pada halaman. Ini adalah salah satu daripada batasan gaya inline. Oleh kerana mereka hanya menukar item tertentu, anda perlu memasukkan HTML anda dengan gaya ini untuk mencapai reka bentuk halaman yang sebenar. Itu bukan amalan terbaik. Malah, ia adalah satu langkah yang dikeluarkan dari hari "tag" dan gabungan struktur dan gaya dalam laman web.
Gaya inline juga mempunyai kekhususan yang sangat tinggi.
Ini menjadikan mereka sangat sukar untuk menimpa dengan gaya-gaya lain yang tidak benar. Contohnya, jika anda ingin membuat tapak responsif dan menukar bagaimana elemen melihat titik putus tertentu dengan menggunakan pertanyaan media , gaya sebaris pada elemen akan membuat ini sangat sukar dilakukan.
Akhirnya, gaya inline benar-benar hanya sesuai apabila digunakan sangat lembab.
Malah, saya jarang sekali menggunakan gaya inline di halaman web saya.
Gaya Embedded
Gaya tertanam adalah gaya yang tertanam di kepala dokumen. Gaya terbenam hanya memberi kesan kepada tag pada halaman yang ditanam. Sekali lagi, pendekatan ini menafikan salah satu kekuatan CSS. Oleh kerana setiap halaman akan mempunyai gaya dalam
, jika anda ingin membuat perubahan situas, seperti mengubah warna pautan dari merah ke hijau, anda perlu membuat perubahan ini pada setiap halaman, kerana setiap halaman menggunakan lembaran gaya tertanam. Ini lebih baik daripada gaya inline, tetapi masih bermasalah dalam banyak keadaan.
Stylesheets yang ditambah kepada
Dokumen juga menambah sejumlah besar kod markup ke halaman itu, yang juga boleh membuat halaman lebih keras untuk diurus pada masa akan datang.
Manfaat helaian gaya tertanam adalah beban dengan serta-merta dengan halaman itu sendiri, dan bukannya memerlukan fail luaran yang lain untuk dimuatkan. Ini boleh menjadi manfaat dari perspektif kelajuan dan prestasi muat turun .
Helaian Gaya Luaran
Kebanyakan laman web hari ini menggunakan helaian gaya luaran. Gaya eksternal adalah gaya yang ditulis dalam dokumen berasingan dan kemudian dilampirkan kepada pelbagai dokumen web. Lembaran gaya luaran boleh menjejaskan mana-mana dokumen yang dilampirkan, yang bermaksud bahawa jika anda mempunyai laman web 20 halaman di mana setiap halaman menggunakan helaian gaya yang sama (ini biasanya bagaimana ia dilakukan), anda boleh membuat perubahan visual kepada setiap orang dari halaman tersebut dengan hanya menyunting helaian gaya itu.
Ini menjadikan pengurusan tapak jangka panjang lebih mudah.
Kelemahan pada helaian gaya luaran ialah mereka memerlukan halaman untuk mengambil dan memuatkan fail luaran ini. Tidak setiap halaman akan menggunakan setiap gaya dalam helaian CSS, begitu banyak halaman akan memuatkan laman CSS yang lebih besar daripada yang sebenarnya diperlukan.
Walaupun benar ada hit prestasi untuk fail CSS luaran, ia pasti dapat dikurangkan. Secara realistik, fail CSS adalah hanya fail teks, sehingga pada umumnya tidak terlalu besar untuk dimulakan. Sekiranya keseluruhan laman web anda menggunakan 1 fail CSS, anda juga mendapat faedah dokumen tersebut yang di-cache setelah mula dimuatkan.
Ini bermakna bahawa terdapat sedikit prestasi yang mencecah di halaman pertama beberapa lawatan, tetapi halaman berikutnya akan menggunakan fail CSS cache, jadi sebarang hit akan ditolak. Fail CSS luaran ialah cara saya membina semua halaman web saya.