Sabtu, 28 Maret 2015

Properti text-decoration Css

Properti text-decoration digunakan untuk mengatur format teks seperti menggarisbawahi, memberi garis atas dan coretan.

Penulisan sintak
text-decoration: value;

Value
none : nilai default, tidak memberikan efek apapun.
underline : memberi garis bawah pada teks.
overline : memberi garis di atas teks.
line-through : memberi coretan pada teks.

Kombinasi value
Anda dapat memberi nilai value dari satu. Contohnya menggabung underline dengan overline, line-through dan overline ata kombinasi lainnya.

Contoh: textdecor.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti text-decoration css</title>
            <style type="text/css">
            p.none{text-decoration:none;}
            p.underline{text-decoration:underline;}
            p.overline{text-decoration:overline;}
            p.linethrough{text-decoration:line-through;}
            p.underover{text-decoration:underline overline;}
            p.lineover{text-decoration:line-through overline;}
            </style>
        </head>
    <body>
        <p class="none">Value none. Tidak memberikan efek apapun, nilai default.</p>
        <p class="underline">Underline</p>
        <p class="overline">Overline</p>
        <p class="linethrough">Linethrough</p>
        <p class="underover">Underline dan Overline</p>
        <p class="lineover">Line-through Overline</p>
    </body>
</html>

Tampilan di browser:

Tampilan di Firefox.
Referensi tulisan:
  1. text-decoration css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Maret 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Diposting oleh di Tidak ada komentar:

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.
Diposting oleh di Tidak ada komentar:

Kamis, 12 Maret 2015

Properti line-height Css

Properti line-height pada css digunakan untuk menentukan jarak spasi (vertikal) paragraf.

Nilai line-height

Normal
Nilai line-height sekitar 1.2em atau 1.1em, tetapi tergantung browser yang digunakan dan elemen font.

Number
Nilai line-height didapat dari hasil kali ukuran font dengan 1.1. Misalnya, ukuran font (font-size) 30px, maka 30px × 1.1) = 33px. Line heightnya sekitar 33px. Namun, ini tidak harus diterapkan - Anda bebas menaikkan nilai line-height atau menurunkannya.

Percentage
Nilai line-height ditentukan dalam persen (%). Line-height 1.2 em sama dengan  120% (120/100).

Contoh: lineheight.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti line-height</title>
            <style type="text/css">
            div.box1{font-size:20px; line-height:22px; margin-bottom:1em;}
            div.box2{font-size:15px; line-height:16.5px; margin-bottom:1em;}
            div.box3{font-size:10px; line-height:1.2em; margin-bottom:1em;}
            </style>
        </head>
    <body>
        <div class="box1">4mcss.blogspot.com merupakan blog tempat belajar css.
        4mcss.blogspot.com merupakan blog tempat belajar css.
        4mcss.blogspot.com merupakan blog tempat belajar css.
        4mcss.blogspot.com merupakan blog tempat belajar css.
        4mcss.blogspot.com merupakan blog tempat belajar css.</div>
        <div class="box2">Css di dunia nyata seperti sayur tanpa garam.
        Css di dunia nyata seperti sayur tanpa garam.
        Css di dunia nyata seperti sayur tanpa garam.
        Css di dunia nyata seperti sayur tanpa garam.
        Css di dunia nyata seperti sayur tanpa garam.</div>
        <div class="box3">
        Belajar css harus sabar dan giat, supaya menjadi master css.
        Belajar css harus sabar dan giat, supaya menjadi master css.
        Belajar css harus sabar dan giat, supaya menjadi master css.
        Belajar css harus sabar dan giat, supaya menjadi master css.
        Belajar css harus sabar dan giat, supaya menjadi master css.
        </div>
    </body>
</html>

Output:

Tampilan line-height di Firefox.
Referensi tulisan:
  1. line-height Css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 13 Maret 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Diposting oleh di Tidak ada komentar:

Kamis, 05 Maret 2015

Properti font-style Css

Properti font-style pada css digunakan untuk mengatur posisi tegak huruf. Nilainya berupa normal, italic dan oblique. Normal berarti huruf tegak lurus. Italic berarti miring begitu juga oplique, hampir mirip.

Nilai
normal: font-style: normal; Menghasilkan tampilan huruf tegak lurus.
italic: font-style: italic; Membuat huruf miring ke kiri. Jika tidak didukung, pilih oplique.
oblique: font-style: oblique; Mirip italic - miring ke kiri, namun sedikit lebih miring dari italic.

Contoh: font_style.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti font-style Css</title>
            <style type="text/css">
            p.normal{font-style: normal;}
            p.italic{font-style: italic;}
            p.oblique{font-style: oblique;}
            </style>
        </head>
    <body>
        <p class="normal">Semangat bangun pagi ditulis normal.</p>
        <p class="italic">My name is Erwin Saleh ditulis italic.</p>
        <p class="oblique">My name is Erwin Saleh ditulis oblique.</p>
        <p class="oblique">Sebaik-baiknya di antara kamu yang paling bermanfaat bagi orang lain ditulis oblique.</p>
    </body>
</html>

Tampilan:
Tampilan properti font-style.
Referensi tulisan:
  1. font-style - CSS; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 Maret 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)