Top

CSS Dersleri

Konumlandırma

Css konumlandırma özellikleri bir elementi konumlandırmanıza yarar. Ayrıca elementlerin biribirine göre konumunu ve içeriklere göre konumunu belirli kriterlere göre konumlandırılmasını sağlar. Elementler  top, bottom, left ve right özellikleri kullanılarak konumlanabilir. Bununla beraber,  position özelliği belirlenmeden bu özellikler işlemez. Ama farklı bir konumlandırma özelliği de sunmaktadırlar. 4 çeşit konumlandırma yöntemi mevcuttur;


Sabit konumlandırma

HTML elementleri varsayılan olarak statiktir yani sabittir konumu. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.


Sabit Konumlama

SAbit konumlamaya sahip bir element tarayıcının göreceli konumuna göre sabitler kendini. Pencereyi kaydırdığınız halde konumu değişmeyecektir:

Örnek

p.pos_fixed { position:fixed; top:30px; right:5px; }

Kendiniz de deneyin »

Not: IE7’de ve IE8’de sadece !DOCTYPE belirlendiği takdirde sabit konumlandırma işe yaramaktadır. Sabit konumlanan elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sabit konumlanan element yokmuş gibi davranırlar. Sabit konumlanan elementler diğerlerinin üzerine çıkarlar.

Display özelliği, bir elementin nasıl gözükeceğini ve Visibility özelliği de bir elementin görünür ya da gizli olmasını sağlar.

Bir elementi gizlemek – display:none veya visibility:hidden

Bir elementi gizlemek display’e none veya visibility’ye hidden değeri vermekle gerçekleşir. Yalnız bunlar farklı sonuçlarla karşılaşmamıza neden olur:

visibility:hidden elementi gizler,fakat hala önceden belirlenmiş olan alanı kaplamaya devam eder. Element yok olur ama hacim kaplar hala yani şablonda yeri hazırdır.

Örneğin

h1.hidden {visibility:hidden;}

Siz de deneyin »

display:none elementi gizler, işgal ettiği yer de gizlenir. Element yok olur ve element hiç var olmamış gibi yer almaz şablonda:

Örneğin

h1.hidden {display:none;}

Siz de deneyin »

 


CSS Display Elementinin – Block ve Inline Değerleri

Block elementlerinin tam genişlik ve yüksekliği kaplaması sağlar ve  önce ve sonrasına satır atar.

Block element örnekleri:

  • <h1>
  • <p>
  • <div>

Inline yani satır içi elementler de sadece genişliği kaplar  ve satır atmaya zorlamaz.

Css Boyutlandırması size elementin yüksekliğini ve genişliğini kontrol etmenize olanak tanır. Sizin denemeniz için örnekler Elementin Yüksekliği Bu örnek yüksekliğin ayarlanışını göstermektedir. Yüzdelik kullanarak bir imajın yüksekliğini ayarlama Bu örnek yüksekliğin yüzdelikle ayarlanışını göstermektedir. Pixel kullanarak bir elementin genişliğini ayarlama Bu örnek element için piksel kullanımı ile genişlik ayarlamasını göstermekte. Bir elementin maksimum...

Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz! Grup Seçiciler Stil dosyasında aynı stile sahip elementler mevcut olabilir. h1 { color:green; } h2 { color:green; } p { color:green; } Kodu kısaltmak için,seçicileri gruplayabilirsiniz. Herbir seçiciyi virgül ile...