✓ Teknik ShortHand CSS

Teknik ShortHand CSS

CSS
Teknik shorthand CSS adalah cara mempersingkat penulisan kode CSS yang memungkinkan untuk menetapkan nilai beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, menghemat energi, dan tentu saja menghemat waktu. Kode jadi terlihat lebih rapi, efisien, dan seringkali lebih mudah dibaca.
Dalam CSS, adalah wajar jika satu property memiliki banyak elemen. Misalnya dalam CSS margin memiliki 4 property untuk setiap sisi elemen.
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
Jika menggunakan teknik shorthand CSS, maka penulisan semua property bisa disatukan demi terciptanya kode yang lebih ringkas. Urutan penulisan syntax pada teknik shorthandharus benar agar sesuai dengan style yang diinginkan.
Untuk saat ini metode penulisan shorthand CSS tersedia untuk beberapa property berikut:
  1. Margin
  2. Padding
  3. Font
  4. Background
  5. Border
  6. List

Margin :


margin: 3px 5px 7px 10px;
Artinya:

margin-top: 3px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 10px;

Pading :


           Padding: 3px 5px 7px 10px;
Artinya:

padding-top: 3px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 10px;

 Font :

font: italic bold 14px/30px Arial;
Artinya:

font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 30px;
font-family: Arial;

Background :


background: #cc0000 url('igniel.jpg') no-repeat top center;
Artinya:
background-color: #cc0000;
background-image: url('igniel.jpg');
background-repeat: no-repeat;
background-position: top center;

Border :

border: 3px solid #0000cc;
Artinya:

border-width: 5px;
border-style: solid;
border-color: #0000cc;

List :


list-style: disc inside url('dot.gif');
Artinya:

list-style-type: disc;
list-style-position: inside;
list-style-image: url('dot.gif');


Source : wikipedia.com/id/

Belum ada Komentar untuk "Teknik ShortHand CSS"

Posting Komentar

Komentarlah Dengan Relavant

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel