Blog e arek Mblitar..
ISLAM CORNER | HANDPHONE | WINDOWS TRICK | SEO | SOFTWARE | VIRUS | ISENG | CBOX TRICK | CSS TUTORIAL | HACKING | BLOGGING TIPS | INTERNET | HTML TUTORIAL |

Tutorial CSS TEXT SPACE

Adanya kode CSS memungkinkan kita untuk mengatur jarak spasi antar karakter , spasi antar kata dan spasi antar baris dengan sangat mudah. Kalau kita ingin membuat jarak spasi yang lain daripada yang lain, maka kode CSS menjadi salah satu alternatifnya.
Property yang kita gunakan ialah :
  • letter-spacing ( untuk mengatur spasi antar karakter )
  • line-height ( untuk mengatur spasi antar baris )
  • word-spacing ( untuk mengatur spasi antar kata )
CSS letter-spacing

Property letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti) lihat css unit
Contoh kode CSS untuk mengatur spasi antar karakter:


<html>

<head>
<style type="text/css">
h1 {letter-spacing: -2px}
h3 {letter-spacing: 0.5cm}
</style>
</head>

<body>
<h1>Header 1 menggunakan spasi = -2 piksel </h1>
<h3>Header 3 menggunakan spasi = 0.5 centi meter </h3>
</body>

</html>


Contoh Tampilan:

Header 1 menggunakan spasi = -2
piksel

Header 3 meng

gunakan spasi =

0.5 centi meter



CSS line-height

Property line-height mempunyai empat nilai (value) yaitu
- normal (default)
- angka ( angka ini akan dikalikan ukuran huruf yang berlaku)
- panjang (memberikan jarak yang pasti) lihat css unit
- % (prosentase dari ukuran huruf yang berlaku)

Contoh kode CSS untuk mengatur spasi antar baris:

<html>

<head>
<style type="text/css">
p.rapet {line-height: 90%}
p.renggang {line-height: 2em}
p.panjang {line-height: 5}
</style>
</head>

<body>
<p>Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
</p>
<p class="rapet">
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
</p>
<p class="renggang">
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
</p>
<p class="panjang">
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
</p>

</body>

</html>


Contoh Tampilan:

Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.


CSS word-spacing

Property letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti) lihat css unit
Contoh kode CSS untuk mengatur spasi antar kata:


<html>

<head>
<style type="text/css">
p
{
word-spacing: 1cm
}
</style>
</head>

<body>
<p>Paragrap ini menggunakan spasi antar kata 1 cm</p>
</body>

</html>


Contoh Tampilan:



Paragrap ini menggunakan spasi antar
kata 1 cm

0 comments:

TULIS KOMENTAR ANDA..!!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger