Skip to main content

Menggunakan Span dan Div HTML Elements dengan CSS dalam Reka Bentuk Web

HTML & CSS #27: Menggunakan Elemen Div dan Span (April 2025)

HTML & CSS #27: Menggunakan Elemen Div dan Span (April 2025)
Anonim

Ramai orang yang baru dalam reka bentuk web dan menggunakan HTML / CSS dan

unsur-unsur secara bergantian ketika mereka membina laman web. Walau bagaimanapun, realiti adalah bahawa setiap elemen HTML ini memberi maksud yang berlainan. Belajar menggunakan setiap tujuannya akan membantu anda membangunkan laman web yang bersih yang lebih mudah untuk mengurus keseluruhan kod.

Menggunakan
Elemen

Elemen div mentakrifkan bahagian logik pada halaman web anda. Ia pada dasarnya adalah sebuah kotak di mana anda boleh meletakkan elemen HTML lain yang secara logiknya bersama. Bahagian boleh mempunyai beberapa elemen lain di dalamnya, seperti perenggan, tajuk, senarai, pautan, imej, dan lain-lain. Bahkan ada bahagian lain di dalamnya untuk menyediakan struktur dan organisasi tambahan pada dokumen HTML anda.

Untuk menggunakan elemen div, letakkan terbuka

tag sebelum kawasan halaman anda yang anda mahu sebagai pembahagian berasingan, dan tutup
tanda selepas itu:

kandungan div

Sekiranya kawasan halaman anda memerlukan beberapa maklumat tambahan yang akan anda gunakan untuk gaya dengan CSS kemudian, anda boleh menambah pemilih id (contohnya,

id = "myDiv">

), atau pemilih kelas (contohnya,

kelas = "bigDiv">

). Kedua-dua atribut ini kemudian boleh dipilih menggunakan CSS atau diubah suai menggunakan JavaScript. Amalan terbaik semasa bersandar ke arah menggunakan pemilihan kelas dan bukannya ID, sebahagiannya kerana pemilih ID khusus. Sebenarnya, anda boleh menggunakan salah satu dan bahkan boleh memberikan pembahagian kedua-dua ID dan pemilih kelas. Bila Digunakan
Lawan

Unsur div adalah berbeza dari elemen seksyen HTML5 kerana ia tidak memberikan kandungan tertutup apa-apa makna semantik. Jika anda tidak pasti sama ada blok kandungan harus menjadi div atau seksyen, fikirkan tentang apa tujuan elemen dan kandungannya untuk membantu anda membuat keputusan untuk menggunakan:

  • Sekiranya anda memerlukan elemen semata-mata untuk menambah gaya ke bahagian halaman, anda harus menggunakan elemen div.
  • Jika kandungan yang terkandung mempunyai fokus yang berbeza dan boleh berdiri sendiri, anda mungkin mahu menggunakan elemen seksyen sebaliknya.

Pada akhirnya, kedua-dua div dan bahagian berkelakuan sama dan anda boleh memberi salah satu daripada mereka nilai atribut dan gaya mereka dengan CSS untuk melihat rupa laman web yang anda perlukan. Kedua-duanya adalah elemen tahap blok.

Menggunakan Elemen

Elemen span adalah elemen sebaris secara lalai. Ini membezakannya daripada elemen div dan seksyen. Unsur span sering digunakan untuk membungkus sekeping kandungan tertentu, biasanya teks, untuk memberikan "cangkuk" tambahan yang boleh digelar kemudian. Digunakan dengan CSS, ia boleh mengubah gaya teks yang dikongkongnya; Walau bagaimanapun, tanpa sebarang atribut gaya, elemen span sahaja tidak mempunyai kesan pada teks sama sekali.

Ini adalah perbezaan utama antara span dan elemen div. Seperti yang disebutkan di atas, elemen div merangkumi peralihan perenggan, manakala unsur span hanya memberitahu penyemak imbas untuk menggunakan peraturan gaya CSS yang berkaitan dengan apa yang disertakan oleh tag:

Teks yang diserlahkan dan teks yang tidak diserlahkan.

Tambah

kelas = "sorot"

atau kelas lain untuk elemen span untuk menyusun teks dengan CSS (mis.,

kelas = "highlight">

). Unsur span tidak mempunyai atribut yang diperlukan, tetapi ketiga-tiga yang paling berguna adalah sama seperti unsur div:

  • gaya
  • kelas
  • ID

Gunakan span apabila anda mahu menukar gaya kandungan tanpa menentukan kandungan itu sebagai elemen tahap blok baru dalam dokumen itu.

Sebagai contoh, jika anda mahu perkataan kedua tajuk h3 menjadi merah, anda boleh mengelilingi perkataan itu dengan elemen span yang akan menggambarkan perkataan itu sebagai teks merah. Perkataan masih kekal sebagai sebahagian daripada unsur h3, tetapi kini juga memaparkan warna merah:

Ini ialah Headline Awesome Saya