CSS - Siniflandirma (classification)

Tanımlar

Dil-Kuralı Art-Alan Yazı Yazı-tipi Sınır Dışçizgi Kenarlar Dolgu Liste Tablo

Gelişmiş

Boyut Sınıflandırma Konumlama Sözde-Sınıf Sözde-Öğe Galeri Donukluk Ortam-Türü

Ardaşık Stil Sayfaları (CSS)

Sınıflandırma (classification)

Bu özellik, Bir öğeyi nasıl ve nereye görüntüleyeceğinizi belirtir.

Genel

Bu özellik, Bir öğeyi nasıl ve nereye görüntüleyeceğinizi belirtir. Bir başka öğe içinde resmin yerede görüneceğini tanımlar, bir öğeyi normal yerine göreceli olarak nereye yerleştirileceğini belirtir. Bir öğenin mutlak yerini tanımlar ve bir öğenin görülebilirliğinin nasıl kontrol edileceğini belirtir.

Destekleyen Tarayıcılar:	IE: Internet Explorer, F: Firefox, N: Netscape.
	W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

Özellik	Açıklama	Değerler	IE	F	N	W3C
clear	Nir öğenin, başka kayan öğelere izin verilmeyen yanlarını tanımlar.	left right both none	4	1	4	1
cursor	Görüntülenecek İmleç (cursor) tipini tanımlar.	url-adresi auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	4	1	6	2
display	Bir öğe eğer görüntülenirse nasıl olduğunu tanımlar	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	4	1	4	1
float	Bir resim y ada yazının diğer bir öğe içinde nasıl yer alacağını tanımlar	left right none	4	1	4	1
position	Bir öğeyi statik, göreceli, mutlak ve değişmez yerleştirmek için kullanılır.	static relative absolute fixed	4	1	4	2
visibility	Bir öğenin görüntülenecek mi yoksa gizlenecek mi olduğunu belirtir.	visible hidden collapse	4	1	6	2

Silme (clear) Özelliği

Bir öğenin içinde yer alan resim ve yazı öğelerine kayan/gezinen öğeler denir.
Bu özellik bir öğenin, gezinen diğer öğelerin olamayan yanlarını tanımlar.

h2
{
clear: right
}

address
{
clear: both
}

Olası değerler:
left: Gezinen öğelere sol tarafta izin verilmez.
right: Gezinen öğelere sağ tarafta izin verilmez.
both: Hem sağ hem de sol tarafta gezinen öğelere izin verilmez.
none: Varsayılan değer. Gezinen öğelere her iki yönde de izin verilir.

İmleç (cursor) Özelliği

Bu özellik, bir öğeye yöneltildiğinde hangi tür imleçin kullanılacağını gösterir.

h2
{
cursor: crosshair
}

p
{
cursor : url("first.cur"), url("second.cur"), pointer
}

Olası değerler:

Değer	Açıklama
url-adresi	Özel olarak kullanılacak imleçin url-adresi verilir. Not: Her zaman soysal bir imleçi tanımların en sonunda mutlaka belirtin, öyle ki burada tanımlanan imleçlerin hiç biri kullanılamadığında işe yarasın
default	Varsayılan imleç (çoğu kez bir oktur)
auto	Varsayılan değer. İmleçi tarayıcı belirler
crosshair	İmleç bir haça dönüşür
pointer	İmleç, el biçiminde bir göstericiye dönüşür.
move	İmleç hareket ettirilecek birşey olduğunu gösterir
e-resize	İmleç bir kutunun kenarlarının sağa(doğuya) hareket edeceğini belirtir
ne-resize	İmleç kutunun kenarının yukarı ve sağa (kuzey/doğu) hareket edeceğini gösterir
nw-resize	İmleç kutunun kenarının yukarı ve sola (kuzey/batı) hareket edeceğini gösterir
n-resize	İmleç kutunun kenarının yukarı (kuzey) hareket edeceğini gösterir
se-resize	İmleç kutunun kenarının aşağı ve sağa (güney/doğu) hareket edeceğini gösterir
sw-resize	İmleç kutunun kenarının aşağı ve sola (güney/batı) hareket edeceğini gösterir
s-resize	İmleç kutunun kenarının aşağı (güney) hareket edeceğini gösterir
w-resize	İmleç kutunun kenarının sola (batı) hareket edeceğini gösterir
text	The cursor indicates text
wait	İmleç programın meşgul olduğunu gösterir (çoğu kez bir kum saati)
help	İmleç yardımın hazır olduğunu gösterir (Çoğu kez bir soru işareti ya da balon)

Görüntüleme (display) Özelliği

Bu özellik bir öğenin görüntülenecese, nasıl görüntülendiğini anlatır.

p
{
display: block
}

li
{
display: list-item
}

table
{
display: table
}

td, th
{
display: table-cell
}

Olası değerler:

Değer	Açıklama
none	Öğe görüntülenmeyecektir
block	Öğe, önünde ve arkasındaki satır boşluklarıyla blok düzeyi bir öğe olarak görüntülenecektir.
inline	Varsayılan değer. Öğe önünde ve arkasında satır boşlukları olmadan satır içinde (inline) görüntülenecektir.
list-item	Öğe bir liste biçiminde görüntülenir
run-in	Öğe içeriğine bağımlı olarak, blok düzeyi ya da satır içi öğe olarak görüntülenir
compact	İçeriğine göre bir öğe ya blok düzeyinde ya da satır içinde görüntülenir.
marker
table	Öğe tablonun önünde arkasındaki satır aralıklarıyla blok tablo olarak görüntülenir (<table> gibi)
inline-table	Öğe önünde ve ardında satır aralıkları olmadan satır içi tablo gibi görüntülenir (<table> gibi)
table-row-group	Bir öğe bir ya da daha çok tablo satırı gibi görüntülenir (<tbody> gibi)
table-header-group	Öğe bir tablodaki bir ya ada daha çok satır gibi görüntülenir (<thead> gibi)
table-footer-group	Öğe bir tablodaki bir ya ada daha çok satır gibi görüntülenir (<tfoot> gibi)
table-row	Öğe bir tablonun satırı gibi görüntülenir (<tr> gibi)
table-column-group	Bir öğe bir ya da daha çok kolon gibi görüntülenir (<colgroup> gibi)
table-column	Bir öğe hücrelerin kolonları gibi görüntülenir (<col> gibi)
table-cell	Öğe bir tablonun hücresi gibi görüntülenir (<td> and <th> gibi)
table-caption	Öğe bir tablonun başlığı gibi görüntülenir (<caption> gibi)

Gezinme/Kayma (float) Özelliği

Bir üst öğe içinde resim ya da yazı öğesinin nerede bulunacağını tanımlar.

img
{
float: left
}

Olası değerler:
left: Resim ya da yazı üst öğenin soluna doğru kaydırılır
right: Resim ya da yazı üst öğenin sağına doğru kaydırılır
none: Varsayılan değer. Resim ya da yazı üst öğenin neresinde tanımlandıysa orada kalır.

Konum (position) Özelliği

h1
{
position:absolute;
left:100px;
top:150px;
}

Olası değerler:

Değer	Açıklama
static	Varsayılan değer. Konumu durağan (static) olan bir öğe sayfayla beraber kayar (gezinir). Durağan öğe konumu top, bottom, left ya da right tanımlarının tümünü önemsemez/atlar
relative	Konumu göreceli olan bir öğe (position: relative) üst öğenin normal konumuna göre yerleriş, yani "left:20" öğenin SOL konumuna 20 pixel eklenmesini sağlar
absolute	Bir öğenin mutlak konumu (position: absolute) içinde bulunduğu bloka göreceli olarak belirtilen koordinatlarda bulunur. Öğenin yeri "left", "top", "right", ve "bottom" özellikleriyle belirlenir
fixed	Değişmez konumlu bir öğe (position: fixed) tarayıcı penceresine göre yerleşir. "left", "top", "right", ve "bottom" özellikleri ile yeri tanımlanır. Sayfanın kaydırılmasına bakmaksızın öğe hep aynı yerde kalır (IE7 için strict mode)

Görünülebilme (visibility) Özelliği

Görünülebilme özelliği öğenin görünüp görünemeyeceğini belirtir

p
{
visibility: hidden
}

Olası değerler:
visible: Öğe görülebilir hidden: Öğe görünemez collapse: tablo öğeleri içinde kullanılırsa, değer satır ve kolonları kaldırır ama tablonun görünüşünü değiştirmez. Kolon ve satırlar için ayrılmış olan alan başka içerikler için kullanılır. Bu değer başka öğeler için de kullanılırsa adı "hidden" (gizlenmiş) olur.