Pages

Thursday, September 27, 2012

Properti yang di gunakan pada CSS

Properti : 

1. Font Family
penulisan:

 font-family: <family-name>, <family-name>, <generic-family>;
Contoh penulisan font-family
p{
font-family: "Arial Black", Gadget, sans-serif;
}
dan
p{
font-family: serif;
}

2. Font Style

menambahkan style pada font dihalaman html.yang dapat diisi sebagai berikut : normal,italic,oblique
penulisan:
font-style: value;

Contoh :
p{
font-style:italic; 
}

3. Font Variant

Variant font dapat diisi dua value yaitu normal atau small-caps.penulisan::

font-variant:value;

contoh :
h3{
font-variant:small-caps; 
}

4. font weight

penulisan:
font-weight:value;

contoh :
h4{
font-weight: bolder; 
}

5. Font

penulisan:
Value : <font-style> spasi <font-variant> spasi <font-weight> spasi <font-size>/<line-height> spasi <font-family>

penulisan :

font :value;

contoh :
P {
 font: oblique bold 10pt/12pt Times, serif ;
}

6. Padding TOP
penulisan:

<div style="background-color:lime;width:100px;clear:both;padding-top:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

7. Padding left
penulisan:

<div style="background-color:lime;width:100px;clear:both;padding-left:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>

8. Background Image
penulisan:

body {background-image:url('bgdesert.jpg');}

9. background-attachment Property
penulisan:
body

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

10.background-origin Property
penulisan:
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

11. CSS3 animation Property
penulisan:
div
{
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

12.CSS border Property
penulisan:

{
border:5px solid red;
}

13.CSS border-width Property
penulisan:
p
{
border-style:solid;
border-width:15px;
}

14.CSS3 border-image Property
penulisan:
div
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

15.CSS border-collapse Property
penulisan:
table
{
border-collapse:collapse;
}

16. CSS empty-cells Property
penulisan:
table
{
border-collapse:separate;
empty-cells:hide;
}

17.CSS3 box-align Property
penulisan:
div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

18.CSS3 box-sizing Property
penulisan:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

19.CSS color Property
penulisan:
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}

20. CSS background-position Property
penulisan:
body

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}