Bagaimana untuk menambah sempadan html

Cara menambah sempadan HTML

Dalam HTML, sempadan ialah cara mudah untuk menambah sempadan yang boleh dilihat pada elemen. Sempadan boleh digunakan di sekeliling kandungan elemen untuk mencipta bingkai visual. Sempadan boleh digunakan pada jadual, imej, kotak teks dan elemen HTML lain. Dalam artikel ini, kami akan meneroka sempadan HTML dan cara menambah sempadan pada halaman web anda.

Jenis sempadan HTML

Jenis sempadan ialah atribut biasa dalam CSS. Dalam HTML, terdapat tiga jenis sempadan untuk dipilih: pepejal, putus-putus dan bertitik.

1. Sempadan pepejal:

Sempadan muncul dalam bentuk garisan pepejal dan merupakan jenis sempadan yang paling biasa. Mereka ditakrifkan sebagai "pepejal".

2. Sempadan bertitik:

Sempadan muncul dalam bentuk garis putus-putus, yang merupakan kesan selang waktu dan ditakrifkan sebagai "terputus-putus".

3. Jidar bertitik:

Jidar muncul dalam bentuk garis putus-putus, terdiri daripada titik dan garis kosong, dan ditakrifkan sebagai "bertitik".

Cara menambah sempadan HTML

Untuk menambah sempadan pada halaman HTML, gunakan helaian gaya CSS. Helaian gaya CSS membolehkan anda menukar gaya dan susun atur elemen HTML. Sempadan boleh digunakan pada kebanyakan elemen HTML, contohnya:

1 Imej

Anda boleh menambah sempadan pada imej menggunakan lembaran gaya CSS berikut:

img {

.

border: 2px solid black;

}

Dalam kod di atas, kami menggunakan sempadan hitam pepejal lebar 2 piksel pada semua imej.

2. Jadual

Dalam jadual, anda boleh menggunakan helaian gaya CSS berikut untuk mengubah suai ciri sempadan luar:

jadual {

border: 2px solid black;
border-collapse: collapse;

}

Lembaran gaya di atas menggunakan sempadan pepejal lebar 2 piksel pada jadual. Ambil perhatian bahawa kami juga menetapkan sifat "runtuh sempadan" kepada "runtuh" ​​untuk memastikan tiada jarak tambahan antara sel.

3. Butang

Anda boleh menambah jidar pada butang untuk menjadikannya lebih menonjol. Berikut ialah contoh kod untuk menambahkan jidar pada butang:

butang {

border: 2px solid black;

}

Ini akan menggunakan sempadan hitam pepejal lebar 2 piksel pada semua butang.

4. Kotak Teks

Kotak teks ialah satu lagi elemen biasa yang anda mungkin ingin tambahkan sempadan. Berikut ialah contoh kod untuk menambahkan sempadan pada kotak teks:

input[type=text] {

border: 2px solid black;

}

Ini akan menambah hitam pepejal lebar 2 piksel sempadan Digunakan pada semua kotak teks.

Kesimpulan

Menambah sempadan ialah langkah asas dalam reka bentuk web HTML. Ia membantu anda meningkatkan penampilan dan kebolehbacaan halaman anda. Artikel ini menerangkan tiga jenis sempadan HTML dan cara menambah sempadan pada imej, jadual, butang dan kotak teks dengan menggunakan helaian gaya CSS. Menguasai seni sempadan HTML boleh menjadikan tapak web anda lebih profesional dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk menambah sempadan html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!