Apa itu CSS Shotband? Mengenal CSS Shorthand
Daftar isi [Tampil]
Penulisan gambar Margin, Pedding dan Outline
Contoh tulisan margin bisa liat pada contoh seperti yang ada dibawah ini
margin-top:5px;
margin-right:10px;
margin-bottom:20px;
margin-left:25px;
maka Shorthand dari CSS di atas Memiliki artimargin: 5px 10px 20px 25px;
yang perlu diperhatikan cara menulisnya seperti jarum jam atas > kanan > bawah > kiri
Satu Value
margin:10px;
apabila satu value seperti itu, maka artinya semua valua sama memiliki margin:10px
, jadi apabila kode diatas dipanjangkan, hasilnya seperti ini
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
Dua Value
margin: 10px 15px;
karena mempunya dua value (nilai) maka berarti hanya atas dan kanan, bawah dan kiri tidak ada. Maka akan disamakan yang sejajar / bersebrangan. atas=bawah dan kanan=kiri. jadi apabila dipanjangkan hasilnya seperti ini
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;
Tiga Value
margin: 10px 15px 20px;
perhatikan, value yang ada adalah atas > kanan > bawah. Maka untuk kiri yang tidak ada akan disamakan dengan kanan. jadi hasilnya seperti ini
margin-top:10px;
margin-right:15px;
margin-bottom:20px;
margin-left:15px;
Kesimpulannya, apabila 2 atau 3 value maka yang tidak ada akan disamakan dengan yang ada. atas=bawah dan kiri=kanan
Border
Pada property border, nilai yang bisa di set adalahborder-width
, border-style
dan border-color
border: 1px solid black;
apabila diterjemahkan maka hasilnya adalah
border-width: 1px;
border-style: solid;
border-color: black;
Font
Contoh dari CSS Shorthand pada Fontfont: bold italic small-caps 16px/30px Arial, sans-serif;
maka artinya adalah
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
line-height: 30px;
font-family: Arial, sans-serif;
Background
Contoh Shorthand pada CSS Backgroundbackground: #fff url(kangismet.png) no-repeat top right fixed;
maka artinya adalah
background-color: #fff;
background-image: url(sudarblogger.png);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
CSS Backround di CSS3
Pada CSS3 ada penambahanbackground-size
, background-origin
dan background-clip
. Dan ini bisa digabung pada CSS Shorthand di atas. Maka sebagai contoh seperti ini
background: #fff url(kangismet.png) no-repeat top right fixed / 50% 30% border-box content-box;
List
Contoh CSS Shorthand pada Listlist-style: circle inside url(bullet.gif);
maka artinya
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
Color
Warna juga bisa disingkat seperti#ffffff
menjadi #fff
atau #33dd77
menjadi #3d7
. Tapi memang lebih mudah yang mempunyai 6 digit sama. atau dengan penyebutan warna seperti color: red;
.
Semoga bermanfaat...
Post a Comment