display
Bu özellikle elemanların blok eleman ya da satır içi eleman gibi görüntülenmeleri sağlanır. inline değeri kullanılırsa eleman satır içi eleman gibi, block değeri kullanılırsa eleman blok eleman gibi görüntülenir. inline-block değeri kullanıldığında elemanın kendisi diğer elemanlara göre satır içi eleman gibi görüntülenir fakat elemanın içeriği blok gibi davranır. Örneğin bu değerle biçimlendirilen elemanlar satır içi eleman gibi davranmasına rağmen genişlik ve yüksekliğe sahip olabilir.
flex değeri ile blok seviyesinde bir esnek eleman kutusu elde edilirken, inline-flex değeri ile satır içi seviyesinde bir esnek eleman kutusu elde edilir. Esnek elemanlar ileriki konularda daha detaylı incelenecektir.
inline-table değeri kullanılırsa eleman satır içi tablo olarak görüntülenir. table-caption değeri <caption> elemanı gibi, table-column-group değeri <colgroup> elemanı gibi, table-row-group değeri <tbody> elemanı gibi, table-header-group değeri <thead> elemanı gibi, table-footer-group değeri <tfoot> elemanı gibi, table-column değeri <col> elemanı gibi, table-row değeri <tr> elemanı gibi ve table-cell değeri <td> elemanı gibi görüntüleme yapmaya yarar. list-item değeri ile de liste elemanı gibi görüntüleme yapılabilir.
run-in değeri ile farklı durumlarda farklı görüntülenmeyle sonuçlanacak biçimlendirmeler yapılabilir. Eğer bu değerle biçimlendirilen eleman blok elemanı içeriyorsa bu eleman da blok gibi görüntülenir. run-in değeri ile biçimlendirilen eleman bir blok elemanından önce geliyorsa, eleman bu blok elemanının ilk satır içi elemanıymış gibi görüntülenir. Bu değerle biçimlendirilen elemandan sonra bir satır içi eleman geliyorsa eleman blok gibi gösterilir.
none değeri kullanılacak olursa eleman gösterilmez, sayfa akışında da herhangi bir yer kaplamaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Görüntüleme</title>
<meta charset="UTF-8">
<style>
span.ornek{
display: block;
}
</style>
</head>
<body>
<span>Span Elemanı 1</span>
<span>Span Elemanı 2</span>
<span class="ornek">Span Elemanı 3</span>
</body>
</html>
Normalde <span> elemanı satır içi eleman olduğu için ardı ardına gelen <span> elemanları yan yana görüntülenir. Fakat en alttaki <span> elemanı blok olarak görüntülenecek şekilde biçimlendirilmiştir. Bu nedenle o eleman diğerlerinin yanında değil yeni bir satırda görüntülenir.
Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
visibility
Bu özellikle elemanın görünür olup olmaması ayarlanabilir. Varsayılan değer olan visible kullanıldığında eleman görünür olur. hidden değeri kullanıldığında eleman görünmez fakat sayfa akışında yer kaplamaya devam eder. Sadece tablo elemanlarında kullanılabilen collapse değeri kullanıldığında ise eleman görüntülenmez ve tablonun akışında yer de kaplamaz. Dahası tablonun toplam büyüklüğü de değişmez. Bu değer tablo elemanları dışında bir elemanda kullanılacak olursa hidden değerine eşdeğerdir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Görüntüleme</title>
<meta charset="UTF-8">
<style>
p.visible{
visibility: visible;
}
p.hidden{
visibility: hidden;
}
tr.collapse{
visibility: collapse;
}
</style>
</head>
<body>
<p class="visible">Örnek Paragraf 1</p>
<p class="hidden">Örnek Paragraf 2</p>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHJ</td>
</tr>
<tr class="collapse"> <td>ABC</td>
<td>DEF</td>
<td>GHJ</td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHJ</td>
</tr>
</table>
</body>
</html>
opacity
Bu özellik ile bir elemanın opaklığı ayarlanır. Değer olarak 0.0 ile 1.0 arasında bir sayı girilmelidir. 1.0 elemanın tamamen opak, 0.0 da elemanın tamamen şeffaf olacağını belirtir. Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Görüntüleme</title>
<meta charset="UTF-8">
<style>
p.ornek1{
opacity: 0.1;
}
p.ornek2{
opacity: 0.4;
}
p.ornek3{
opacity: 0.7;
}
p.ornek4{
opacity: 1.0;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p>
<p class="ornek2">Örnek Paragraf 2</p>
<p class="ornek3">Örnek Paragraf 3</p>
<p class="ornek4">Örnek Paragraf 4</p>
</body>
</html>
Yaslama <<<<< CSS3 >>>>> Sayaçlar ve content