Assalamualaikum wr.wb
Selamat malam sahabat blogger update lagi ni
Belajar Di Perantauan
kali ini kita akan membahas perihal pengunaan border pada CSS dan Typografi. pastinya sudah tidak aneh lagi bagi kita dengan kata-kata CSS, tapi tata cara penggunaan sangat banyak sekali, salah satunyanya BORDER. BORDER
Pada property BORDER digunakan untuk menunjukkan garis pinggir pada elemen, setidaknya ada tiga property yang harus teman-teman set, yaitu color, style, width.
border-color : black;
border-style : solid;
border-width : 5px;
Namun teman-teman juga sanggup memakai CSS shorthand sehingga menjadi ibarat berikut :
border : width style color
Makara jikalau kita ubah rujukan instruksi di atas menjadi CSS shorthand, kodenya menjadi ibarat berikut :
border : 5px solid black
cobalah tambahkan instruksi tersebut pada tutotial css yang sebelumnya , PENGUNAAN MARGIN DAN PADDING. dan yang akan di dapatkan ialah ibarat berikut :
Sama halnya dengan padding, penambahan property border juga akan merubah ukuran dari box. Jadi, ibarat yang di jelaskan sebelumnya. Ketika tema-teman ingin menciptakan ukuran lebar box tetap 100px, maka teman-teman harus menghitung ulang width dari box tersebut.
Kali ini perhatikan bahwa kita menunjukkan border pada seluruh sisi box, artinya jikalau kita tentukan ukuran boorder sebesar 5px, maka 10px ( untuk width, alasannya ialah 5px untuk left, dan 5px untuk right ) akan di tambahkan pada ukuran box tersebut, sehingga ukuran box tersebut kemballi menjadi 110px.
untuk itu kita kurangi width dari box tersebut menjadi 70 px ( width ) + 20px ( padding ) 10 px (border) 100px.
Dalam dunia CSS kasus ibarat ini disebut dengan box-model. terdapat dua property yang mensugesti ukuran dari box tersebut yaitu padding dan border.
TYPOGRAPHY
Secara default ( bawaan ), halaman web yang akan kita buat memakai font standar yaitu Time Nesw Roman. namun teman-teman sanggup merubahnya dengan property font-family. Berikut Contoh penggunaan property font-family :
font-family:calibri
Namun perlu diperhatikan untuk memberi lebih dari satu jenis font yang akan kita tentukan, contohnya kita akan menunjukkan font-family dengan calibri. maka pada PC dengan Sistem Operasi Linux, tidak akan di temukan font-tersebut.
Untuk itu temn-teman sanggup menunjukkan lebih dari satu jenis font, font-font yang di berikan selanjutnya akan menjadi pengganti dikala font sebelumnya tidak di temukan. Contohnya :
font-family:calibri, arial, tahoma, verdana, sans-serif;
Ketika font jenis calibri tidak ditemukan, maka yang akan dipakai ialah Arial , dikala tidak di temukan Arial maka yang akan dipakai ialah tohama , begitu seterusnya hingga kita tentukan jenis font yang digunakan, sans-serif atau serif dan browser akan memakai dengan jenis yang di sebutkan ( serif atau sans-serif ).
Ketika nama font mempunyai spasi, maka teman-teman harus menunjukkan tanda petik/kutip pada nama font tersebut. Misalnya "segae ui".
Untuk memilih ukuran font, kita gunakan property font-size :
font-size:12px;
Untuk sanggup memakai satuan pt ( point ) untuk ukuran font :
font-size:12pt;
font yang kita gunakan pun sanggup di tentukan ketebalannya dengan memakai property font-weight. Nilai yang sanggup di pakai pada property ini ialah normal,bold.
font-weight:bold;
Buka mustahil untuk mengatur kerning atau jarak antar huruf. Dalam CSS kita sanggup merubah jarak antar hurufdengan property letter-spacing.
laetter-spacing:15px;
Semakin besar nilai pixel yang diberikan semakin jauh jarak antar huruf. teman-teman pun dalam memakai nilai negatig untuk memperdekat jarak antar huruf.
letter-spacing:-2px;
Sedangkan unutk menunjukkan jarak anatar baris kita gunakan property line-height.
line-height:30px;
Dan untuk menciptakan text rata kana, tengah, kiri, kita gunakan property text align. nilai yang sanggup dipakai ialah right, center, left dan justify untuk rata kiri kanan.
Cobalah untuk bermain dengan property tersebut dan perhatikan perubahan yang di dapatkan. Nah bagaimana ,teman-teman dengan klarifikasi di atas , sudah paham kan dengan penggunaan border dan typograpphy, mudah-mudahn bermamfaat , silahkan di Share !!!.
Sumber http://beritatecnologi.blogspot.com
EmoticonEmoticon