Css Temel Terimleri

Author: Kaan, Posted: 2011-09-11 13:24 GMT.

Css Temel Terimleri

1.Css Nedir?
2.Link
3.Liste
4.Katman
5.Font (Yazi Tipi)
6.Text (Metin)
7.Imle?
8.Zemin
9.Tablo
10.Scroll Bar

Css Nedir?
HTML bize metin bi?imlendirme alan?nda ?ok geni? olanaklar sunar. CSS, uzun yaz?l???yla Cascading Style Sheets, veya T?rk?esiyle Stil ?ablonlar? ise bunu bir ad?m daha ?teye g?t?r?r, bize sayfalar?m?z i?in global ?ablonlar haz?rlama olana?? verdi?i gibi, tek bir harfin stilini; yani renk, font, b?y?kl?k gibi ?zelliklerini de?i?tirmek i?in de kullan?labilir. Bu tekni?in en ?nemli ?zelli?i kullan?m?ndaki bu esnekli?idir.
Bir web sayfas? i?erisinde zaten estetik kurallar? gere?i y?zlerce renk ve font kullanmay?z. Genelde birbiriyle uyumlu birka? renk ve birka? font kullan?r?z ki, bunlar? her sayfada ayr? ayr? tekrar belirtmek yerine CSS yard?m?yla bir sefer tan?mlay?p b?t?n web sayfam?zda kullanabiliriz.Bu ?ekilde g?ncelleme yaparken de onlarca sayfay? de?i?tirmekten kurtuluruz.
CSS kodlar? HTML kodlar?n?n i?ine yaz?l?rlar. T?r?ne g?re body veya head b?l?mlerinde yer alabilirler. Bunlar?n d???nda harici CSS dosyalar? olu?turulup bunlar gerekti?inde HTML belgesi i?erisinde ?a??r?labilirler.
Hemen hemen her konuda oldu?u gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farkl? yorumlar ortaya koyarlar. Bu noktada her iki browser'?n da ayn?/benzer yorumlayaca?? kodlar yazmak en uygunudur.

L?NK ?ZELL?KLER?
a :Linkin, sayfa a??ld???nda t?klanmadan veya ?mle? ?zerine getirilmeden ?nceki durumudur.
a:hover :Linkin imle? ?zerine getirildi?indeki durumudur.
a:active :Linkin t?kland??? andaki durumudur.
a:visited :Linkin t?kland?ktan sonraki durumudur.

B???MLEND?RME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin alt?n?n,?st?n?n vs. ?izgili olup olmayaca??n? belirler.
font-weight:Yaz?n?n kal?nl?k veya inceli?ini belirler.
border:Linkin etraf?na kenarl?k ekler.
display:Linki i?eren h?cre , sat?r vb. istenilen alan?n se?ilmesini sa?lar.

L?STE ?ZELL?KLER?
disk:Liste bi?iminin disk (i?i dolu daire) ?eklinde olmas?n? sa?lar.
circle : Liste bi?iminin ?ember ?eklinde olmas?n? sa?lar.
square : Liste bi?iminin kare olmas?n? sa?lar.
decimal : Liste bi?iminin rakamlardan olu?mas?n? sa?lar.
lower-roman : Liste bi?iminin i,ii,iii gibi k???k roma rakamlar?ndan olu?mas?n? sa?lar.
upper-roman : Liste bi?iminin I,II,II gibi b?y?k roma rakamlar?ndan olu?mas?n? sa?lar.
lower-alpha : Liste bi?iminin a,b,c ?eklinde k???k harf olmas?n? sa?lar.
upper-alpha : Liste bi?iminin A,B,C ?eklinde b?y?k harf olmas?n? sa?lar.
none : Listenin simgesiz olmas?n? sa?lar.
inside : Listenin ikinci sat?r?n?n en soldan ba?lamas?n? sa?lar.
Outside : Listenin ikinci sat?r?n?n ilk sat?r ile ayn? yerden ba?lamas?n? sa?lar.
list-style-image : Liste bi?iminin resim olmas?n? sa?lar.

KATMAN ?ZELL?KLER?
position:Katman?n yerinin belirlenmesini sa?lar.
absolute:Katman?n yerinin pencere esas al?narak belirlenmesini sa?lar.
relative: Katman?n yerinin bir ?nceki katman esas al?narak belirlenmesini sa?lar.
static:Katman?n yerinin sabit olarak (Varsay?lan olan sol ?st k??e) belirlenmesini sa?lar.
top:Katman?n ?stten ne kadar a?a??da olmas? gerekti?ini belirler.
left:Katman?n soldan ne kadar i?eride olmas? gerekti?ini belirler.
width:Katman?n geni?li?inin ne kadar olaca??n? belirler.
height:Katman?n y?ksekli?inin ne kadar olaca??n? belirler.
overflow:Katman?n belirtilen y?kseklik ve geni?li?e s??mayan k?sm?na ne olaca??n? belirler.
auto:Otomatik olarak belirlenir.
scroll:Kayd?rma ?ubu?u ekleyerek g?r?nmesini sa?lar.
visible : Katman? belirtilen boyutlar?n d???na ta??rarak s??mayan yerlerin g?r?nmesini sa?lar.
hidden:S??mayan yerleri gizler.
visibility:Katman?n g?r?nebilirlik ayar?n? yapar.
visible : Katman?n g?r?n?r olmas?n? sa?lar.
hidden:Katman? gizler.
z-index : Katmanlar?n alttan ?ste do?ru hangi s?ra ile g?sterilece?ini belirler.1 de?eri katman?n en altta olaca??n? belirtir.

FONT ?ZELL?KLER?
font-family:Yaz? t?r?n? belirler.(Arial , Verdana gibi.)
font-style:Yaz?n?n normal veya sa?a e?ik olmas?n? sa?lar.
font-variant:Yaz?n?n normal veya t?m?n?n b?y?k harflerden olu?mu? olmas?n? sa?lar.
font-weight:Yaz?n?n kal?nl?k-inceli?ini belirler.
font-size:Yaz?n?n b?y?kl???n? belirler.

TEXT ?ZELL?KLER?
word-spacing : Kelimeler aras?nda b?rak?lacak bo?lu?u bo?lu?u belirler.
letter-spacing : Harfler aras?nda b?rak?lacak bo?lu?u bo?lu?u belirler.
text-decoration : Kelimenin alt?n?n , ?st?n?n vs. ?izili olup olmayaca??n? belirler.
underline : Kelimenin alt?n?n (Sat?r alt?ndan) ?izili olmas?n? sa?lar.
overline : Kelimenin ?st?n?n (Sat?r ?st?nden) ?izili olmas?n? sa?lar.
line-through : Kelimenin ortas?ndan ?izili olmas?n? sa?lar.
blink : Kelimenin yan?p s?nmesini sa?lar.(Netscape i?in)
vertical-align : Metnin yatay olarak nas?l hizalanaca??n? belirler.
text-transform: Kelimelerin b?y?k harf veya k???k harflerden olu?mas?n? sa?lar.
capitalize : Kelimelerin ilk harflerinin b?y?k olmas?n? sa?lar.
uppercase : Kelimelerin b?t?n harflerinin b?y?k olmas?n? sa?lar.
lowercase : Kelimelerin b?t?n harflerinin k???k olmas?n? sa?lar.
none : Kelimelerin orjinal metindeki gibi olmas?n? sa?lar.
text-align: Metnin dikey olarak nas?l hizalanaca??n? belirler.
left : Metni sola yaslar.
right : Metni sa?a yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk sat?r?n?n soldan ne kadar i?erden ba?layaca??n? belirler.
line-height : Sat?r?n y?ksekli?ini ayarlar.(Y?ksek de?er verildi?inde sat?rlar aras?ndaki bo?luk artar.)
first-line : Metnin ilk sat?r?n?n bi?imlendirilmesini sa?lar.
first-letter : Metnin ilk harfinin bi?imlendirilmesini sa?lar.

?MLE? ?ZELL?KLER?
crosshair:?mlecin art? i?areti ?eklinde olmas?n? sa?lar.
auto:?mlecin metinde dikey ?izgi ,bo? alanda normal ok ?eklinde olmas?n? sa?lar.
default:?mlecin hem metinde hem de bo? alanda normal ok ?eklinde olmas?n? sa?lar.
hand:?mlecin linkte oldu?u gibi el ?eklinde olmas?n? sa?lar.
move:?mlecin ta??ma i?areti ?eklinde olmas?n? sa?lar.
ne-resize:?mlecin sa?a yat?k normal ok olmas?n? sa?lar.
nw-resize:?mlecin sola yat?k normal ok olmas?n? sa?lar.
se-resize:?mlecin yukardan a?a?? do?ru ve sa?a yat?k normal ok olmas?n? sa?lar.
sw-resize:?mlecin yukardan a?a?? do?ru ve sola yat?k normal ok olmas?n? sa?lar.
n-resize:?mlecin a?a??dan yukar?ya do?ru ince ok ?eklinde olmas?n? sa?lar.
s-resize:?mlecin yukardan a?a?? do?ru ince ok ?eklinde olmas?n? sa?lar.
w-resize:?mlecin sola do?ru ince ok ?eklinde olmas?n? sa?lar.
e-resize:?mlecin sa?a do?ru ince ok ?eklinde olmas?n? sa?lar.
text:?mlecin hem metinde hem de bo? alanda metinde oldu?u gibi g?r?nmesini sa?lar.
wait:?mlecin me?gul animasyonuna d?n??mesini sa?lar.
help:?mlecin yard?m-soru i?aretine d?n??mesini sa?lar

ZEM?N ?ZELL?KLER?
background-color: Zeminin rengini belirler.
#color : Renk ad?.
transparent: Zeminin saydam olmas?n? sa?lar.
background-image: Zemine resim yerle?tirilmesini sa?lar.
url : Zemine yerle?tirilen resmin adresi.
background-repeat: Zemine yerle?tirilen resmin nas?l yay?laca??n? belirler.
repeat : Resmin b?t?n zemine yay?lmas?n? sa?lar.
repeat-x : Resmin sol-?stten sa?-?ste do?ru yay?lmas?n? sa?lar.
repeat-y : Resmin sol-?stten sol-alta do?ru yay?lmas?n? sa?lar.
no-repeat: Resmin yay?lmadan orjinal boyutuyla g?r?nmesini sa?lar.
background-attachment: Zemindeki resmin , sayfa kayd?rma ?ubu?uyla hareket ettirildi?indeki durumunu belirler.
scroll : Sayfa hareket ettirildi?inde zeminin de kaymas?n? sa?lar.
fixed: Sayfa kayd?r?lsa da zeminin sabit kalmas?n? sa?lar
background-position: Zemindeki resmin istenilen ?ekilde yerle?tirilmesini sa?lar.
top : Resmi yukar? yerle?tirir.
center : Resmi ortalar.
bottom : Resmi a?a?? yerle?tirir.
left : Resmi sola yerle?tirir.
right: Resmi sa?a yerle?tirir.
...px : Resmin soldan istenilen ?l??de i?erde olmas?n? sa?lar.

TABLO ?ZELL?KLER?
margin : Tablo ile pencerenin kenarlar? aras?nda b?rak?lacak bo?lu?u belirler.
margin-top : Tablo ile pencerenin ?st kenar? aras?nda b?rak?lacak bo?lu?u belirler.
margin-right : Tablo ile pencerenin sa? kenar? aras?nda b?rak?lacak bo?lu?u belirler.
margin-bottom : Tablo ile pencerenin alt kenar? aras?nda b?rak?lacak bo?lu?u belirler.
margin-left : Tablo ile pencerenin sol kenar? aras?nda b?rak?lacak bo?lu?u belirler.

padding : Tablo kenarlar? ile tablo i?eri?i (Yaz? vb.) aras?nda b?rak?lacak bo?lu?u belirler.
padding-top : Tablonun ?st kenar? ile tablo i?eri?i aras?nda b?rak?lacak bo?lu?u belirler.
padding-right : Tablonun sa? kenar? ile tablo i?eri?i aras?nda b?rak?lacak bo?lu?u belirler.
padding-bottom : Tablonun alt kenar? ile tablo i?eri?i aras?nda b?rak?lacak bo?lu?u belirler.
padding-left : Tablonun sol kenar? ile tablo i?eri?i aras?nda b?rak?lacak bo?lu?u belirler.

border : Tablonun kenarlar?n?n ?ekillendirilmesini sa?lar.

border-top : Tablonun ?st kenar?n?n ?ekillendirilmesini sa?lar.
border-left : Tablonun sol kenar?n?n ?ekillendirilmesini sa?lar.
border-bottom : Tablonun alt kenar?n?n ?ekillendirilmesini sa?lar.
border-right : Tablonun sa? kenar?n?n ?ekillendirilmesini sa?lar.

border-width : Tablonun kenarlar?n?n kal?nl???n? belirler.
border-top-width : Tablonun ?st kenar?n?n kal?nl???n? belirler.
border-right-width : Tablonun sa? kenar?n?n kal?nl???n? belirler.
border-bottom-width : Tablonun alt kenar?n?n kal?nl???n? belirler.
border-left-width : Tablonun sol kenar?n?n kal?nl???n? belirler.

border-style : Tablonun kenarl?k t?r?n? belirler.
border-top-style : Tablonun ?st kenarl?k t?r?n? belirler.
border-right-style : Tablonun sa? kenarl?k t?r?n? belirler.
border-bottom-style : Tablonun alt kenarl?k t?r?n? belirler.
border-left-style : Tablonun sol kenarl?k t?r?n? belirler.

border-color : Tablonun kenarlar?n?n rengini belirler.
border-top-color : Tablonun ?st kenar?n?n rengini belirler.
border-right-color : Tablonun sa? kenar?n?n rengini belirler.
border-bottom-color : Tablonun alt kenar?n?n rengini belirler.
border-left-color : Tablonun sol kenar?n?n rengini belirler.

color : Tabloda ge?en metnin rengini belirler.
width : Tablonon geni?li?ini belirler.
height : Tablonun y?ksekli?ini belirler.

NOT : Ba?l?k "TABLO" olarak verildi Ancak bu nitelikler ba?ta TD , TR , TH vs. olmak ?zere hemen her etiket i?in kullan?labilir.CSS' yi ?zel k?lan da zaten bu...

KAYDIRMA ?UBU?U ?ZELL?KLER?
scrollbar-face-color :Kayd?rma ?ubu?unun y?zey rengi , ayn? zamanda zemini de etkiliyor.
scrollbar-base-color :Kayd?rma ?ubu?ununun sol ve ?st kenarl?klar?n? ?izgi halinde kapl?yor.
scrollbar-shadow-color :Sa? ve alt kenarl?klar?n g?lge rengi.
scrollbar-highlight-color :Sol ve ?st kenarl?klar?n g?lge rengi,ayn? zamanda zemini de etkiliyor.
scrollbar-arrow-color :Y?n oklar?n?n rengi

Kayd?rma ?ubu?u, sadece Internet Explorer'da ge?erlidir.

-Derlenmi?tir.