Batas digunakan di halaman HTML untuk membatasi dan menyorot konten. Jika ada banyak informasi di halaman dan Anda ingin menarik perhatian pengguna ke bagian tertentu, gunakan batas di sekitar konten tersebut. Dalam artikel tentang Perbatasan di CSS ini, saya akan membahas topik-topik berikut:
- Kapan menggunakan Borders
- Perbatasan di CSS
- Atribut Perbatasan CSS
- Nilai default untuk Border Attributes
- Tentukan Batas dalam Singkatan
- Hal-hal yang perlu diingat saat Mendesain Perbatasan di CSS
Kapan menggunakan Borders
Praktik standarnya adalah menggunakan tag batas CSS untuk menentukan batas di halaman HTML untuk:
- Di sekitar judul penting
- Untuk menyorot postscript atau catatan penting
- Untuk melampirkan gambar, ilustrasi, kutipan dari orang, video
- Untuk menarik perhatian ke harga, jadwal atau informasi penting semacam itu
Anda mungkin ingin membaca tentang sebelum melanjutkan mempelajari tentang batas CSS.
Untuk tutorial CSS yang komprehensif, kunjungi Tutorial CSS Edureka Untuk Pemula . Anda akan mendapatkan informasi awal yang luar biasa tentang cara penggunaan CSS untuk meningkatkan desain web HTML.
Perbatasan di CSS
Batas CSS dapat ditetapkan ke berbagai bagian halaman HTML, apakah itu untuk menyertakan judul atau paragraf. Mari kita mulai dengan sebuah contoh. Di sini kami menentukan batas di sekitar tajuk dan batas lain di sekitar teks paragraf.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Batasi juga di sekitar paragraf!
Atribut Perbatasan CSS
Batas CSS memiliki 3 atribut utama
- gaya:Itugayaatribut mendefinisikan pola perbatasan.
- warna: Warnanya bisa salah satu dari kumpulan yang ditentukan oleh warna CSS.
- lebar: Lebarnya digunakan untuk memvariasikan ketebalan border, agar lebih menonjol.
Pada contoh di atas, kita melihat bahwa hanya satu atribut border yang didefinisikan, yaitu gayanya. Atribut lain jika tidak ditentukan menggunakan nilai default. Ada atribut lain yang disebut radius, yang lebih jarang digunakan. Ini digunakan untuk membuat tepi perbatasan membulat.
- gaya pembatas atribut
| Gaya | Deskripsi |
| gaya pembatas: solid | |
| border-style: double | |
| gaya batas: alur | |
| border-style: ridge | |
| border-style: inset | |
| border-style: outset | |
| border-style: tidak ada | |
| border-style: hidden | |
| border-style: dotted | |
| border-style: putus-putus |
Anda akan melihat bahwa ada opsi 'tanpa batas' dan 'batas tersembunyi' juga. Pengembang dapat dengan mudah menghindari mendefinisikan perbatasan, mengapa secara eksplisit mendefinisikannya sebagai 'perbatasan tersembunyi'? Ini dilakukan untuk penggunaan ruang dan tujuan penyelarasan dengan elemen lain di halaman.
Gaya batas juga dapat dicampur dalam satu elemen. Untuk tujuan ini, 4 sisi perbatasan individu dapat ditentukan secara terpisah dengan gaya yang berbeda. Ini bisa dilakukan dengan 2 cara. Tentukan keempat sisi dalam satu tag. Dalam hal ini, penghitungan dimulai dari garis atas dan kemudian bergerak searah jarum jam. Alternatifnya, masing-masing dari 4 garis batas juga dapat ditentukan dalam tag individual. Kedua kasus tersebut diperlihatkan dalam Contoh berikutnya.
| Gaya | Deskripsi |
| border-style: titik-titik putus-putus padat ganda border-top-style: dotted border-right-style: putus-putus border-bottom-style: solid border-left-style: double |
- warna batas atribut
Atribut warna untuk perbatasan dapat disetel dengan berbagai cara. Ini mirip dengan mengatur warna untuk elemen lainnya. Warna dapat diatur dengan salah satu metode berikut:
- nama - tentukan nama warna, seperti 'biru'. Anda juga dapat mencoba beberapa pilihan warna mewah seperti 'BlanchedAlmond'!
- Hex - tentukan nilai hex, seperti '# ff0000'
- RGB - atur kode RGB. Misalnya, rgb (255.255,0) berarti Kuning.
- pengaturan - seperti 'transparan' atau 'buram'
- lebar batas atribut:
Properti lebar, seperti namanya, mendefinisikan ketebalan dari 4 sisi perbatasan. Jika satu nilai ditentukan, itu untuk semua sisi, jika tidak, nilai lebar individual juga dapat diatur.
Lebar dapat ditentukan di salah satu unit standar seperti piksel ('px'), poin ('pt') atau dalam sentimeter ('cm'). Anda juga dapat menentukan lebar menggunakan nilai 'tebal', 'tipis' dan 'sedang' yang telah ditentukan sebelumnya.
| Gaya | Deskripsi |
| lebar batas: 10 piksel | |
| lebar batas: 0,1 cm | |
| lebar batas: sedang |
- radius batas atribut
Tujuan dari menentukan radius adalah untuk mendapatkan sudut membulat untuk perbatasan. Faktor radius menentukan tingkat kebulatan. Semakin besar nilainya, semakin melengkung sudutnya. Sebagai praktik standar, nilai radius dipertahankan antara 1-3 kali lebar batas.
Kode berikut akan menghasilkan:
lebar batas: 10 piksel
radius batas: 30 piksel
Nilai Default untuk Atribut Perbatasan
Atribut wajib satunya adalah gaya . Jika gayanya hilang, batas tidak akan muncul.
Jika warna tidak ditentukan, warna dari elemen yang mendasari diambil sebagai nilai default. Misalnya, jika warna teks sebuah paragraf ditentukan sebagai 'biru', warna batas default juga akan menjadi biru. Jika tidak ada definisi warna bahkan untuk elemen tersebut, maka warna default adalah 'hitam'.
Nilai default untuk lebar adalah 'medium'.
Tentukan Batas dalam Singkatan
Beberapa pengembang lebih suka menentukan atribut perbatasan dalam tag satu baris yang ringkas. Format singkatan ini membantu meminimalkan baris kode dan pengembang ahli lebih memilih format ini. Direkomendasikan untuk menggunakan format singkatan jika definisi border sederhana dan cukup standar. Namun, jika Anda perlu menyorot setiap sisi perbatasan dengan gaya yang berbeda, maka Anda harus tetap menggunakan format untuk menentukan tag individu.
Kode berikut digunakan:
border-style: putus-putus
warna batas: hijau
lebar batas: 5 piksel
perbatasan: hijau putus-putus 5px
cara mengkloning objek di java
Hal-hal yang perlu diingat saat Mendesain Perbatasan di CSS
Jangan menggunakan terlalu banyak batas dalam halaman, karena dapat mengganggu dan mempersulit pengguna untuk fokus.
Penting untuk menjaga konsistensi gaya dan warna bingkai. Elemen dalam tingkat hierarki yang sama di halaman harus memiliki gaya dan lebar batas yang sama agar seragam. Misalnya, jika gugus kalimat didefinisikan dengan batas padat dan lebar 5 piksel, pertahankan format ini di sepanjang lainnya gugus kalimat elemen selama desain situs web.
Tetap berpegang pada satu gaya definisi tag. Beberapa pengembang merasa nyaman dengan definisi pintasan dengan semua nilai yang ditetapkan ke satu berbatasan menandai. Beberapa lainnya lebih suka daftar eksplisit semua tag untuk lebar, warna dan gaya. Ketentuannya adalah ketika dekorasi perbatasan yang rumit diperlukan dalam sebuah halaman, masing-masing tag dicantumkan secara terpisah. Ini membantu selama debugging definisi perbatasan yang disesuaikan. Untuk kasus normal, definisi jalan pintas sudah cukup.
Semoga Anda menemukan informasi yang Anda cari di perbatasan CSS, dan wengan ini, kita sampai pada akhir artikel Borders in CSS ini.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini termasuk pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog 'Border in CSS' dan kami akan menghubungi Anda kembali.