Penerapan CSS (Part 2)

I.Latar Belakang.Latar belakang kali ini kita masih mengenal sintag tentang CSS untuk memperindah tamoilan web / program.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime text

III.Tujuan.
 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.

CSS Borders

Gaya perbatasan

borderproperti menentukan jenis perbatasan apa yang akan ditampilkan.
Nilai-nilai berikut yang diizinkan:

  •     dotted - Mendefinisikan perbatasan bertitik
  •     dashed - Mendefinisikan perbatasan putus-putus
  •     solid - Mendefinisikan sebuah perbatasan yang solid
  •     double - Mendefinisikan perbatasan ganda
  •     groove- Mendefinisikan sebuah perbatasan berlekuk 3D. Efeknya tergntung pada nilai border-color
  •     ridge- Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
  •     inset- Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-color
  •     outset- Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color
  •     none - Mendefinisikan ada batas
  •     hidden - Mendefinisikan perbatasan tersembunyi

border-styleproperti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).  

Contoh :

 Maka outputnya :

  perbatasan Lebar
border-widthproperti menentukan lebar empat perbatasan.
Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
border-widthproperti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).

Contoh :

 Maka outputnya :

 Warna perbatasan
border-colorproperti digunakan untuk mengatur warna dari empat perbatasan.

warna dapat diatur oleh:

    nama - menentukan nama warna, seperti "merah"
    Hex - menentukan nilai hex, seperti "# ff0000"
    RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
    jelas
border-colorproperti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).
Jika border-colortidak diatur, itu mewarisi warna dari elemen.

Contoh :

 Maka outputnya :

Border - Individual Sides

Dari contoh di atas Anda telah melihat bahwa adalah mungkin untuk menentukan perbatasan yang berbeda untuk setiap sisi.

Dalam CSS, ada juga properti untuk menentukan masing-masing perbatasan (atas, kanan, bawah, dan kiri)

Contoh :

 Maka outputnya :

Jadi, di sini adalah cara kerjanya:

Jika border-styleproperti memiliki empat nilai:
 border-style: dotted ganda padat putus-putus;
        batas atas dihiasi
        batas kanan solid
        batas bawah adalah ganda
        perbatasan kiri putus-putus

Jika border-styleproperti memiliki tiga nilai:

    border-style: dotted padat ganda;
        batas atas dihiasi
        perbatasan kanan dan kiri yang padat
        batas bawah adalah ganda

Jika border-styleproperti memiliki dua nilai:

    border-style: dotted padat;
        batas atas dan bawah yang putus-putus
        perbatasan kanan dan kiri yang padat

Jika border-styleproperti memiliki satu nilai:

    border-style: dotted;
        keempat perbatasan yang putus-putus

border-styleproperti yang digunakan dalam contoh di atas. Namun, ia juga bekerja dengan border-width dan border-color

Border - Properti Steno

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan perbatasan.

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti perbatasan individu dalam satu properti.
borderproperti adalah properti singkatan untuk properti border individu berikut:

    border-width
    border-style (wajib)
    border-color

Contoh :
p {
    border: 5px solid red;
}

V.Kesimpulan.
CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML.

VI.Refrensi.    http://www.w3schools.com/css

Komentar

Posting Komentar

Postingan Populer