Jumat, 20 Maret 2015

Properti text-align Css

Text-align merupakan properti css untuk mengatur rata teks (paragraf).

Kegunaan
Paragraf-paragraf pada halaman web di format sedemikian rupa untuk mendapatkan desain bagus serta mudah dibaca pengunjung. Css mampu mengatur paragraf rata; kiri, tengah, kanan,  atau kiri-kanan dengan properti text-align.

Nilai properti text-align
left : memformat paragraf rata kiri.
center : memformat paragraf rata tengah.
right : memformat paragraf rata kanan.
justify : memformat paragraf rata kiri-kanan.

Penulisan sintak text-align
text-align: nilai; contoh: text-align: center;

Contoh: talign.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti text-align css</title>
            <style type="text/css">
            div{background-color:#fcc;
            width:500px;margin-bottom:10px;}
            div.kiri{text-align:left;}
            div.tengah{text-align:center;}
            div.kanan{text-align:right;}
            div.kiri_kanan{text-align:justify;}
            </style>
        </head>
    <body>
        <div class="kiri">Sepeda balap atau sepeda gunung
        perlu dirawat agar tetap mengkilap dan tahan lama.
        Pelru dicuci secara berkala baik telah melewati trek
        basah atau tidak. Jika melewati trek basah, maka pencucian
        lebih lama dan mendalam. Tetapi jika hanya membersihkan abu,
        maka cukup sederhana saja.</div>
        <div class="tengah">Piringan (cakram) perlu dibersihkan agar
        cengkram rem tetap kuat. Anda harus menghindari cakram dari oli
        karena membuat fungsi rem tidak bekerja karena licin. Untuk mencuci
        cakram tidak mengusapnya dengan kain, tetapi cukup gunakan brush
        dan hati-hati.</div>
        <div class="kanan">Jika cakram terlanjur terkena oli saat melumasi
        rantai, cara membersihkannya, tuangkan cairan pencuci piring ke atas
        kain rem, putar ban sambil menekan rem. Gesekan kain rem dengan cakram
        akan membersihkan cakram. Bilas dan ulangi.
        </div>
        <div class="kiri_kanan">Saat memarkir sepeda, posisikan gigi depan
        dan belakang ke posisi paling rendah (gigi 1). Sebab dalam gigi posisi
        tinggi, tali gigi dalam posisi tegang. Jika parkir di kampus, disarankan
        untuk di rantai (dikunci) untuk menghindari pencurian.
        </div>
    </body>
</html>


Keterangan: Diawali dengan tag div, dengan lebar 500px, warna latar #fcc. Gunanya untuk melihat bagaimanan teks diformat sesusai nilai text-align. Efek tag div berlaku juga untuk div.kiri sampai div.kiri_kanan (lebar dan warna latar). Warna latar sengaja dipilih warna cerah untuk melihat batas tepi dengan rata teks.

Tampilan:

Tampilan text-align pada paragraf.
Referensi tulisan:
  1. text-align css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 20 Maret 2015.

Tidak ada komentar:

Posting Komentar