Thursday, October 22, 2015

PROPERTY DAN VALUE PADA CSS

PROPERTY DAN VALUE PADA CSS

Syntax CSS dibagi dalam 3 bagian :
selector {property : value;}



Selector            : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property           : atribut yang akan diubah (color, font-size, dll)
Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;) Property dan nilai diapit dalam kurung {}

Contoh property dan values pada background
Property
Values
Keterangan
Background-image
Url
Alamat gambar yang sudah di aploud
Background-repeat
  Repeat
Gambar diulang dalam halaman
Repeat-y
Gambar diulang dalam sumbu y
Repeat-x
Gambar diulang dalam sumbu x
no-Repeat
Gambar tidak diulang hanya muncul 1 gambar



Contoh property dan values pada font
Property
Values
Keterangan

font-family
Arial;
Jenis font adalah arial

Font-size

small;
kecil

medium;
menengah

large;
besar

12px;
besar 12 pixel (Bisa diganti 12pt)

Font-style

Normal;
Font normal

Italic;
Font miring

Font-weight

Normal;
Ketebalan font normal

Bold;
Font Tebal

100-900
Ketebalan font dengan nilai dari 100-900


Contoh Property Dan Value pada Text
Property
Values
Keterangan
Text-decoration
none;
Menampilkan text asli
Underline;
Menampilkan Text bergaris bawah
Overline;
Menampilkan text bergaris atas
line-through;
Menampilkan text tercoret
blink;
Menampilkan text berkedip
Text-transform
uppercase;
Menampilkan text huruf besar
Text-align
left;
Text rata kiri
right;
Text rata kanan
center;
Text rata tengah
justify;
Text rata kanan kiri

Contoh Selector Pada Link
Selector
Keterangan
a:link
Keadaan awal link
a:hover
Keadaan link saat dikenai mouse
a:active
Keadaan link saat di klik
a:visited
Keadaan link setelah dikunjungi

Contoh property dan value pada position
Property
Values
Keterangan
Position
Static;
Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen
Absolute;
Unsur diposisikan relatif terhadap posisi pertama (tidak statis)
Fixed;
Unsur diposisikan relatif terhadap jendela browser
Relative;
elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen
Inherit;
Nilai dari properti posisi diwariskan dari elemen induk

Contoh Property dan Value pada Border
Property
Values
Keterangan
Border
ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom;
1px solid #000;
2px dotted #ff0000;
3px double blue;
5px groove #3300ff;
5px ridge #3300ff;
5px inset #3300ff;
5px outset #3300ff;

Contoh property dan value pada border-radius
Property
Values
Keterangan
Border-radius
10px;
Garis melemgkung disemua sisi dengan ukuran 10px
border-top-left-radius
2em 0.5em;
Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda
border-top-right-radius
3em 2.5em;
Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda
border-bottom-right-radius
1em 2em;
Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda
border-bottom-left-radius
2em 1em;
Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda
border-bottom-left-radius
2em;
Garis melengkung pada sisi bawah dan kiri dengan ukuran sama

Margin dan Padding
Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.
Padding adalah kode yang mengatur seleksi batas jarak dalam seperti memberi jarak pada header dengan batas tepi header misalnya padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.

Contoh property dan value pada margin dan padding
Property
Values
Keterangan
margin
10px 5px 0px 5px;
atas 5, kanan 5, bawah 0, kiri 10
margin-top
10px;
karak atas 10px
margin-right
5px;
jarak kanan 5px
margin-bottom
2em;
jarak bawah 2em
margin-left
3em;
jarak kiri 3en
padding
2em;
atas, kanan, kiri dan bawah 2em

Contoh property dan value pada display
Property
Values
Keterangan
DISPLAY
None;
Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut
Block;
Berfungsi untuk memberi blok baru atau baris baru seperti kode <br> dan <p>
Inline;
Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut
Inline-block;
jika layar tidak muat maka secara otomatis membuat baris baru.


No comments:

Post a Comment