Merhaba Webtroloji Webmaster Eğitim Blogu Takipcileri;
Cascading Style Sheets (Turkcede Stil Şablonları) yani bilinen kısa adıyla CSS, HTML ’e ek olarak metin ve format bicimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir
CSS kodları HTML kodlarının icine yazılırlar. Turune gore body veya head bolumlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi icerisinde cağı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 OZELLİKLERİ
a :Linkin, sayfa acıldığında tıklanmadan veya umlec uzerine getirilmeden onceki durumudur.
a:hover :Linkin imlec uzerine getirildiğindeki durumudur.
a:active :Linkin tıklandığı andaki durumudur.
a:visited :Linkin tıklandıktan sonraki durumudur.
BİCİ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,ustunun vs. cizgili 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 iceren hucre , satır vb. istenilen alanın secilmesini sağlar.

LİSTE OZELLİKLERİ:
disk:Liste biciminin disk (ici dolu daire) şeklinde olmasını sağlar.
circle : Liste biciminin cember şeklinde olmasını sağlar.
square : Liste biciminin kare olmasını sağlar.
decimal : Liste biciminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biciminin i,ii,iii gibi kucuk roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biciminin I,II,II gibi buyuk roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biciminin a,b,c şeklinde kucuk harf olmasını sağlar.
upper-alpha : Liste biciminin A,B,C şeklinde buyuk 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 biciminin resim olmasını sağlar.

KATMAN OZELLİKLERİ:
position:Katmanın yerinin belirlenmesini sağlar.
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir onceki katman esas alınarak belirlenmesini sağlar.
static:Katmanın yerinin sabit olarak (Varsayılan olan sol ust koşe) belirlenmesini sağlar.
top:Katmanın ustten ne kadar aşağıda olması gerektiğini belirler.
left:Katmanın soldan ne kadar iceride olması gerektiğini belirler.
width:Katmanın genişliğinin ne kadar olacağını belirler.
height:Katmanın yuksekliğinin ne kadar olacağını belirler.
overflow:Katmanın belirtilen yukseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto:Otomatik olarak belirlenir.
scroll:Kaydırma cubuğu ekleyerek gorunmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin gorunmesini sağlar.
hidden:Sığmayan yerleri gizler.
visibility:Katmanın gorunebilirlik ayarını yapar.
visible : Katmanın gorunur olmasını sağlar.
hidden:Katmanı gizler.
z-index : Katmanların alttan uste doğru hangi sıra ile gosterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

FONT OZELLİKLERİ:
font-family:Yazı turunu 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 tumunun buyuk harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının buyukluğunu belirler.
TEXT OZELLİ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 , ustunun vs. cizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) cizili olmasını sağlar.
overline : Kelimenin ustunun (Satır ustunden) cizili olmasını sağlar.
line-through : Kelimenin ortasından cizili olmasını sağlar.
blink : Kelimenin yanıp sonmesini sağlar.(Netscape icin)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin buyuk harf veya kucuk harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin buyuk olmasını sağlar.
uppercase : Kelimelerin butun harflerinin buyuk olmasını sağlar.
lowercase : Kelimelerin butun harflerinin kucuk 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 icerden başlayacağını belirler.
line-height : Satırın yuksekliğini ayarlar.(Yuksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının bicimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin bicimlendirilmesini sağlar.

İMLEC OZELLİKLERİ:
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey cizgi ,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 gorunmesini sağlar.
wait:İmlecin meşgul animasyonuna donuşmesini sağlar.
help:İmlecin yardım-soru işaretine donuşmesini sağlar
ZEMİN OZELLİ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 butun zemine yayılmasını sağlar.
repeat-x : Resmin sol-ustten sağ-uste doğru yayılmasını sağlar.
repeat-y : Resmin sol-ustten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla gorunmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma cubuğ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 olcude icerde olmasını sağlar.

TABLO OZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin ust 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 iceriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun ust kenarı ile tablo iceriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo iceriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo iceriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo iceriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun ust 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 ust 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 turunu belirler.
border-top-style : Tablonun ust kenarlık turunu belirler.
border-right-style : Tablonun sağ kenarlık turunu belirler.
border-bottom-style : Tablonun alt kenarlık turunu belirler.
border-left-style : Tablonun sol kenarlık turunu belirler.
border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun ust 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 gecen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yuksekliğini belirler.
NOT : Başlık ”TABLO” olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak uzere hemen her etiket icin kullanılabilir.CSS ’ yi ozel kılan da zaten bu…
KAYDIRMA CUBUĞU OZELLİKLERİ:
scrollbar-face-color :Kaydırma cubuğunun yuzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color :Kaydırma cubuğununun sol ve ust kenarlıklarını cizgi halinde kaplıyor.
scrollbar-shadow-color :Sağ ve alt kenarlıkların golge rengi.
scrollbar-highlight-color :Sol ve ust kenarlıkların golge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yon oklarının rengi
Kaydırma cubuğu, sadece Internet Explorer ’da gecerlidir.
-Derlenmiştir.
istersen ozellik isimlerini eğik yapabilirsin, mesela:

scrollbar-shadow-color :Sağ ve alt kenarlıkların golge rengi.
scrollbar-highlight-color :Sol ve ust kenarlıkların golge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yon oklarının rengi
Paylaş !


http://www.webtroloji.com/css-etiketleri/ /