Video: TEMEL CSS EĞİTİMİ - CSS DERSLERİ 1 2024
CSS'nin konumlandırma nitelikleri, öncelikle etiketi kullanarak katmanları biçimlendirmek için kullanılır; ancak bunları ayrıca bir resim, konteyner veya blok düzeyindeki öğenin konumunu tarayıcı Katmanlar için hem içerik hem de kapsayıcı bu kategorideki özniteliklerle biçimlendirilebilir.
konum: Bir tarayıcı penceresinde bir stil öğesinin nasıl konumlandırılacağını belirler. Konumun mutlak, sabit, göreceli veya statik olup olmadığını belirleyin.
#footer {position: relative;}
Pozisyonu ayarlarken, aşağıdaki stil değerlerinden birini kullanın:
-
absolute: Elemanın konumunu mutlaka elemanın tarayıcı penceresinin sol üst kenarına göre yerleşimi veya en yakın ya da nispeten konumlandırılmış üst elemana göre.
-
fixed: Elemanın konumunu, elemanın yerleştirilmesi için tarayıcı penceresinin sol üst köşesine göre girilen sayısal değerlere dayanarak kesinlikle ayarlar.
-
relative: Elemanın konumunu, dosyanın metin akışındaki styled öğenin konumuna göre nesnenin yerleşimi için girilen sayısal değerlerle ayarlar.
-
static: Elemanı metin akışı içerisinde tam bir konuma ayarlar.
genişlik: Bu özellik, bir katmanın veya diğer kap gibi bir öğenin genişliğini px, pt, in, cm, mm, pc, em, ex,% veya otomatik olarak ayarlamak için kullanın.
# layer1 {height: 100px;}görünürlük: Bu özellik, bir tarayıcı penceresinde ilk açıldığında gizli, devralınabilir veya görünür olarak ayarlanabilen bir öğenin ilk görünürlük değerini belirler.
# layer1 {visibility: hidden;}
Görünürlük, bir öğenin bir blok veya satır içi öğe olarak ele alınması gerekip gerekmediğini veya ekran ile tarayıcı tarafından tamamen yok sayılıp bırakılmadığını belirleyen display özniteliğiyle karıştırılmamalıdır: Yok; bağlıyor. Görünürlükle, sayfanın tarayıcıya ilk yüklendiğinde katman gibi bir öğenin ilk görünürlük durumuyla uğraşıyorsunuzdur.
Bu özellik, sayfadaki öğeleri gizlemek ve göstermek için JavaScript kullanarak açılıp kapatılarak ziyaretçinin sayfasına biraz etkileşim sağlanır.
Elemanınızın görünürlüğünü değiştirmek için görünürlük özelliğini CSS selektörünüze aşağıdaki değerlerden biriyle ekleyin:
gizli: Bu seçenek, bir sayfa ilk tarayıcıda açıldığında görüntülenecek bir katmanı gizler.
inherit: Bu seçenek herhangi bir katmanın üst katmanın görünürlüğünü devralmasına neden olur; Bir ebeveyn yoksa, katman görünür olur. Görünürlük belirtilmediğinde inherit varsayılan özniteliktir.
-
görünür: Sayfa ilk kez bir tarayıcı penceresinde açıldığında herhangi bir üst katmanın görünürlük ayarından bağımsız olarak katmanı görünür hale getirmek için bu seçeneği belirleyin.
-
z-index: Bu özellik, tarayıcıda görüntülendiği gibi sayfadaki diğer katmanlara göre bir katmanın yığın sırasını belirtir.
-
Numara kritik olduğunda z dizinini otomatik olarak ayarlayın, katmanı bir üst katmanın Z-endeksi değerini miras bırakacak şekilde devralınacak şekilde ayarlayın veya 1, 15 veya 100 gibi belirli bir pozitif veya negatif sayı girin, sayı sayfadaki diğer katmanlara göre önemlidir.
Numara ne kadar yüksekse katmanın ziyaretçiye en yakın sayfanın önüne veya üstüne en yakın yanı; sayı düştükçe, katmanın tarayıcının arka planına ne kadar yakın görünür.
#lastchance {z-index: 4;}
Bu çizim, bir sayfada, farklı z-endeksi değerlerine sahip birkaç katmanın bir örneğini gösterir.
taşma: Taşma ayarı, bir katmandaki içeriğin, CSS içinde tanımlanan katmanın boyutunu aşan içeriğine ne olacağını belirtmek için kullanılabilir. Örneğin, bir katmanın boyutu 200 piksel x 200 piksel ise ancak tam metin sayfası içeriyorsa, taşma düzeyi metnin katmanı nasıl dolduracağını belirler. Taşma özniteliğini auto, hidden, scroll veya visible olarak ayarlayın.
#aboutus {overflow: scroll;}
Burada, kullanabileceğiniz taşma değerlerinin her biri için bir açıklama verilmiştir:
auto: Tarayıcıya, yalnızca ve yalnızca tarayıcıya kat kaydırma çubukları eklemek için bu seçeneği kullanın İçeriğin katmanın tanımlı genişlik ve yüksekliğini aşması.
gizli: Bu seçenek seçildiğinde katman boyutu korunur ve bu boyutu aşan herhangi bir içerik tarayıcı penceresinde kesilir veya kesilir.
-
kaydırma: İçeriğin katmanın genişliğine ve yüksekliğine uyup uymadığına bakılmaksızın katmana kaydırma çubukları eklemek için kaydırma seçeneğini seçin. Bu özellik tüm tarayıcılar tarafından eşit olarak desteklenmediğinden, yayınlamadan önce test etmeyi unutmayın.
-
görünür: Gerektiğinde, tüm içeriği görülebilmesi için belirtilen katman genişliğini ve yüksekliğini aşan içeriğe sığması için katmanın dikey olarak ve sonra yatay olarak genişlemesi için bu seçeneği belirleyin.
-
Yerleştirme (sol, üst, sağ, alt): Bir tarayıcı penceresinde bir stil öğesinin tam boyutunu ve konumunu (belirtilen türe dayalı olarak) belirtmek için placement özniteliğini kullanın.
-
Varsayılan olarak, bir öğenin piksel boyutu ve yerleşimi üst, sol, alt ve sağ kenarlar için belirtilir. Bununla birlikte, arzu edilirse diğer birimleri (pt, in, cm, mm, pc, em, ex veya%) de kullanabilirsiniz veya herhangi birinin değerini auto olarak ayarlayabilirsiniz. Katmanlar için, bu katmandaki içerikler belirtilen boyutu aşarsa, katman içeriğe uyacak şekilde genişler.
#specialitems {left: 500 piksel; üst: 300 piksel; sağda: 0; bottom: 0;}
clip: Bir katmanda bu katmanın sol üst kenarına göre daha küçük görünen dikdörtgen alanı belirtmek için bu özniteliği kullanın.Kırpıldığında, gizli alan gizli içeriği gizleyebilen ve gösterebilen özel efektler oluşturmak için JavaScript veya başka programlarla değiştirilebilir.
Piksel (piks), pc (pikap), pt (puanlar), inç (inç), mm (milimetre) kullanılarak katmanın üst, sol, sağ ve alt kenarlarına kırpılmış alanın değerlerini ayarlayın. cm (santimetre), em (ems), ex (exs) veya% (yüzde) veya otomatik değer.
#bunnygame {clip: rect (10px, 100px, 0 piksel, 60 piksel);}
