Apa kabar kalian semua ?
Hari ini saya akan shering tentang : padding, margin, border melalui css.
Padding : adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.
Margin : ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
Border : Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.
sumber:http://problogiz.blogspot.co.id/2012/12/pengertian-margin-padding-dan-border.html.
Hasil shering saya hari ini.
1.kegunaan Css.
- Kode HTML menjadi lebih sederhana dan lebih mudah di atur.
- Ukuran file menjadi lebih kecil ,load file lebih cepat sehingga kinerja. website lebih baik.
- Dengan CSS mengubah tampilan hanya dengan mengubah file CSS saja.
- CSS dapat berkolaborasi dengan javascript.
h2{
color:blue;
}
-Contoh tag.
3.Contoh script yang saya buat hari ini.
<!DOCTYPE html>
<html>
<head>
<style>
p.h2 {
color:blue;
}
h2 {
color:deeppink;
}
p.h2 {
border:solid;
border-color:aqua;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
background-color:deeppink;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Belajar,padding,margin,border.</h2>
<p class="h2">belajar,padding,margin,border.</p>
</body>
</html>
4.Hasil dari text yang di atas.
sumber:http://www.w3schools.com/
Sekian shering dari saya silakan, semoga bermanfaat.
Wassalamualaikum wr.wb
0 komentar:
Posting Komentar