Penerapan CSS (Part 3)
Latar belakang kali ini kita masih mengenal sintag tentang CSS untuk memperindah tamoilan web / program.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime text
III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.
IV.Penjelasan.
CSS Margin
Margin CSS
CSS marginproperti yang digunakan untuk menghasilkan ruang di sekitar elemen.
marginsifat mengatur ukuran ruang putih di luar perbatasan.
Dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti CSS untuk pengaturan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Margin - Individual Sides
CSS memiliki sifat untuk menentukan margin untuk setiap sisi elemen
Margin - Properti Steno
Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti margin dalam satu properti.
marginproperti adalah properti singkatan untuk properti marjin individu berikut:
margin-top
margin-right
margin-bottom
margin-left
Contoh
p {
margin: 100px 150px 100px 80px;
}
Jika marginproperti memiliki empat nilai:
- margin: 25px 50px 75px 100px;
- margin atas adalah 25px
- margin kanan adalah 50px
- margin bawah adalah 75px
- margin kiri adalah 100px
- margin: 25px 50px 75px;
- margin atas adalah 25px
- margin kanan dan kiri adalah 50px
- margin bawah adalah 75px
- margin: 25px 50px;
- margin atas dan bawah yang 25px
- margin kanan dan kiri adalah 50px
- margin: 25px;
- keempat margin 25px
Anda dapat mengatur properti margin autountuk horizontal pusat elemen dalam wadah.
Unsur kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi sama antara margin kiri dan kanan:
Contoh
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Mewarisi Nilai
Contoh ini memungkinkan margin kiri diwariskan dari elemen induk:
Contoh
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
Margin Collapse
Margin atas dan bawah dari elemen kadang-kadang runtuh ke margin tunggal yang sama dengan yang terbesar dari dua margin.
Hal ini tidak terjadi pada margin kiri dan kanan! Hanya margin atas dan bawah!
Contoh
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Dalam contoh di atas, <h1> elemen memiliki margin bawah 50px. The <h2> elemen memiliki margin atas ditetapkan untuk 20px.
akal sehat sepertinya mengusulkan bahwa margin vertikal antara <h1> dan <h2> akan menjadi total 70px (50px + 20px). Namun karena marjin runtuh, margin yang sebenarnya akhirnya menjadi 50px.
Contoh :
CSS Padding
CSS Padding
CSS paddingproperti yang digunakan untuk menghasilkan ruang di sekitar konten.
padding membersihkan area di sekitar konten (dalam perbatasan) dari elemen.
Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti CSS untuk pengaturan padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Padding - Individual Sides
CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen:
- padding-top
- padding-right
- padding-bottom
- padding-left
Semua padding dapat memiliki nilai berikut:
panjang - menetapkan padding di px, pt, cm, dll
% - Menentukan bantalan di% dari lebar elemen yang mengandung
mewarisi - menetapkan bahwa padding harus diwarisi dari elemen induk
Contoh berikut menetapkan bantalan yang berbeda untuk semua empat sisi dari <p> elemen:
Contoh
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Properti Steno
Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti padding satu properti.
paddingproperti adalah properti singkatan untuk padding individu berikut:
- padding-top
- padding-right
- padding-bottom
- padding-left
Contoh
p {
padding: 50px 30px 50px 80px;
}
Jika paddingproperti memiliki empat nilai:
- padding: 25px 50px 75px 100px;
- padding atas adalah 25px
- Padding tepat adalah 50px
- Padding bawah adalah 75px
- Padding kiri 100px
- padding: 25px 50px 75px;
- padding atas adalah 25px
- paddings kanan dan kiri adalah 50px
- Padding bawah adalah 75px
- padding: 25px 50px;
- paddings atas dan bawah yang 25px
- paddings kanan dan kiri adalah 50px
- padding: 25px;
- keempat paddings adalah 25px
Contoh
div.ex1 {
padding: 25px 50px 75px 100px;
}
div.ex2 {
padding: 25px 50px 75px;
}
div.ex3 {
padding: 25px 50px;
}
div.ex4 {
padding: 25px;
}
Contoh :
Mengatur tinggi dan lebar
heightdan widthproperti yang digunakan untuk mengatur tinggi dan lebar elemen.
heightdan widthdapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung.
Elemen ini memiliki ketinggian 200 piksel dan lebar 50%
Contoh
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Elemen ini memiliki ketinggian 100 piksel dan lebar 500 piksel.
Contoh
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Catatan: heightdan widthsifat tidak termasuk padding, perbatasan, atau margin; mereka mengatur tinggi / lebar area di dalam padding, border, dan margin elemen!
Pengaturan max-width
max-widthproperti digunakan untuk mengatur lebar maksimum dari suatu elemen.
max-widthdapat ditentukan dalam nilai-nilai panjang , seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung, atau diatur none (ini adalah default. Berarti bahwa tidak ada lebar maksimum).
Masalah dengan <div>di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen (500px). Browser kemudian menambahkan scrollbar horisontal ke halaman.
Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.
Tip: Tarik jendela browser untuk lebih kecil dari 500px lebar, untuk melihat perbedaan antara kedua divs!
Elemen ini memiliki ketinggian 100 piksel dan max-lebar 500 piksel.
Catatan: Nilai dari max-widthmenimpa properti width.
Contoh
div {
max-width: 500px;
height: 100px;
background-color: powd
erblue;
}
Contoh :
CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML.
VI.Refrensi.
http://www.w3schools.com/css
Komentar
Posting Komentar