Bingkai yang diletakkan di sekitar gambar atau teks menghiasi laman web dan menambah pelbagai reka bentuknya. Sekiranya anda menggunakan jadual untuk membuat sempadan, maka kod untuk setiap sempadan akan memakan terlalu banyak ruang. Juga, dalam kes ini, anda perlu menulis semula kod HTML untuk setiap bingkai. Dengan CSS, anda boleh membuat sempadan dengan ketebalan dan warna yang anda mahukan dengan menulis kod ringkas sekali untuk semua elemen yang akan dikelilingi oleh sempadan ini. Teknologi ini akan memungkinkan, jika perlu, mengubah jenis bingkai di laman web ini dalam beberapa minit.
Ia perlu
- - mempunyai laman web anda sendiri;
- - ketahui apa itu CSS dan di mana gaya ini ditulis di laman web ini.
Arahan
Langkah 1
Untuk membuat sempadan, tulis dahulu kod berikut di CSS:
ramka {}
Langkah 2
Untuk membuat batas sebagai ukuran yang anda inginkan, gunakan parameter lebar sempadan, yang menetapkan lebar garis dalam piksel. Contohnya, jika garis bingkai selebar 3 piksel, maka entri akan kelihatan seperti ini:
ramka {sempadan-lebar: 3px;}
Langkah 3
Sekarang tentukan gaya sempadan menggunakan parameter gaya sempadan. Sekiranya anda ingin membuat sempadan yang sisinya adalah garis padat biasa, kemudian masukkan entri berikut dalam kod antara pendakap keriting - gaya sempadan: padat.
Langkah 4
Batas bertitik dapat diperoleh dengan menulisnya seperti ini: gaya sempadan: putus-putus. Memeriksa gaya sempadan: putus-putus akan memberi anda sempadan putus-putus.
Langkah 5
Anda boleh menjadikan sempadan garis pepejal berganda seperti ini: gaya sempadan: berganda. Gunakan gaya sempadan: alur atau gaya sempadan: rabung untuk membingkai teks atau gambar menjadi bingkai dengan kesan sampingan 3D. Perbezaan antara kedua pilihan ini adalah bahawa dalam kes pertama, bingkai terdiri dari garis lekukan, dan yang kedua, yang cembung.
Langkah 6
Gunakan kod ini: border-style: inset untuk membuat kesan sisipan dengan sempadan elemen laman web. Untuk membuat kandungan sempadan, bersama dengan sempadan, sebaliknya, cembung, tulis gaya sempadan: awal.
Langkah 7
Anda dapat menambahkan warna yang diinginkan ke bingkai menggunakan parameter warna batas, juga diletakkan di antara pendakap keriting. Sekiranya anda ingin menjadikan sempadan merah, maka tulis warna sempadan: merah, biru - warna sempadan: biru, oren - warna sempadan: oren.
Langkah 8
Kod sempadan CSS, termasuk semua pilihan, kelihatan seperti ini:
ramka {sempadan-lebar: 3px; gaya sempadan: padat; warna sempadan: biru;}
Langkah 9
Sekarang, dalam HTML, tulis ini:
Kandungan bingkai Daripada frasa "Kandungan bingkai", masukkan teks atau kod gambar yang diinginkan.
Langkah 10
Oleh itu, anda boleh merancang elemen yang tidak terhad di laman web ini. Untuk mengubah penampilan bingkai, anda hanya perlu menukar kod CSS.
