Anasayfa / Yazılım / HTML / CSS / CSS Yapısında Sıralama

CSS Yapısında Sıralama

CSS’i iyi anlayabilmek için kaskat yapısını ve miras olayını anlamak gerekiyor. Bir CSS dokümanındaki herhangi bir öğe için, bir element için hangi özelliklerin kullanılacağını browser belirler. Daha önceki yazılarımda bir HTML dokümana CSS tanımlamaların 3 farklı yol ile yapıldığını belirttim. Bunlar inline, embedded ve external olarak orjinalde adlandırılan Türkçe olarak ifade etmek gerekirse satıriçi, sayfaya gömülü ve harici bir CSS dokümanında olmak üzere CSS tanımlama şekillerimizdir. Bunlara ek olarak aslında bilmemiz gereken iki tip daha var. Bunlar user style dediğimiz kullanıcı stili ve browser style dediğimiz tarayıcı stili.

Browser style dediğimiz tarayıcı stili herhangi bir HTML elemente bir stil atanmadığı durumda tarayıcının kendi belirlemiş olduğu varsayılan stildir. Bu stil aynı zamanda kullanıcı aracı stili – user agent style olarakda adlandırılır. Buna ek olarak tarayıcıların çoğunda bu varsayılan stil ayarları da değiştirilebilir, ek bilgi olsun bu.

Şimdi bu CSS tanımlama usulünde çalışma yani öncelik sırasına değinelim. Bir HTML doküman için CSS özelliklerinin dikkkate alınmasında aşağıdaki sıralama izlenir :

1) In-Line Style yani satır içi stili, bu stilde bir HTML element içinde veya bir class içinde ya da bir ID içinde özellikler tanımlanır. Öncelikle baskın olan kısım burasıdır. Yani bir h1 elementi için hem HTML doküman da gömülü hemde aşağıda body kısmında tek bir kısımdaki h1 için inline css özellikleri tanımlanmış olsun. İşte buradaki h1 elementi için baskın olan tanımlama, inline olarak belirtilen özellikler olur.

2) Embedded style yani HTML doküman içinde head alanında style etiketleri içine gömmüş olduğumuz CSS özellikleri. Bu stilde bir HTML dokümanda head elementi içinde style etiketleri içinde özelliklerin tanımlanmasıdır. Inline’dan sonra baskın olan kısım burasıdır. Yani bir h1 elementi için hem HTML doküman da gömülü hemde harici bir CSS dokümanında özellikler tanımlanmış olsun. İlgili HTML dokümandaki h1 için öncelikle embedded olarak tanımlanan kısım geçerli olur.

3) External style yani harici bir CSS dokümanından özelliklerin okunması. Bu tanımlama şekli ayrı bir CSS dokümanında özellik bilgilerinin tutulmasıdır. Daha sonra bu CSS dokümanının konumu-adres bilgisi bağlanacak HTML dokümanlara link vermek sureti ile import edilir.

4) User style yani kullanıcı stili. Bu stil de kullanıcı eğer kullanmış olduğu browser üzerindeki stil tanımlamalarında değişiklik yapmış ise ve herhangi bir HTML doküman için hiç bir stil tanımlanmamış ise tarayıcıda kullanıcının yapmış olduğu ayarları dikkate alan ve buna göre HTML dokümana özellik kazandıran stildir.

5) Browser style yani tarayıcı stili. Hiç bir CSS tanımlaması ya da tarayıcı üzerinde kullanıcı stil tanımlaması yapılmaması halinde tarayıcı tarafından varsayılan ayarların kullanılmış olduğu stildir.

Şimdi basit bir örnek ile olayı özetleyelim. Bir HTML dokümanda “h1” elementi için stil tanımlamaları olduğunu farz edelim. Bu h1 elementi için body içinde inline olarak kırmızı yazı olduğunu, embedded olarak ise sarı yazı olduğunu belirtelim. Tıpkı aşağıdaki kodda olduğu gibi :





Untitled Document






Aşağıda ise başlık için renk kırmızı olarak tanımlandı

İsmail GÜRSOY

Burada başlık hangi renkte olacaktır? Tabii ki kırmızı, çünkü birinci öncelik inline stilde.. Eğer inline stil olmasa idi embedded kısımda yazdığımız geçerli olacaktı.Bu ikisi olmasa idi tarayıcı önce external bir stil yüklenmiş mi ona bakar, o da yoksa varsa kullanıcının tarayıcı için tanımlamış olduğu stile bakar o da yoksa kendi varsayılan ayarlarını geçerli kılar. Buradaki deyimi biraz yazılımcı ifadesine çevirelim çünkü çok sık kullanacağımız bir deyim, inline stil HTML dokümandaki embedded tanımlanan stili ezdi, yani override etti..

Bir yorum

  1. Teşekkürler. Çok faydalı bir yazı

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir