Css Display
Bu yazımda web sitesi düzeni için CSS’e daha derinlemesine dalacağız.Şimdi, son yazımda CSS konumlandırmasına değindiğimizde bunun bir kısmını yaptık,ancak yerleşimin diğer bazı yönlerine bakacağız ve CSS Görüntüleme Özelliği ile başlayacağız.
lil artsy
Daha önce bir paragraf öğesi oluşturduğumuzda, Pesticide gibi bir araçla öğenin tam kenarlığını incelersek, aslında web sayfasının tüm genişliğini kapladığını görebilirsiniz.
Bunun böyle olmasını istemeseydik, örneğin, bir sonraki satırın sarılmasını sağlayacak kadar kısa paragraflar isteseydik, o zaman farklı bir öğe kullanmamız gerekirdi.Bir başka öğe türü de “span” olarak adlandırılır ve normalde span öğesini başka bir öğenin ortasında görürsünüz.
Bu durumda, bir span açık etiketim (<span>) var ve ardından Beautiful kelimesi olan içeriğine sahibim ve ardından span’ın kapanış etiketine sahibim (</span>).Ve bu açıklık buradaki paragraf öğesinin arasında yer alır.Yani “Hello” var ve sonra span var ve sonra “World” var ve sonra paragraf öğesinin sonu var.İşte bu satırın kodu böyle görünüyor:
Span öğesi ile ilgili gerçekten harika olan benzersiz şey, varsayılan olarak display özelliği için farklı bir değere sahip olmasıdır.İnceleyeceğimiz üç yaygın ekran değeri türü vardır.Span’de bu değer “satır içi”(display:inline) olarak ayarlanmıştır.
Burada iki h2'nin olduğu bir örnek var ve bunlar display: inline olarak ayarlandığından, ikincisinin yeni bir satıra geçmesine gerek kalmadan tam anlamıyla birbirleriyle aynı hizada görüntüleneceklerdir.Varsayılan olarak, çoğu öğede bu görüntü “blok” adı verilen bir değere ayarlanmıştır ve bir blok tam olarak göründüğü gibidir.Tam genişlikte bir blok.Ancak burada görebileceğiniz gibi, öğemizin düzenini değiştirmek için bu değeri değiştirebiliriz.CSS değerini bu şekilde ayarlarız:
Aslında pek çok farklı olası değere sahip olan display özelliğine sahip oluruz.Ancak bugün inceleyeceğimiz üçü block, inline ve son olarakinline-block olarak adlandırılan ikisinin bir karışımıdır.inline-block olarak adlandırılan ikisinin bir karışımıdır.Daha önce de belirttiğim gibi, bir öğenin görüntüsü blok olarak ayarlandığında, tüm genişliği kaplayacaktır.Şimdi, bu, başka bir öğeniz varsa, onun altına gideceği ve aynı satıra gitmeyeceği anlamına gelir.
Ancak, gösterim satır içi olsaydı, bu şu anlama gelirdi:
burada bir öğemiz varsa, örneğin bir span öğesi, ve sonra başka bir öğe eklersek, bu başka bir span, o zaman web sayfasının genişliğine daha fazla sığdıramayana kadar her ikisi de aynı satıra gidecektir, bu durumda bir sonraki satıra gideceklerdir.Şimdi, görüntülerinde satır içi olan öğeler hakkında hatırlanması gereken önemli şeylerden biri, bu öğelerin boyutunu gerçekten ayarlayamamanızdır.Genişlik ve yüksekliği ayarlayamazsınız.Bunun nedeni, varsayılan olarak içeriklerinin boyutuna göre ayarlanacak olmalarıdır.Yalnızca merhaba sözcüğüne sahip olsaydınız, yalnızca bu öğenin görüntülenmesine izin vermesi gerektiği kadar geniş olurdu.Ve eğer çok daha uzun bir cümleniz varsa, satır içi öğeniz bu boyuta sığacak şekilde esneyecektir.
Bunu akılda tutarak, bahsetmek istediğim son tür olan satır içi blok türüne geçecek olursak,
satır içi ve blok arasında bir tür orta nokta olan bu türün benzersiz yanı, blok öğesinin yüksekliği ve genişliği ayarlamamıza izin vermesi ve ayarın satır içi yönünün aynı satıra devam eden öğelere sahip olmamıza izin vermesidir.Bunun anlamı, her ikisi de satır içi blok olan iki öğemiz varsa ve bunlardan biri 200'e 200, diğeri de 20'ye 100 ise, bu durumda her ikisi de satır içi blok olduğu için yükseklik ve genişliklerini ayarlayabiliriz.Ve inline-block oldukları için, web sayfasının genişliğinde yeterli alan olduğu sürece aslında aynı yatay satıra devam edebilirler.Bu display özelliğini block-inline veya inline-block olarak değiştirerek aslında web sitemizin düzenini belirleyebiliriz.
Get Merve Nur Çifci’s stories in your inbox
Join Medium for free to get updates from this writer.
Ve aynı nefeste bahsetmek istediğim sonuncusu,
görüntüleme özelliğini “none” olarak ayarladığınızda,bunun yapacağı şey, ekrandaki herhangi bir öğeyi temelde ortadan kaldırmak olacaktır.Ve bazen bu, örneğin bir öğeyi gizleyen bir düğmeniz olduğunda veya yapılacaklar listesindeki bir öğeyi işaretlediğinizde ve bunun kaybolmasını istediğinizde, ihtiyacınız olan özellik bu olabilir.Yani görüntüleme özelliği pek çok farklı şeyi değiştirebilir.Ve bunlar, görüntüleme özelliğinde sık sık ayarlandığını göreceğiniz değerlerden sadece bazılarıdır.
Bu şekli,nasıl tüm kutular yan yana hale getirebiliriz?
Bildiğimiz ilk şey, satır içi olarak ayarlanmış bir ekrana sahip olduğumuzda, yükseklik ve genişliğe saygı göstermeyeceğidir.
Değiştirmemiz gereken ilk şey bu ekran değeridir.Bu yüzden onu bir satır içi bloğa dönüştüreceğim.(inline-block)
Ve bunu değiştirir değiştirmez artık 200'e 200'lük bir kare olduğuna dikkat edin.Fark edeceğiniz diğer bir şey de, iki satır içi bloğun, yani yeşil ve mavi olanın, yan yana dizildikleri bu düzene izin verirken, blok olarak ayarlanan bu kırmızı kutunun izin vermemesidir, çünkü sayfanın tüm genişliğini kaplamak istemektedir. Dolayısıyla, arzuladığımız hedefe ulaşmak için değiştirmemiz gereken tek şey bu.Öyleyse bunu bir satır içi blok olarak değiştirelim.
eğer sayfamı yeterli genişlikte olacak şekilde uzatırsam, her şey aslında aynı yatayda
hizalanacaktır.Biraz daha dar olsaydı, satır içi blok olduğu için bir sonraki sayfaya geçecek ve böylece her bir öğenin tam genişliğini gösterebilecekti, ancak normal bir görüntüleme ekranında, yani bunu gerçekten bir web sitesinde açtıysanız, yatay olarak mükemmel bir şekilde hizalandıklarını görmelisiniz.Bu zorlu görevin bir sonraki bölümünde sadece display özelliğini tekrar değiştireceğiz ve üçünün de bu şekilde dikey olarak hizalanmasını sağlayacağız.
Şimdi bu sonda kesildi, ancak kaydırırsanız hayal edebilirsiniz, hepsi dikey olarak sıralanmış üç eşit boyutta kare.Bunu da display özelliğini değiştirerek yaparız.Dolayısıyla, dikey düzen hakkında bildiğimiz şey, yatay olarak aynı satıra gitmemeleri için satır içi ile hiçbir ilgilerinin olamayacağıdır.Bu dikey düzeni elde etmek için.Her şeyi blok görüntüleme değerine sahip olacak şekilde değiştirmemiz gerekiyor, çünkü bu web sitemize bu öğelerin her birinin tüm genişliği kendisine istediğini söylüyor.
Bunu yaparak öğelerimizi dikey olarak istiflemiş oluyoruz ve sadece display: block, display: inline ve display:inline-block arasındaki farkı anlayarak iki önemli ölçüde farklı düzen elde etmiş oluyoruz.
Umarım css de bu önemli konuyu anlayabilmişsinizdir.Keyifli okumalar :) Sağlıcakla kalın 🌼
Kaynak:
https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37368052#overview
