Setelah sebelumnya kita telah mempelajari perihal Cara Membuat Huruf Tebal dan Huruf Miring Dengan CSS, Pada kesempatan kali ini akan membahas bagaimana cara mengatur spasi antar karakter dan kata dalam website, Untuk mengatur spasi dalam website, teman-teman sanggup memakai CSS, dimana dalam CSS terdapat dua property untuk mengatur spasi, untuk mengatur spasi antar karakter sanggup memakai property letter-spacing dan untuk mengatur spasi antar kata sanggup memakai property word-spacing.
Mengatur Spasi Antar Huruf
Seperti klarifikasi singkat diatas, dalam mengatur spasi antar karakter sanggup menggunkan property letter-spasing, untuk value dalam propery ini sanggup berupa pixel, persen, em dll. Jika teman-teman memperlihatkan value (nilai) property letter-spacing ini positif, maka spasi antar karakter akan semakin menjauh, namun kalau teman-teman memperlihatkan nilai dari property ini negatif, spasi antar karakter akan berdekatan. Untuk lebih gampang memahami penggunaan property ini silahkan teman-teman tulis code dibawah ini.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box { width: 700px; height: 400px; margin: 10px auto; } .positif { letter-spacing: 5px; color: red; text-align: justify; } .negatif { letter-spacing: -1px; color: black; text-align: justify; } </style> </head> <body> <div class="box"> <p class="positif">contoh penggunaan property letter-spacing dengan nilai poositif, pola penggunaan property letter-spacing dengan nilai poositif,contoh penggunaan property letter-spacing dengan nilai poositif, pola penggunaan property letter-spacing dengan nilai poositif, pola penggunaan property letter-spacing dengan nilai poositif.</p> <p class="negatif">contoh penggunaan property letter-spacing dengan nilai negatif, pola penggunaan property letter-spacing dengan nilai negatif,contoh penggunaan property letter-spacing dengan nilai negatif, pola penggunaan property letter-spacing dengan nilai negatif, pola penggunaan property letter-spacing dengan nilai negatif.</p> </div> </body> </html> silahkan teman-teman jalankan file yang telah teman-teman buat diatas, maka hasil nya akan ibarat berikut ini:
Jika dilihat dari hasil percobaan diatas, pada paragraf pertama memakai value faktual dengan nilai 5px, sehingga terang menghasilkan spasi antar karakter dengan lebar spasi ibarat yang di tuntukan, sedangkan pada paragraf kedua nilai dari property letter-spacing yakni negatif -1px sehingga spasi antar karakter semakin berdekatan. Silahkan teman-teman amati hasil dari percobaan property letter-spacing dan coba teman-teman ganti value dari property letter-spacing yang telah kita buat.
Mengatur Spasi Antar Kata
Setelah kita melaksanakan percobaan diatas, kita telah mengenal bagaimana cara untuk mengatur spasi antar huruf, untuk percobaan berikutnya kita memakai property word-spacing, dimana property ini merupakan property yang berfungsi untuk memperlihatkan spasi antar suku kata, untuk kontribusi nilai dalam property ini sama dengan cara memperlihatkan nilai pada property letter-spacing, dimana nilai positif untuk penambahan dan nilai negatif untuk pengurangan. Silahkan teman-teman tulis code berikut untuk lebih gampang memahaminya.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box { width: 700px; height: 400px; margin: 10px auto; } .positif { word-spacing: 20px; color: blue; text-align: justify; } .negatif { word-spacing: -5px; color: green; text-align: justify; } </style> </head> <body> <div class="box"> <p class="positif">contoh penggunaan property word-spacing dengan nilai poositif, pola penggunaan property word-spacing dengan nilai poositif,contoh penggunaan property word-spacing dengan nilai poositif, pola penggunaan property word-spacing dengan nilai poositif, pola penggunaan property word-spacing dengan nilai poositif.</p> <p class="negatif">contoh penggunaan property word-spacing dengan nilai negatif, pola penggunaan property word-spacing dengan nilai negatif,contoh penggunaan property word-spacing dengan nilai negatif, pola penggunaan property word-spacing dengan nilai negatif, pola penggunaan property word-spacing dengan nilai negatif.</p> </div> </body> </html> kalau teman-teman jalankan file tersebut akan menghasilkan ibarat gambarr berikut ini:
Jika kedua percobaan diatas telah dilakukan, teman-teman sanggup menggabungkan kedua property tersebut untuk dipakai dalam memperlihatkan dampak pada text dalam website teman-teman, Sekian tutorial dari agar sanggup mempunyai kegunaan dan sanggup membantu teman-teman dalam menciptakan dana mempelajari website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment