 |
| Sumber gambar : www.bitdegree.org |
7. Property CSS
a) Box Model
merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur
desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :
3. Border dan Outline
-----------------lanjutan
3. Border dan Outline
- property border, memberikan bingkai pada box.
- property border punya 2 turunan
- Sisi border (border-top, border-right, border-bottom dan border-left)
- Tampilan border (border-width = tebal bingkai), border-style = sifat bingkai) dan border-color =warna bingkai).
- Kedua bagian tersebut dapat digabung lagi menjadi :
border-top-style, border-left-style, border-top-color, border-left-color, border-top-size dan sebagainya.
- Nilai dari border-style yang dapat diberikan yaitu : dotteed, dashed, solid, double, groove, ridge, inset, outset,none, hidden dan mix.
- Sama seperti padding, border juga menambahkan total lebar dari sebuah box, misalnya lebar box 20px dan border 2px, maka total lebar menjadi 24px karena ada penambahan 2px sisi kanan dan 2px pada sisi kiri.
Ada propery yang sejenis dengan border yaitu outline. Turunan dan aturan penggunaan outline sama persis dengan border dan nilai property yang diberikan pun sama. Bedanya, outline tidak termasuk dari bagian element, sehingga tidak mempengaruhi lebar box.
“Ada satu turunan property outline yang tidak dimiliki border yaitu outset-offset yang mengatur jarak outline dengan elemen box”.
Perhatikan contoh script dibawah ini dengan nama file border.html
<html>
<head>
<style type="text/css">
.kotak{
background:red;
width: 200px;
height: 50px;
margin: 20px;
}
.border{border: 5px solid blue;}
.outline{
outline: 5px solid blue;
outline-offset: 10px;
}
</style>
</head>
<body>
<div class="kotak border"></div>
<dix class="kotak outline"></dix>
</body>
</html>
Pada website akan terlihat sebagai berikut :
0 Comments