Hancı Eğitim

Cssin (Stil Şablonu ) 3 farklı kullanım alanı vardır. Bunlar ;



Yerel, yani sayfada sadece bir kez: Yerel stil şablonlar bir html etiketi için özel olarak kullanılırlar.



Global, yani tüm sayfa için: Global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.



Bağlantılı, yani birden çok sayfa için: Ba?lantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar.



Yerel Stil Şablonu

Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel ) etkiler. Şimdi bir örnek verelim.

Fare İmlecini Seçmek


Fare imlecinin sembolünü değiştirmek de sizin elinizde. Bunun için
cursor özelliğini kullanıyoruz. cursor özelliği aşağıdaki değerleri
alabilir:



url Bu değer ile kendi tasarladığımız .cur uzantılı imleci tanımlayabiliyoruz. --

default Varsayılan değer bildiğimiz ok şekli imleç. Değiştirdiğimiz imleçten varsayılan değere dönmek için sıkça kullanılır.

hand Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.

crosshair Ziyaretçiyi bir noktayı belirlemesi (nişan alması ) yönünde güdüler.

pointer Ziyaretçiyi bir noktayı göstermeye güdüler.

move Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.

Bu sayfada HTML nesnelerinin CSS ile sayfa içinde nasıl konumlandırılacağını göreceğiz.



Nesne Yüzdürme

İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada
veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu
işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki
konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi
içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği
verirsek nesne sağda, left özelliği verirsek solda, none özelliğini
verirsek yazıldığı yerde konumlandırılır.

Bu sayfayı okumadan önce,
HTMLde öğrendiğimiz listeleme kodlarını birkez gözden geçirmenizi
tavsiye ederim. Bu sayfanın konusu listeleme kodlarını CSS ile
şekillendirmektir.



Maddeleme İşaretleri


HTMLde anlatıldığı üzere, iki tür listeleme vardır: sıralı
listeleme, sırasız listeleme. Sıralı listelemeyi type="..."
parametresine "1", "a", "A", "I", "i" gibi değerler vererek
şekillendiriyorduk. Aynı şekilde sırasız listelemeyi type="..."
parametresine "disc", "circle", "square" gibi değerlerle
şekillendiriyorduk. CSSde type="..." parametresinin işlevini
list-style-type özelliği üstlenmiştir. Bu özelliğin aldığı özellikler de
aşağı yukarı aynı:



none Maddelerin önüne işaret koymaz.

İçkenar Boşluk Değeri

Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni
için önemli bir işlemdir. CSSde dışkenar boşluklarını ifade etmek için
padding özelliğinden yararlanırız.



padding özelliğine vereceğimiz değerler şu şekillerde olabilir:



birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir.

padding: 12px, margin:1cm, vb.

yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.

padding: 20%





Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları
bu değeri alır. Eğer iki değer verirsek, üst ve alt içkenar boşlukları
ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri alır. Eğer üç

HTMLde nesnelerin diğer
nesnelere olan konumunu, dışkenar boşlukları ile belirleyebiliriz. Her
nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında bir
boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu
dersimizde bu boşluğu margin özelliği ile ifade edeceğiz.



Dışkenar Boşluk Değeri


margin özelliğine vereceğimiz değerler şu şekillerde olabilir:



auto Dışkenar boşluğunu gözatıcı (browser ) otomatik olarak belirler.

margin: auto

birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir.

margin: 12px, margin:1cm, vb.

yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.

margin: 20%

Sınır Çizgi Şekilleri


CSSde sınır çizgilerinin şeklini belirlemek için border-style
özelliğinden yararlanırız. Bu özelliğin değerleri şunlardır: none,
dotted, dashed, solid, double, groove, ridge, inset, ve outset.
Aşağıdaki uygulama bu değerlerin nasıl sonuç verdiğini gösteriyor. NOT:
Bu özelliği Netscape desteklemiyor.