Css En Önemli Özellikler
Pazartesi, Mayıs 4th, 2009
Özellikler
.zemin
.knearlık
.font
.lise
.margin
.padding
.metin
.floating ve positing
.tablo
css-zemin özelikkleri
+background-color:p{background-color:#ddd;}
+background-image:body{background-image:url(/images/deneme.gif);}
+background-repeat:
body{
background:white url(deneme.gif);
background-repeat:repeat-x; —-> x yönünde resim kendini yeniliyor.
}
+background-attachment:
body{
background:white url(deneme.gif);
background-attachment:fixed —->resmin sayfa ile scroll edilip edilmeyeceÄŸi
}
+background-poistion:
body {
background-image:url(deneme.gif);
background-repeat:no-repeat;
background-position:center —>yüklenen resmin balangıç noktasını belirler.
}
css -font özellikleri
+color:Â p {color:red}
+font-family:
p{
font-family:Verdana,Arial,Helvetica,san-serif;
}
p{
font-family :”Times New Roman”; —-> birden fazla kelime içeriyorsa font bu ÅŸekilde kullanılır.
}
+font-size:Â td{font-size:12px;}
+font-weight: p{font-weight:bolder;} –> kalınlık incelik 100 -900 arası veya bold bolder normal deÄŸerleride alır.
+font-style: p {font-style:italic;} –> italic ,normal,oblique,inherit deÄŸerleri alır.
+font-variant: span{font-variant:small-caps} –>normal ,small-caps deÄŸerlerini alır.
css-liste özelliği
+list-style-type:disc,circle,square,decimal,lower-roman,upper-roman değerleri alır.
ul.arabalar
{
list-style-stype:none;
}
ol ol ol {
list-style-type:lower-roman —-> i-ii-iii-iv-v gibi
}
+list-style-image
ul{
list-style-image:url(ornek.gif);
}
+list-style:
ul { list-style:disc outside}
ol{ list-style:decimal inside}
+white-space : normal–>birden fazla boÅŸluÄŸu tek boÅŸluk sayar.
pre—> birdenfazla boÅŸluÄŸu birleÅŸtirmez.
nowrap—-> <br> etiketi hariç alt satıra geçirmez.
p{
white-space:pre;
}
css-border özelliği
+border-style:none,hidden,dotted,dashed,solid,double,groove,ridge,inset,
outset,{1,4},inherit
p.icerik{
border-style:solid;
}
+border-width:kenarlık kalınlığı
p{
border-style:solid;
border-width:1px;
}
+border-color:
p{
border-style:solid;
border-color:red;
}
css-margin ve padding
margin-elementin kenarlara olan boÅŸluÄŸu
p{
margin-right:5px; —> saÄŸa olan uzaklığı 5px demek.
}
margin-top,margin-left,margin-right,magin-bottom diÄŸer deÄŸerleri
padding-içerik alanı ile kenarlık arasındaki mesafe
p{
pading:12px;
}
padding-top,right,left,bottom diÄŸer deÄŸerleri
css-görünüm
+overflow:
.visible:kutu sınırları dışına taşan alanı gösterir.
.hidden:kutu sınırları dışına taşan alanı gizler
.scroll:kutu sınırları dışına taşan alana kaydırma çubuğu ile ulaşmamızı sağlar.
.auto:srcoll ile aynı özelliğe sahiptir.
+clip:kırpma
.resim{
position:absolute;
clip:rect(50px 130px 153px 40px)
}
html kodu;
<div class=”resim”>
<img src=”resim.jpg”> alt=”avatar” />
</div>
Bu kısımda burda bitti.Tabiki özellikler bunlarla sınırlı değil.İlerledikçe önümüze gelen diğer özelliklerden de bahsedicem.
