Border dan Outline

 

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 :

            

            1. Height dan Width

            2. Margin dan Padding

            3. Border dan Outline

            4. Position

            5. Overflow

            6. Float dan Clear

            7. Display dan Visibility

 -----------------lanjutan

 3. Border dan Outline

  •   property border, memberikan bingkai pada box.
  •   property border punya 2 turunan
  1. Sisi border (border-top, border-right, border-bottom dan border-left) 
  2. 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 :

  
Semoga bermanfaat buat sobat yang baru tauπŸ‘ŠπŸ‘ŠπŸ‘‹πŸ˜‰

Posting Komentar

0 Komentar

Comments