CSS görüntüleme özelliği, web tasarımcıları için güçlü bir araçtır. Hatırlanması kolay basit değerlerle minimum stille web sitesi öğe düzenlerini kontrol etmenizi sağlar.

Web Sitesi Düzenlerini Kontrol Etmek İçin CSS Ekranını Kullanma

Ancak bu değerlerin her biri ne yapar 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. Stil sayfası veya WordPress gibi CMS araçlarındaki uygun CSS özelleştirme bölümleri aracılığıyla bu değerleri web sitenizde düzenleyebilirsiniz .

Öğ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 öğe için geçerli değildir; içindeki içerik boyutlarını belirler. Satır içi HTML öğeleri, <span> gibi davranarak diğer öğelerle yan yana oturabilir . 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>

Bu HTML işaretlemesi ve yukarıdaki CSS, satır içi görüntüleme değerinin 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 ekranıyla kontrol edin: blok

Bazı yönlerden, görüntüleme bloğu değeri satır içi değerin tersidir. Yükseklik ve genişlik ölçüleri ayarlanabilir ve bu değere sahip öğeler yan yana oturamaz. Yukarıdaki örnek, blok değerine sahip iki öğeyi göstermektedir. Blok görüntüleme değerine sahip öğeler, varsayılan olarak üst öğelerinin maksimum genişliğindedir.

<!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ğinin aksine, bu görüntüleme bloğu değeri örneği, metin satırlarını iki farklı satıra ayırır. Fit-content genişliği değeri, öğelerin genişliğini metnin uzunluğuyla eşleşecek şekilde ayarlar.

CSS ekranlı Yan Yana HTML Öğeleri: satır içi blok

CSS görüntüleme satır içi blok değeri, yalnızca belirli boyutlar ekleme özelliğiyle normal bir satır içi değer gibi çalışır. Bu, üst öğeler yerinde olmadan ızgara benzeri düzenler oluşturmayı mümkün kılar. Önceki örneğe dönersek, satır içi blok değeri eklemek, öğ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ğerden çok farklı görünmüyor. Öğelerin boyutlarını bu değerle ayarlayabileceğinizi unutmamak önemlidir, ancak bu, belirli durumlarda çalışmayı kolaylaştırır.

Web Sitesi Öğelerini CSS ile Gizle ekranı: yok

En basit görünen değer “none”dur. Bu değer, kenar boşlukları ve diğer boşluk özellikleriyle birlikte öğeyi ve tüm alt öğeleri gizler. CSS display none değerine sahip öğeler, tarayıcı denetçilerinde hala görünür durumdadır.

CSS display: flex ile Esnek ve Duyarlı Öğeler Oluşturun

Display flex, en yeni CSS düzen modlarından biridir. Display flex bir üst öğe üzerinde olduğunda, içindeki tüm öğeler esnek CSS öğeleri haline gelir. Bu yapılandırmadaki ana öğe bir esnek kutudur.

Flexbox’lar, genişlik ve yükseklik gibi önceden tanımlanmış değişkenlerle duyarlı tasarımlar oluşturur. Başlamadan önce HTML/CSS esnek kutuları hakkında bilgi edinmeye değer .

<!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ırma Ekranlı: satır içi esnek

Inline-flex, normal bir esnek kutu gibi davranır ve öğenin diğer öğelerin yanına oturabilmesinin sağladığı ek fayda ile birlikte.

<!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>

Görüntü tablosu değeri, web sitesi tasarımının eski günlerini anımsatıyor. Günümüzde çoğu web sitesi 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.

Tablo hücresi değerine sahip öğeler, ana tablo içinde ayrı hücreler olarak işlev görür. Ve tablo sütunu ve tablo satırı değerleri, bu tek tek hücreleri birlikte gruplandırır.

Tablo satırı değeri tıpkı bir <tr> HTML öğesi gibi çalışır. Tablo hücresi değerine sahip öğelerin ebeveyni olarak, tablonuzu yatay satırlara böler.

Tablo sütunu değeri, tablo satırı değerine benzer şekilde çalışır, yalnızca 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>

Daha önce incelediğimiz diğer satır içi değişkenler gibi, satır içi tablo da tablo öğelerini diğer öğelerin yanına yerleştirmeyi mümkün kılar.

CSS görüntüleme ızgarası değeri, tablo değerine benzer, yalnızca bir ızgaranın sütunları ve satırları esnek boyutlandırmaya sahip olabilir. Bu, ızgaraları web sayfalarının ana düzenini oluşturmak için ideal hale getirir. Tam genişlikte üstbilgiler ve altbilgiler için alan bırakırken aynı zamanda farklı boyutlarda içerik alanlarına sahip olmayı 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. grid-template-ares özelliği bunun için ç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ının 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, ızgaranızın bu kılavuzdaki diğer satır içi değerler gibi diğer öğelerin yanında olması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 öğe 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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir