Bagaimana Membina Lembaran Gaya Luar

Menggunakan Wide Site CSS

Laman web adalah gabungan gaya dan struktur, dan pada laman web hari ini, amalan terbaik untuk memastikan kedua-dua aspek laman web ini terpisah dari satu sama lain.

HTML selalu menjadi apa yang menyediakan tapak dengan strukturnya. Pada masa awal Web, HTML juga mengandungi maklumat gaya. Unsur-unsur seperti tag dibuang ke seluruh kod HTML, menambahkan maklumat yang kelihatan dan terasa bersama-sama dengan maklumat struktur. Gerakan standard web mendorong kami untuk menukar amalan ini dan sebaliknya menolak semua maklumat gaya ke dalam CSS atau Cascading Style Sheets. Mengambil langkah ini lebih jauh, cadangan terkini adalah bahawa anda menggunakan apa yang dikenali sebagai "helaian gaya luaran" untuk keperluan gaya laman web anda.

Kelebihan dan Kelemahan Lembaran Gaya Luar

Salah satu perkara terbaik tentang Lembaran Gaya Cascading ialah anda boleh menggunakannya untuk memastikan keseluruhan laman web anda konsisten. Cara termudah untuk melakukan ini adalah untuk memaut atau mengimport lembaran gaya luaran . Jika anda menggunakan helaian gaya luaran yang sama untuk setiap halaman laman web anda, anda boleh memastikan bahawa semua halaman akan mempunyai gaya yang sama. Anda juga boleh membuat perubahan untuk masa depan. Oleh kerana setiap halaman menggunakan helaian gaya luaran yang sama, sebarang perubahan pada helaian itu akan memberi kesan kepada setiap halaman laman. Ini jauh lebih baik daripada perlu mengubah setiap halaman secara individu!

Kelebihan Helaian Gaya Luar

  • Anda boleh mengawal rupa dan rasa beberapa dokumen sekaligus.
    • Ini amat berguna jika anda bekerja dengan sekumpulan orang untuk membuat laman web anda. Banyak peraturan gaya boleh sukar diingat, dan semasa anda mungkin mempunyai panduan gaya bercetak, ia tidak cekap dan membosankan untuk terus membalikkannya untuk menentukan sama ada teks contoh ditulis dalam 12 titik font Arial, atau 14 titik kurier. Dengan mempunyai segala-galanya di satu tempat, dan kerana tempat itu juga di mana anda akan membuat perubahan, anda boleh membuat penyelenggaraan lebih mudah.
  • Anda boleh membuat kelas gaya yang kemudiannya boleh digunakan pada banyak elemen HTML yang berbeza.
    • Jika anda sering menggunakan gaya font tertentu untuk memberi penekanan pada pelbagai perkara di halaman anda, anda boleh menggunakan atribut kelas yang anda tetapkan dalam lembaran gaya anda untuk mendapatkan rupa dan nuansa ini, dan bukannya menentukan gaya tertentu untuk setiap contoh penekanan.
  • Anda boleh dengan mudah menggabungkan gaya anda menjadi lebih cekap.
    • Semua kaedah kumpulan yang tersedia untuk CSS boleh digunakan dalam helaian luaran, dan ini memberikan anda lebih banyak kawalan dan kelenturan pada halaman anda.

Kelemahan Lembaran Gaya Luar

  • Lembaran gaya luaran boleh meningkatkan masa muat turun, terutamanya jika mereka sangat besar. Oleh kerana fail CSS adalah dokumen berasingan yang mesti dimuatkan, ia akan memberi kesan kepada prestasi untuk melakukan muat turun itu.
  • Helaian gaya luaran semakin besar dengan cepat kerana sukar untuk memberitahu apabila gaya tidak lagi digunakan kerana ia tidak dipadam apabila halaman dikeluarkan. Pengurusan fail CSS anda yang betul adalah penting, terutamanya jika berbilang orang bekerja pada fail yang sama.
  • Jika anda hanya mempunyai laman web satu halaman, mempunyai fail luaran untuk CSS mungkin tidak diperlukan kerana anda hanya mempunyai satu halaman itu dengan gaya. Kebanyakan manfaat CSS luaran hilang apabila anda hanya mempunyai satu halaman halaman.

Cara Buat Lembaran Gaya Luar

Lembaran gaya luaran dicipta dengan sintaks yang sama untuk mendokumenkan helaian gaya peringkat. Walau bagaimanapun, semua yang perlu anda sertakan adalah pemilih dan perisytiharan. Sama seperti dalam helaian gaya peringkat dokumen, sintaks untuk peraturan adalah:

pemilih {property: value;}

Simpan peraturan ini ke dalam fail teks dengan sambungan .css. Ini tidak diperlukan, tetapi ia adalah kebiasaan yang baik untuk masuk ke dalam, jadi anda boleh mengenali helaian gaya anda dengan cepat dalam senarai direktori.

Sebaik sahaja anda mempunyai dokumen helaian gaya, anda perlu memautkannya ke halaman Web anda. Ini boleh dilakukan dengan dua cara:

  1. Memautkan
    1. Untuk menghubungkan helaian gaya, anda menggunakan tag HTML. Ini mempunyai sifat rel , jenis , dan href . Atribut rel memberitahu apa yang anda sambungkan (dalam kes ini stylesheet), jenis tersebut menentukan jenis MIME untuk penyemak imbas, dan href adalah jalan ke file .css.
  2. Mengimport
    1. Anda akan menggunakan helaian gaya yang diimport dalam lembaran gaya tahap dokumen supaya anda boleh mengimport atribut helaian gaya luaran sambil tidak kehilangan sebarang dokumen tertentu. Anda memanggilnya dengan cara yang sama untuk memanggil helaian gaya yang dipautkan, hanya perlu dipanggil dalam deklarasi gaya tahap dokumen. Anda boleh mengimport beberapa helaian gaya luaran yang anda perlukan untuk mengekalkan laman web anda.

Artikel asal oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 8/8/17