Home-theater-designers
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.
GÜNÜN YAPILAN VİDEOSU
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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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.
CSS ekranıyla Web Sitesi Düzenlerini 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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.
Web Sitesi Öğelerini CSS ile Gizle: yok
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.
ücretsiz film izlemek için en iyi site
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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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.