CSS görüntüleme özelliği, web tasarımcıları için güçlü bir araçtır. Web sitesi öğesi düzenlerini minimum stille ve hatırlaması kolay basit değerlerle kontrol etmenize olanak tanır.
Ancak bu değerlerin her biri ne işe yarar ve nasıl çalışır? Hadi bulalım.
CSS görüntüleme Özelliği nedir?
display özelliği, bir web sayfasındaki HTML öğeleri için kullanılan kutu oluşturma türünü belirtir. Bu, hiç görünmemek de dahil olmak üzere çeşitli davranışlarla sonuçlanır. Bu değerleri web sitenizde stil sayfası veya aşağıdaki uygun CSS özelleştirme bölümleri aracılığıyla düzenleyebilirsiniz. WordPress gibi CMS araçları.
Öğeleri CSS ekranıyla aynı hizada tutun: satır içi
Genişlik ve yükseklik değerleri, satır içi görüntülemeye sahip bir öğeye uygulanmaz; içindeki içerik boyutlarını belirler. Satır içi HTML öğeleri, bir. Satır içi görüntüleme en yaygın olarak metin için kullanılır.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.Çizgide {
ekran: satır içi;
yazı tipi boyutu: 3rem;
}
#inline-1 {
arka plan rengi: sarı;
dolgu: 10px 0px 10px 10px;
}
#satır içi-2 {
arka plan rengi: açık yeşil;
dolgu: 10px 10px 10px 0px;
}
</style>
</head>
<gövde>
<h1>CSS Görüntü Satır İçi</h1>
<div sınıfı="Çizgide" kimlik="satır içi-1">bu metin</div>
<div sınıfı="Çizgide" kimlik="satır içi-2">satır içi özellik değeri ile.</div>
</body>
</html>
Yukarıdaki HTML işaretlemesi ve CSS, satır içi değeri görüntülemenin iyi bir örneğidir. Birlikte kullanıldığında, bu, iki farklı HTML öğesiyle yapılmış tek bir metin satırı görüntüler.
Web Sitesi Düzenlerini CSS ile Kontrol Et: engelle
Bazı yönlerden, ekran bloğu değeri satır içi değerin tersidir. Yükseklik ve genişlik ölçüleri ayarlanabilir ve bu değere sahip elemanlar yan yana oturamaz. Yukarıdaki örnek, blok değerine sahip iki öğeyi göstermektedir. Blok görüntüleme değerine sahip öğeler, üst öğelerinin maksimum genişliğinde varsayılandır.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.engellemek {
Ekran bloğu;
yazı tipi boyutu: 3rem;
genişlik: uygun içerik;
}
#Blok 1 {
arka plan rengi: sarı;
dolgu: 10px 10px 10px 10px;
}
#blok-2 {
arka plan rengi: açık yeşil;
dolgu: 10px 10px 10px 10px;
}
</style>
</head>
<gövde>
<h1>CSS Görüntüleme Bloğu</h1>
<div sınıfı="engellemek" kimlik="Blok 1">bu metin</div>
<div sınıfı="engellemek" kimlik="blok-2">blok özellik değeri ile.</div>
</body>
</html>Satır içi stil örneğinden farklı olarak, bu görüntüleme bloğu değeri örneği, metin satırlarını iki farklı satıra böler. Uygun içerik genişliği değeri, öğelerin genişliğini metnin uzunluğuyla eşleşecek şekilde ayarlar.
Yan Yana HTML Öğeleri CSS ekranlı: satır içi blok
CSS görüntüleme satır içi blok değeri, yalnızca belirli boyutlar ekleme yeteneği ile normal bir satır içi değer gibi çalışır. Bu, yerinde ana öğeler olmadan ızgara benzeri düzenler oluşturmayı mümkün kılar. Önceki örneğe geri dönersek, satır içi blok değerinin eklenmesi, öğelerin yan yana oturmasını sağlar.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.inline-blok {
ekran: satır içi blok;
yazı tipi boyutu: 3rem;
genişlik: uygun içerik;
}
#inline-block-1 {
arka plan rengi: sarı;
dolgu: 10px 10px 10px 10px;
}
#inline-block-2 {
arka plan rengi: açık yeşil;
dolgu: 10px 10px 10px 10px;
}
</style>
</head>
<gövde>
<h1>CSS Ekran Satır İçi Blok (genişlik seti)</h1>
<div sınıfı="satır içi blok" kimlik="satır içi blok-1">bu metin</div>
<div sınıfı="satır içi blok" kimlik="satır içi blok-2">satır içi blok özelliği ile
değer.</div>
</body>
</html>
Satır içi blok değeri, satır içi değerinden çok farklı görünmüyor. Bu değerle öğelerin boyutlarını ayarlayabileceğinizi, ancak belirli durumlarda çalışmayı kolaylaştırabileceğinizi belirtmek önemlidir.
En basit görüntüleme değeri “yok”tur. Bu değer, öğeyi ve tüm alt öğeleri, kenar boşlukları ve diğer boşluk özellikleriyle birlikte gizler. CSS görüntüleme yok değerine sahip öğeler, tarayıcı denetçilerinde hala görünür durumda.
CSS ekranı ile Esnek ve Duyarlı Öğeler Oluşturun: flex
Display flex, en yeni CSS düzen modlarından biridir. Display flex bir üst öğe üzerindeyken, içindeki tüm öğeler esnek CSS öğeleri haline gelir. Bu konfigürasyondaki ana öğe bir esnek kutudur.
Flexbox'lar, genişlik ve yükseklik gibi önceden tanımlanmış değişkenlerle duyarlı tasarımlar oluşturur. Buna değer HTML/CSS esnek kutuları hakkında bilgi edinme başlamadan önce.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.esnek {
ekran: esnek;
yazı tipi boyutu: 3rem;
}
#flex-1 {
arka plan rengi: sarı;
genişlik: %40;
yükseklik: 100 piksel;
}
#flex-2 {
arka plan rengi: açık yeşil;
genişlik: %25;
yükseklik: 100 piksel;
}
#flex-3 {
arka plan rengi: açık mavi;
genişlik: %35;
yükseklik: 100 piksel;
}
</style>
</head>
<gövde>
<h1>CSS Görüntü Esnekliği</h1>
<div sınıfı="esnek">
<div kimliği="esnek-1"></div>
<div kimliği="esnek-2"></div>
<div kimliği="esnek-3"></div>
</div>
</body>
</html>Flexbox'ları Yan Yana Konumlandırın Ekranlı: inline-flex
Satır içi esnek, normal bir esnek kutu gibi davranır ve öğenin diğer öğelerin yanına oturabilmesinin ek yararı vardır.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.inline-flex {
ekran: satır içi esnek;
yazı tipi boyutu: 3rem;
Genişlik: 49.8%;
}
#inline-flex-1 {
arka plan rengi: sarı;
genişlik: %40;
yükseklik: 100 piksel;
}
#inline-flex-2 {
arka plan rengi: açık yeşil;
genişlik: %25;
yükseklik: 100 piksel;
}
#inline-flex-3 {
arka plan rengi: açık mavi;
genişlik: %35;
yükseklik: 100 piksel;
}
</style>
</head>
<gövde>
<h1>CSS Görüntü Satır İçi-Esnek</h1>
<div sınıfı="satır içi esnek">
<div kimliği="satır içi esnek-1"></div>
<div kimliği="satır içi esnek-2"></div>
<div kimliği="satır içi esnek-3"></div>
</div>
<div sınıfı="satır içi esnek">
<div kimliği="satır içi esnek-1"></div>
<div kimliği="satır içi esnek-2"></div>
<div kimliği="satır içi esnek-3"></div>
</div>
</body>
</html>CSS ekranıyla Karmaşık Tablolar Oluşturun: tablo
Görüntü tablosu değeri, web sitesi tasarımının eski günlerini andırıyor. Çoğu web sitesi bugün düzenleri için tablolar kullanmasa da, verileri ve içeriği okunabilir bir biçimde göstermek için hala geçerlidir.
Tablo değerini bir HTML öğesine eklemek, onun bir tablo öğesi gibi davranmasını sağlar, ancak tablonuzun düzgün çalışması için ek değerlere ihtiyacınız vardır.
CSS ekranı: tablo hücresi
Tablo hücresi değerine sahip öğeler, ana tablo içinde ayrı hücreler olarak işlev görür. Ve tablo-sütun ve tablo-satır değerleri bu ayrı hücreleri birlikte gruplandırır.
CSS ekranı: tablo satırı
tablo satırı değeri tıpkı bir
CSS ekranı: tablo sütunu
Tablo-sütun değeri, tablo-satır değerine benzer şekilde çalışır, sadece tablonuzu bölmez. Bunun yerine, zaten var olan farklı sütunlara belirli CSS kuralları eklemek için bu değeri kullanabilirsiniz.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.masa {
ekran: tablo;
yazı tipi boyutu: 3rem;
}
.başlık {
ekran: tablo-başlık-grubu;
yazı tipi boyutu: 3rem;
}
#sütun-1 {
ekran: tablo-sütun-grubu;
arka plan rengi: sarı;
}
#sütun-2 {
ekran: tablo-sütun-grubu;
arka plan rengi: açık yeşil;
}
#sütun-3 {
ekran: tablo-sütun-grubu;
arka plan rengi: açık mavi;
}
#sıra-1 {
ekran: tablo satırı;
}
#sıra-2 {
ekran: tablo satırı;
}
#sıra-3 {
ekran: tablo satırı;
}
#hücre {
ekran: tablo hücresi;
dolgu: 10 piksel;
genişlik: %20;
}
</style>
</head>
<gövde>
<h1>CSS Görüntü Tablosu</h1>
<div sınıfı="masa">
<div kimliği="sütun-1"></div>
<div kimliği="sütun-2"></div>
<div kimliği="sütun-3"></div>
<div sınıfı="başlık">
<div kimliği="hücre">İsim</div>
<div kimliği="hücre">Yaş</div>
<div kimliği="hücre">Ülke</div>
</div>
<div kimliği="1. sıra">
<div kimliği="hücre">Jeff</div>
<div kimliği="hücre">21</div>
<div kimliği="hücre">Amerika Birleşik Devletleri</div>
</div>
<div kimliği="2. sıra">
<div kimliği="hücre">Dava açmak</div>
<div kimliği="hücre">34</div>
<div kimliği="hücre">ispanya</div>
</div>
<div kimliği="3. sıra">
<div kimliği="hücre">Boris</div>
<div kimliği="hücre">57</div>
<div kimliği="hücre">Singapur</div>
</div>
</div>
</body>
</html>CSS ile Yan Yana Tablolar Oluşturun: satır içi tablo
Daha önce incelediğimiz diğer satır içi varyantlar gibi, satır içi tablo, tablo öğelerini diğer öğelerin yanına yerleştirmeyi mümkün kılar.
CSS ile Duyarlı Web Sitesi Düzenleri Oluşturun: grid
CSS görüntüleme kılavuz değeri, tablo değerine benzer, yalnızca bir kılavuzun sütunları ve satırları esnek boyutlandırmaya sahip olabilir. Bu, ızgaraları web sayfaları için ana düzeni oluşturmak için ideal hale getirir. Tam genişlikte üstbilgiler ve altbilgiler için alan bırakırken, farklı boyutlarda içerik alanlarına sahip olmayı da mümkün kılar.
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık>CSS Görüntü Değerleri</title>
<stil>
.Kafes {
ekran: ızgara;
yazı tipi boyutu: 3rem;
ızgara şablonu alanları:
'başlık başlığı başlık başlığı'
'sol kenar çubuğu içerik içeriği sağ kenar çubuğu'
'altbilgi altbilgi altbilgi';
boşluk: 10 piksel;
}
#grid-1 {
ızgara alanı: başlık;
arka plan rengi: sarı;
yükseklik: 100 piksel;
dolgu: 20 piksel;
metin hizalama: merkez;
}
#ızgara-2 {
ızgara alanı: sol kenar çubuğu;
arka plan rengi: açık yeşil;
yükseklik: 200 piksel;
dolgu: 20 piksel;
metin hizalama: merkez;
}
#grid-3 {
ızgara alanı: içerik;
arka plan rengi: açık mavi;
yükseklik: 200 piksel;
dolgu: 20 piksel;
metin hizalama: merkez;
}
#grid-4 {
ızgara alanı: sağ kenar çubuğu;
arka plan rengi: açık yeşil;
yükseklik: 200 piksel;
dolgu: 20 piksel;
metin hizalama: merkez;
}
#ızgara-5 {
ızgara alanı: altbilgi;
arka plan rengi: sarı;
yükseklik: 100 piksel;
dolgu: 20 piksel;
metin hizalama: merkez;
}
</style>
</head>
<gövde>
<h1>CSS Görüntü Izgarası</h1>
<div sınıfı="Kafes">
<div kimliği="ızgara-1">başlık</div>
<div kimliği="ızgara-2">Sol Kenar Çubuğu</div>
<div kimliği="ızgara-3">İçerik</div>
<div kimliği="ızgara-4">Sağ Kenar Çubuğu</div>
<div kimliği="ızgara-5">altbilgi</div>
</div>
</body>
</html>
Izgaralar esnek kutulara benzer, yalnızca öğeleri birbirinin altına ve yanına yerleştirebilirler. Bunun için grid-template-areas özelliği çok önemlidir. Koddan da görebileceğiniz gibi, üstbilgimiz ve altbilgimiz tam genişlikte oldukları için dizide dört boşluk kaplıyor. Kenar çubukları her biri bir yuva kaplarken, içerik iki yer kaplar ve ızgaranın orta sırasını etkili bir şekilde üç sütuna böler.
CSS ekranı: satır içi ızgara
Satır içi ızgara değerini kullanmak, kılavuzunuzun bu kılavuzdaki diğer satır içi değerler gibi diğer öğelerin yanına oturmasını sağlar.
Web Tasarımı için CSS Ekranını Kullanma
CSS görüntüleme özelliği, HTML işaretlemesini değiştirmek zorunda kalmadan web sitesi öğesi yapılarını ayarlamak için kullanışlı bir yol sunar. Bu, Shopify veya WordPress gibi içerik dağıtım platformlarını kullananlar için idealdir, ancak genel web tasarımı için de kullanışlı olabilir.
