CSS  VE LİNKLER:

a : Linkin, sayfa açıldığında tıklanmadan veya fare üzerine getirilmeden önceki durumudur.
a:hover : Linkin fare ü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.
Yukarıda ki tanıumlarla ilgili küçük bir uygulama yapcak olursak daha detaylı şekilde incelemiş oluruz.
Daha önceden oluşturduğumuz zb.css sayfasına ekleme yapmaya baslayalım.
a
{
            color: #FFFFFF;
            font-size: 10pt;
            display: block;
            line-height: 16px;
            text-align: center;
            background-color: #FF6600;
            border: 3px outset #FFCBA8;
            text-decoration: none;
            font-family: VERDANA;
            font-weight: bold;
}
a:HOVER
{
            color: gray;
            font-size: 10pt;
            font-family: VERDANA;
            font-weight: bold;
            font-weight: 200;
            display: block;
            line-height: 16px;
            text-align: center;
            background-color: #FF954F;
            border: 3px inset #9D3F00;
            text-decoration: none;
}
Sonrada hazırlamış olduğumuz sayfaya aşağıda yer alan tagleri ekliyelim.
< table cellpadding=”0″ cellspacing=”0″ >
        < tr >
            < td style=”width:250px;” >
                < a href=”#”  >ZİRVEDEKİ BEYİNLER< /a >
< a href=”#”  >ZİRVEDEKİ BEYİNLER< /a >
< a href=”#”  >ZİRVEDEKİ BEYİNLER< /a >
< a href=”#”  >ZİRVEDEKİ BEYİNLER< /a >< /td >
        < /tr >
    < /table >
CSS VE KATMANLAR:
position : Katmanın yerini,
absolute : Katmanın yerini browsera göre,
relative : Katmanın yerinin bir önceki katman a göre,
static : Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) ye göre,
top : Katmanın browsere göre üstten hizasını,
left : Katmanın soldan hizalanmasını,
width : Katmanın genişliği,
height : Katmanın yüksekliği,
overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne yapmamız gerektiğini,
auto : Otomatik olarak gösterilmesini,
scroll : Kaydırma çubuğu ekleyerek görünmesini,
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini,
hidden : Sığmayan yerleri,
visibility : Katmanın görünebilirlik ayarını,.
visible : Katmanın görünür olmasını,
hidden : Katmanı gizlenmesini,
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğin ve1 değeri katmanın en altta olacağını belirtir.
Bununla ilgili birkaç örnek gösterecek olursak;
.div
{
            position: static;
            top: 15px;
            left: 115px;
            width: 192px;
            height:50px;
            background-color: #FF9900;
}
.div1
{
            position: absolute;
            top: 80px;
            left: 115px;
            width: 177px;
            height: 84px;
            background-color: #FF9900;
            overflow: scroll;
}
Bu iki örnekte de. Div katmanlarının sayfalarda nasıl yer alacağı konusunda bilgi verilmiştir.
genellikle-kullanilan-cssler-1

genellikle-kullanilan-cssler-1

CSS ve FONTLAR:
Font- Family :Yazı türün,(Arial , Verdana gibi.).
Font – Style: Yazının sitilini,Sağ,Normal,Eğik)
Font -Variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını,
Font – Weight: Yazının kalınlık-inceliğini,
Font – Size: Yazının büyüklüğünü belirler.
td
{
            font-family: verdana;
            font-size: 10px;
            font-weight: bold;
            font-style: oblique;
            font-variant: normal;
}
 
< table style=”height: 61px; width: 132px” >
< tr >
< td >zirvedeki beyinler< /td >
< /tr >
< /table >
genellikle-kullanilan-cssler-2

genellikle-kullanilan-cssler-2

CSS ve TEXTLER:

word-spacing : Kelimeler arasında bırakılacak boşluğu,
letter-spacing : Harfler arasında bırakılacak boşluğu,
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını,
underline : Kelimenin altının (Satır altından) çizili olmasını,
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını,
line-through : Kelimenin ortasından çizili olmasını,
blink : Kelimenin yanıp sönmesini,(Firefox)
vertical-align : Metnin yatay hizalandığını,
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını,
capitalize : Kelimelerin ilk harflerinin büyük olmasını,
uppercase : Kelimelerin bütün harflerinin büyük olmasını,
lowercase : Kelimelerin bütün harflerinin küçük olmasını,
none : Kelimelerin orjinal metindeki gibi olmasını,
text-align: Metnin dikey olarak nasıl hizalanacağını,
left : Metnin sola hizalanmasını,
right : Metnin sağa hizalanmasını,
center : Metnin ortaya hizalanmasını,
justify : Metni iki yana yaslanmasını,
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını,
line-height : Satırın yüksekliğini,
TD
{
            text-align: left;
            text-decoration: overline;
            text-transform: uppercase;
            word-spacing: 40px;
            letter-spacing: 10px;
            vertical-align :baseline;
            line-height: 30px;
 }
 
< table style=”height: 61px; width: 132px” >
< tr >
< td >zirvedeki beyinler< /td >
< /tr >
< /table >
genellikle-kullanilan-cssler-3

genellikle-kullanilan-cssler-3

CSS ve BACKGROUND:

background-color: Zeminin rengini,
#color : Renk adını,
transparent: Zeminin saydam olmasını,
background-image: Zemine resim yerleştirilmesini,
url : Zemine yerleştirilen resmin adresini,
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını,
repeat : Resmin bütün zemine yayılmasını,
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını,
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını,
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini,
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu,
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını,
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını,
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini,
top : Resmi yukarı yerleşmesini,
center : Resmi ortalanmasını,
bottom : Resmi aşağı yerleştirilmesini,
left : Resmi sola yerleştirilmesini,
right: Resmi sağa yerleştirilmesini sağlar.

 

CSS de bulunan diğer elementler:
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu,
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu,
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu,
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu,
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu,
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu,
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu,
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu,
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu,
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu,
border : Tablonun kenarlarının şekillendirilmesini,
border-top : Tablonun üst kenarının şekillendirilmesini,
border-left : Tablonun sol kenarının şekillendirilmesini,
border-bottom : Tablonun alt kenarının şekillendirilmesini,
border-right : Tablonun sağ kenarının şekillendirilmesini,
border-width : Tablonun kenarlarının kalınlığını,
border-top-width : Tablonun üst kenarının kalınlığını,
border-right-width : Tablonun sağ kenarının kalınlığını,
border-bottom-width : Tablonun alt kenarının kalınlığını,
border-left-width : Tablonun sol kenarının kalınlığını,
border-style:Tablonun kenarlık türünü,
border-top-style:Tablonun üst kenarlık türünü,
border-right-style:Tablonun sağ kenarlık türünü,
border-bottom-style:Tablonun alt kenarlık türünü,
border-left-style:Tablonun sol kenarlık türünü,
border-color : Tablonun kenarlarının rengini,
border-top-color : Tablonun üst kenarının rengini,
border-right-color : Tablonun sağ kenarının rengini,
border-bottom-color : Tablonun alt kenarının rengini,
border-left-color : Tablonun sol kenarının rengini,
color : Tabloda geçen metnin rengini,
width : Tablonon genişliğini,
height : Tablonun yüksekliğini belirler.
Önemli Not: Burada kullanılan elementleri açıklayabilmek için tablo tagi demiştik. Fakat elementlerin çoğu hemen hemen tüm tagler’ de de geçerlidir. Css Makalemiz de temel anlatılması gereken bilgiler bu kadar.Diğer makalerimiz de görüşmek üzere.