Css’te Kutu Modeli, Kalıtsallık Ve Öncelikler

CSS'te Kutu Modeli

CSS'te, tasarım ve düzen hakkında konuşulurken "kutu modeli" terimi kullanılmaktadır. Kutu modeli, HTML ögelerinin etrafına kenarlık eklenmesine ve elemanlar arasında boşluk tanımlanmasına olanak sağlar. Kutu modeli kenar boşlukları, kenarlıklar, dolgular ve içerikten oluşmaktadır. Bir ögenin tam boyutunu hesaplamak için, dolgu, kenarlıklar ve kenar boşluklarının da eklenmesi gerekmektedir.

Div:<div> etiketi bir web sayfasını düzenlemek için CSS ile birlikte çok sık kullanılmaktadır. HTML’deki kutu modeli teriminin iyi bir örneğini teşkil etmektedir. <div> etiketi genellikle diğer HTML öğelerinin CSS kullanılarak stillendirilmesi ile belirli görevleri gerçekleştirmek için bir kapsayıcı olarak kullanılmaktadır.

Float ve Clear : CSS float özelliği, bir öğenin ekranda nasıl durması gerektiğini belirtmek için kullanılır. CSS clear özelliği, hangi ögelerin temizlenen ögenin yanında ve hangi tarafında kalacağını belirlemek için kullanılmaktadır. Clear özelliği genelde bir ögede float özelliği ile kullanılmaktadır.

Position : Position özelliği, bir öge için kullanılan konumlandırma yönteminin türünü belirtmektedir. Özellik, bir içeriğin sayfada nerede görüntüleneceğini tanımlamak için kullanılmaktadır. Ögeler top (üst), right (sağ), bottom (alt), left (sol) ve z -index (z -indeks) değerleri kullanılarak konumlandırılır. Değerler, “position” özelliğine bağlı olarak farklı çalışırlar.

Static: HTML ögeleri varsayılan olarak statik olarak konumlandırılmıştır. Statik konumlandırılmış ögeler, üst, alt, sol ve sağ değerlerinden etkilenmezler.

Relative: relative seçeneği, sayfanın normal akışındaki konumuna göre ögeyi yerleştirmek için kullanılmaktadır.

Fixed: Fixed seçeneği, sayfa aşağı, yukarı veya yanlara doğru kaydırıldığında içeriğin her zaman görünür olmasını sağlamak için kullanılmaktadır.

Absolute: absolute seçeneğindeki içerik, üst ögeye göre konumlandırılmaktadır. Üst ögenin başlangıç noktasına (sol üst köşe) göre otomatik olarak yerleştirilmektedir.

Sticky: sticky kullanımı ile kullanıcının kaydırma konumuna göre konumlandırma yapılabilmektedir. “Sticky” olarak tanımlanan öge, kaydırma konumuna bağlı olarak göreceli (relative) ve sabit (fixed) değer arasında geçiş yapabilmektedir. Oluşturulan öge kaydırma çubuğu kendi konumuna gelene kadar “relative” (göreceli) değerindeki gibi konumlandırılır, daha sonra değer “fixed” olarak tanımlanmış gibi sayfada gösterilmektedir.

Z-index : Üst üste binen 2 veya daha fazla içerik olduğunda, üst üste binen içeriğin hangisinin üstte görüntüleneceğini tanımlamak için z -index özelliği kullanılmaktadır.

CSS'te Öncelikler

Basamaklama (cascading), CSS’de kural kümesinin adıdır. Oluşturulan bildirimlerde ortaya çıkan çatışmaların nasıl çözüldüğünü belirlemektedir ve dilin nasıl çalıştığının temel bir parçasıdır. CSS bildiriminde kullanılan öncelik sıralarını incelemek, sayfalarda yapılan stil düzenlemelerinin istenilen şekilde görünmesini sağlamak için önemlidir.

Satır içi stil / belge düzeyinde stil : Satır içi stilde bir etiket, sınıf veya ID için özellikler tanımlanır. Bir html dosyasında belge düzeyinde stillere göre öncelikle baskın olan kısım satır içi stillerdir.

Sayfaya gömülü stil / dış stil dosyaları (CSS) : Bir html dosyasında sayfaya gömülü stiller, CSS dosyasındaki stillere göre baskın olan kısımdır.

Dosyada tanımlı stil olması / kullanıcı stili: Kullanıcı stilinde HTML dosyasında herhangi bir stil bildirimi yapılmamışsa ve kullanıcı tarayıcıda stil tanımlamalarında değişiklik yapmışsa, tarayıcıda kullanıcının yapmış olduğu bildiriler etkin olur.

Kullanıcı stili / tarayıcı stili: Tarayıcı stilinde HTML dosyasında herhangi bir stil bildirimi yoktur ve kullanıcı da tarayıcının stil bildirimlerinde değişiklik yapmamıştır, bu dosyanın gösteriminde tarayıcı tarafından varsayılan stil ayarları kullanılır.

CSS'te Kalıtsallık (Inheritance)

Aynı aile içinde kalıtsal değerlerin büyükten küçüğe geçtiği gibi HTML ögeleri arasında da CSS özellikleri kalıtsal olarak alt etiketleri (çocuk etiket) etkiler. Kalıtsallık CSS kullanımında bir bildirimin tek tek bütün etiketlere uygulanması yerine ata etikete uygulayarak alt (çocuk) etiketlere de otomatik olarak uygulanmasını sağlar. Bir ögenin stilleri alabilmesinin bir yolu da mirastır (kalıtımdır). Bütün özellikler miras alınmaz, margin (kenar), padding (dolgulama), background (arka plan rengi), width (genişlik) gibi bazı özelliklerde kalıtsallık yoktur.