CSS apa itu shorthand?

dengan teknik shorthand ini kita bisa menghemat sedikit atau banyak waktu. yups, shorthand adalah metode penulisan css, dimana property dan valuenya disingkat

Aturan nomor satu bagi masyarakat yang benar-benar beradab adalah membiarkan manusia berbeda-beda. David Grayson

dengan teknik shorthand ini kita bisa menghemat sedikit atau banyak waktu. yups, shorthand adalah metode penulisan css, dimana property dan valuenya disingkat

Last Modif at July 8th, 2011

shorthand adalah salah satu teknik penulisan dalam css, selain fungsi utamanya merubah maupun mendesign website. css ini juga dilengkapi berbagai macam teknik penulisan, kali ini kita akan share tentang shorthand. dengan teknik shorthand ini kita bisa menghemat sedikit atau banyak waktu. yups, shorthand adalah metode penulisan css, dimana property dan valuenya disingkat.

tidak semua property dan value css dapat di shorthand(disingkat)

aturan penulisan shorthand

selector_atau_taghtml{
property:value1(spasi)value2(spasi)value3;
}

contoh markup style dengan shorthand pada inline style

contoh pertama tanpa shorthand

yang kita jadikan contoh adalah property font, karena property font ini support atau dilengkapi

dengan shorthand

contoh markup style

<div style="background-color:blue;
width:300px;
font-style:italic;
font-weight:bold;
font-size:20px;
font-family:times;
">
ini adalah contoh shorthand inline style
</div>

tampilan

ini adalah contoh shorthand inline style

contoh kedua ditulis dengan shorthand

contoh markup style

<div style="background-color:blue;
width:300px;
font:italic bold 20px times;">
ini adalah contoh shorthand inline style
</div>

tampilan

ini adalah

contoh shorthand inline style

keterangan

  • terlihat jelas tampilanya sama!
  • coba perhatikan markup stylenya!
  • pada contoh pertama terlihat stylenya lebih banyak, sedangkan contoh kedua

    stylenya lebih sedikit!

contoh shorthand dalam internal style

perhatikan code markup dibawah

<html>
<head>
<title>css shorthand</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#style_tanpa_shorthand{
font-style:italic;
font-weight:bold;
font-size:30px;
font-family:times;
}
#style_dengan_shorthand{
font: italic bold 30px times;
}
#style_tanpa_shorthand2{
border-top-style:solid;
border-top-color:red;
border-top-width:4px;
}
#style_dengan_shorthand2{
border-top:4px solid red;
}
</style>
</head>
<body>
<h3 id="style_tanpa_shorthand">judul h3, tampilanya sama. hanya saja stylenya ditulis

tanpa shorthand</h3>
<h3 id="style_dengan_shorthand">judul h3, tampilanya sama. hanya saja stylenya ditulis

dengan shorthand</h3>
<h4 id="style_tanpa_shorthand2">judul h4, tampilanya sama. hanya saja stylenya ditulis

tanpa shorthand</h4>
<h4 id="style_dengan_shorthand2">judul h4, tampilanya sama. hanya saja stylenya ditulis

dengan shorthand</h4>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.net" title="indam site"

target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohshorthandcss.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

beberapa property yang support dengan shorthand

  • font
  • border
  • background
  • padding
  • margin

References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS apa itu shorthand?”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-