Cascading Style Sheets: Perbedaan antara revisi
Konten dihapus Konten ditambahkan
Penambahan materi baru dengan judul "Shorthand CSS" yang sebelumnya tidak tercantum. |
|||
Baris 80:
</html>
</source>
== Shorthand CSS ==
Teknik shorthand 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.
# margin-top
# margin-right
# margin-bottom
# 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:
# Margin
# Padding
# Font
# Background
# Border
# List
=== Margin ===
<syntaxhighlight lang="css">
margin: 3px 5px 7px 10px;
</syntaxhighlight>Artinya:<blockquote>margin-top: 3px;</blockquote><blockquote>margin-right: 5px;</blockquote><blockquote>margin-bottom: 7px;</blockquote><blockquote>margin-left: 10px;</blockquote>
=== Padding ===
<syntaxhighlight lang="css">
padding: 3px 5px 7px 10px;
</syntaxhighlight>Artinya:<blockquote>padding-top: 3px;</blockquote><blockquote>padding-right: 5px;</blockquote><blockquote>padding-bottom: 7px;</blockquote><blockquote>padding-left: 10px;</blockquote>
=== Font ===
<syntaxhighlight lang="css">
font: italic bold 14px/30px Arial;
</syntaxhighlight>Artinya:<blockquote>font-style: italic;</blockquote><blockquote>font-weight: bold;</blockquote><blockquote>font-size: 14px;</blockquote><blockquote>line-height: 30px;</blockquote><blockquote>font-family: Arial;</blockquote>
=== Background ===
<syntaxhighlight lang="css">
background: #cc0000 url('igniel.jpg') no-repeat top center;
</syntaxhighlight>Artinya:<blockquote>background-color: #cc0000;</blockquote><blockquote>background-image: url('igniel.jpg');</blockquote><blockquote>background-repeat: no-repeat;</blockquote><blockquote>background-position: top center;</blockquote>
=== Border ===
<syntaxhighlight lang="css">
border: 3px solid #0000cc;
</syntaxhighlight>Artinya:<blockquote>border-width: 5px;</blockquote><blockquote>border-style: solid;</blockquote><blockquote>border-color: #0000cc;</blockquote>
=== List ===
<syntaxhighlight lang="css">
list-style: disc inside url('dot.gif');
</syntaxhighlight>Artinya:<blockquote>list-style-type: disc;</blockquote><blockquote>list-style-position: inside;</blockquote><blockquote>list-style-image: url('dot.gif');</blockquote>
== Sifat CSS ==
| |||