1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (3 Oy, Ortalama: 3.67)
Loading ... Loading ...

Display özelliği listelerimizi, menülerimizi ve başlıklarımızın dizilişini yani sıralışını belirler.

Display özelliğinin 3 değerini inceleyeceğiz [inline, block, none]

inline : Kullandığımız nesneleri yanyana sıralar.

block : Kullandığımız nesneleri alt alta sıralar.

none : Kullandığımız nesneleri göstermez. Genellikle JavaScript methodlarında kullanılır.

Örnek Kullanım (inline):

CSS:

a { display: inline;}

HTML:

<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>

Tüm Kod:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>SEKOPEKO - CSS Dersleri - Display - Inline</title>

<style type=”text/css”>
a { display:inline; }
</style>

</head>
<body>

<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>

</body>
</html>

Açıklama: Linklerin yanyana dizildiğini göreceksiniz. Önizlemesine Burdan bakabilirsiniz.

Örnek Kullanım (block):

CSS:

a { display: block;}

HTML:

<a href=”#”>SEKOPEKO CSS Dersleri - Display - Block</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Block</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Block</a>

Tüm Kod:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>SEKOPEKO - CSS Dersleri - Display - Block</title>

<style type=”text/css”>
a { display:block; }
</style>

</head>
<body>

<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - Inline</a>

</body>
</html>

Açıklama: Linklerin altalta dizildiğini göreceksiniz. Önizlemesine Burdan bakabilirsiniz.

Örnek Kullanım (none):

CSS:

a { display: none;}

HTML:

<a href=”#”>SEKOPEKO CSS Dersleri - Display - None</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - None</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - None</a>

Tüm Kod:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>SEKOPEKO - CSS Dersleri - Display - None</title>

<style type=”text/css”>
a { display:none; }
</style>

</head>
<body>

<a href=”#”>SEKOPEKO CSS Dersleri - Display - None</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - None</a>
<a href=”#”>SEKOPEKO CSS Dersleri - Display - None</a>

</body>
</html>

Açıklama: Linklerin yok olduğunu göreceksiniz. Önizlemesine Burdan bakabilirsiniz.

Toplam Okunma: 1287, Bugün: 0