Bagaimanakah anda membuat kotak yang diisi dengan warna dalam HTML/CSS?

Gambaran Keseluruhan

HTML dan CSS ialah teknologi yang dengannya kita boleh mencipta sebarang bentuk dan sebarang bingkai. Untuk membuat kotak yang diisi dengan warna boleh dilakukan menggunakan HTML kerana kita boleh membuat bingkai kotak yang mudah dengan bantuan HTML dan boleh mengisinya dengan warna menggunakan sifat CSS. Kita juga boleh menggunakan atribut HTML "svg" (grafik vektor skalar) untuk melukis kotak dan atribut warna isian untuk mengisi kotak dengan warna.

Tatabahasa

Sintaks untuk menggunakan svg untuk mencipta kotak dan mengisinya dengan warna adalah seperti berikut. Ia mengandungi empat atribut: x, y, lebar, tinggi dan padding. Jadi, paksi-x menetapkan kedudukan mendatar kotak berbanding skrin, paksi-y menetapkan kedudukan menegak, ketinggian menetapkan ketinggian kotak, lebar menetapkan lebar kotak, dan sifat isian ditetapkan. warna kotak di dalam kotak.

<svg>
   <rect x=“” y=“” width=“” height=“” fill=“” />
</svg>

Algoritma 1

• Buat fail HTML dalam editor teks yang mengandungi boilerplate HTML.

• Sekarang tambahkan teg svg pada badan HTML.

<svg></svg>

• Sekarang buat kotak di dalam teg svg menggunakan penanda semantik .

<rect/>

• Sekarang tetapkan sifat seperti x, y, lebar, tinggi dan padding dalam tag .

<rect width="100" height="100" fill="green" />

• Sekarang buka penyemak imbas anda dan anda akan melihat kotak yang dipenuhi dengan warna.

Contoh 1

Dalam contoh ini, kami akan menggunakan tag svg HTML untuk melukis kotak dengan bantuan atribut .

    


    
 Created using svg 
    

Algoritma 2

• Buat fail index.html pada editor teks dan tambahkan boilerplate HTML pada fail

• Sekarang tambahkan bekas div pada badan HTML

<div></div>

• Sekarang tambahkan teg gaya dalaman pada teg kepala HTML.

<style></style>

• Sekarang gunakan sifat gaya CSS untuk menetapkan ketinggian, lebar dan warna kotak.

<style>
   div{
      width: 10rem;
      height: 10rem;
      background-color: green;
   }	
</style>

• Buka pelayar, kotak berjaya dibuat dan diisi dengan warna.

Contoh 2

Dalam contoh ini, kami akan mencipta kotak dengan bekas div HTML dan akan menggunakan sifat gaya CSS untuk mengisi kotak dengan warna.

    
    


    <div></div>

Kesimpulan

Sama seperti kami menggunakan svg (grafik vektor skalar) untuk mencipta kotak, kami juga boleh mencipta pelbagai bentuk dengannya. Cara terbaik untuk mencipta kotak penuh warna ialah menggunakan bekas div ringkas dengan beberapa sifat gaya CSS, kerana dengan CSS anda boleh menyesuaikan kotak dengan mudah dalam helaian gaya yang berasingan. Dalam projek kecil, bekerja dengan svg mungkin tidak kelihatan sukar, tetapi jika anda perlu membina kotak yang sama beberapa kali, menulis kod yang sama beberapa kali adalah tugas yang sukar. Jika anda tidak mahu menukar kedudukan kotak, anda tidak perlu menggunakan atribut "x" dan "y" dengan "". Kotak jenis ini digunakan untuk memuatkan animasi atau boleh digunakan sebagai kad untuk memaparkan maklumat

Atas ialah kandungan terperinci Bagaimanakah anda membuat kotak yang diisi dengan warna dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!