CSS untuk Memanipulasi Font
Property Font
|
Nama
Property
|
Value
|
Contoh
Penggunaan
|
|
Font-family
|
Nama font
|
P { font-family: arial.
Helvetica}
|
|
Font-size
|
Nilai
integer dengan pilihan satuan : em|pt|px|%
|
P {font-size:24em}
|
|
Font-style
|
Oblique|italic|normal
|
P {font-style:italic}
|
|
Font-variant
|
Normal|small-caps
|
P {font-variant:small-caps}
|
|
Font-weight
|
Normal|bold|bolder|100-900
|
P {font-weight:bold}
|
1.2 CSS untuk Memanipulasi Color dan Background
Property Background
dan Color
|
Nama
Property
|
Value
|
Contoh
Penggunaan
|
|
Background-color
|
Rangkaian 6
digit heksadesimal atau nama warna
|
Body {
Background-color : green;
}
|
|
Background-Image
|
url dimana
image disimpan
|
Body {
Background-image :
url(gambar1.jpg);
}
|
|
Background-attachment
|
Fixed|scroll|inherit
|
Body {
Background-attachment :
scroll;
}
|
|
Background-Repeat
|
Inherit|repeat|no-repeat|repeat-x|repeat-y
|
Body {
Background-repeat : repeat;
Background-image :
url(image/gambar1.jpg);
}
|
|
Background-position
|
Bottom|center|left|right|top|inherit
|
Body {
Background-repeat :
no-repeat;
Background-image :
url(image/gambar1.jpg);
Background-position :
bottom center
}
|
|
Color
|
Rangkaian 6
digit heksadesimal atau nama warna
|
H1 { color : red }
|
1.3 CSS untuk Memanipulasi List
Property List
|
Nama
Property
|
Value
|
Contoh
Penggunaan
|
|
List-style-type
|
Disc|circle|square|lower-roman|upper-roman|none|lower-alpha|upper-alpha
|
Ul {
List-style-type : disc ;
}
|
|
List-style-image
|
url dimana
image disimpan atau none
|
Ul {
List-style-image :
url(gambar1.jpg) ;
}
|
|
List-style-position
|
Inside|outside
|
Ul {
List-style-position :
inside;
}
|
1.4 CSS untuk Memanipulasi Text
Property Text
|
Nama
Property
|
Value
|
Contoh
Penggunaan
|
|
Color
|
Rangkaian 6
digit heksadesimal atau nama warna
|
P {
color :red;
}
|
|
text-align
|
Left|right|center|justify
|
P {
Text-align :justify;
}
|
|
text-decoration
|
None|underline|overline|line-through|blink
|
P {
Text-decoration :overline;
}
|
|
text-transform
|
None|capitalize|,uppercase|lowercase)
|
P {
Text-transform :
capitalize;
}
|
|
Letter-spacing
|
Nilai
integer dengan pilihan satuan : em|pt|px|%
|
P {
letter-spacing : 20px;
}
|
|
Text-indent
|
Nilai
integer dengan pilihan satuan : em|pt|px|%
|
P {
Text-indent : 50px;
}
|
1.5 CSS untuk Memanipulasi Table
Property Table
|
Nama
Property
|
Value
|
Contoh
Penggunaan
|
|
border-style
|
None|dotted|dashed|solid|double|groove|ridge|inset|outset
|
.b1 {
Border-style-type : groove
;
}
|
|
border-bottom-style
|
None|dotted|dashed|solid|double|groove|ridge|inset|outset
|
.b1 {
Border-bottom-style :
groove ;}
|
|
border-bottom-width
|
Nilai
integer dan satuan ukuran
|
.b1 {
border-bottom-width :10px;
}
|
|
border-bottom-color
|
Rangkaian 6
digit heksadesimal atau nama warna
|
.b1 {
border-bottom-color :red;
}
|
0 comments:
Post a Comment