Bingkai ditempatkan di sekitar gambar atau teks menghiasi situs dan menambah variasi pada desainnya. Jika Anda menggunakan tabel untuk membuat batas, maka kode untuk setiap batas akan memakan terlalu banyak ruang. Juga, dalam hal ini, Anda harus menulis ulang kode HTML untuk setiap frame. Dengan CSS, Anda dapat dengan mudah membuat batas dengan ketebalan dan warna apa pun yang Anda inginkan dengan menulis kode sederhana sekali untuk semua elemen yang akan dikelilingi oleh batas ini. Teknologi ini akan memungkinkan, jika perlu, untuk mengubah jenis bingkai di situs dalam beberapa menit.
Itu perlu
- - memiliki situs web Anda sendiri;
- - tahu apa itu CSS dan di mana gaya ini ditulis di situs.
instruksi
Langkah 1
Untuk membuat perbatasan, pertama tulis kode berikut di CSS:
ramka {}
Langkah 2
Untuk membuat batas ukuran yang Anda inginkan, gunakan parameter lebar batas, yang mengatur lebar garis dalam piksel. Misalnya, jika garis bingkai harus memiliki lebar 3 piksel, maka entri akan terlihat seperti ini:
ramka {border-width: 3px;}
Langkah 3
Sekarang tentukan gaya batas menggunakan parameter gaya batas. Jika Anda ingin membuat batas yang sisi-sisinya berupa garis padat biasa, masukkan entri berikut ke dalam kode di antara kurung kurawal - gaya batas: padat.
Langkah 4
Batas putus-putus dapat diperoleh dengan menuliskannya seperti ini: border-style: dotted. Memeriksa gaya perbatasan: putus-putus akan memberi Anda batas putus-putus.
Langkah 5
Anda dapat membuat perbatasan menjadi garis padat ganda seperti ini: border-style: double. Gunakan gaya tepi: alur atau gaya tepi: punggungan untuk membingkai teks atau gambar ke dalam bingkai dengan efek samping 3D. Perbedaan antara kedua opsi ini adalah bahwa dalam kasus pertama, bingkai terdiri dari garis berlekuk, dan yang kedua, yang cembung.
Langkah 6
Gunakan kode ini: border-style: inset untuk membuat efek sisipan dengan batas elemen situs. Untuk membuat konten perbatasan, bersama dengan perbatasan, sebaliknya, cembung, tulis gaya perbatasan: awal.
Langkah 7
Anda dapat menambahkan warna yang diinginkan ke bingkai menggunakan parameter warna batas, juga ditempatkan di antara kurung kurawal. Jika Anda ingin membuat perbatasan menjadi merah, tuliskan warna batas: merah, biru - warna batas: biru, oranye - warna batas: oranye.
Langkah 8
Kode perbatasan CSS, termasuk semua opsi, terlihat seperti ini:
ramka {border-width: 3px; gaya perbatasan: padat; warna batas: biru;}
Langkah 9
Sekarang, dalam HTML, tulis ini:
Konten bingkai Alih-alih frasa "Konten bingkai", masukkan teks atau kode gambar yang diinginkan.
Langkah 10
Dengan demikian, Anda dapat mendesain elemen dalam jumlah tak terbatas di situs. Untuk mengubah tampilan frame, Anda hanya perlu mengubah kode CSS.
