Stil Sayfaları (CSS) 8 - Görünüm Ayarları

4.2.6. Görünüm Ayarları

Web sayfasını oluşturan elemanlar sayfaya yerleşimlerine göre ikiye ayrılır.

Satır İçi Seviyesi Elemanlar: Satıra yan yana eklenir. Aynı satırda önünde veya sonunda eleman bulunabilir. Genişlik, yükseklik, metin hizalama vb. kodlar, satır içi seviyedeki bir nesne için kullanılamaz.

Blok Seviyesi Elemanlar: Sayfaya alt alta eklenir, aynı satırda yanında başka bir eleman bulunmaz. Genişlik, yükseklik, metin hizalama vb. kodlar blok seviyedeki bir nesne için kullanılabilir.

Örneğin; <b>, <i>, <u>, <span>, <img> gibi elemanlar, varsayılan olarak seviyesi satır içi seviyedeyken <h1>, <p>, <div>, <li> gibi elemanlar, varsayılan olarak blok seviyesindedir. Elemanların sayfaya yerleşim seviyeleri ve daha birçok görünüm özellikleri display kodu ile değiştirilebilir.

Display: Genel olarak elemanların yerleşim seviyesini, sayfada görünüp görünmeyeceğini belirlemek için kullanılan stil kodudur (Tablo 4.11).

Tablo 4.11: Görünüm Ayarları

CSS Kodu ve Kullanımı	Açıklama
display:none	Elemanın sayfada görünmez olmasını sağlar. Eleman sayfada herhangi bir yer kaplamaz.
display:inline	Elemanın satır içi seviyesinde davranmasını sağlar.
display:block	Elemanın blok seviyesinde davranmasını sağlar.
display:inline-block	Elemanın hem satır içi hem de blok seviyesinde davranmasını sağlar. Karma bir yerleşim seviyesidir. Elemanlar satır seviye­sindeki gibi yan yana yerleşir. Blok seviyesindeki gibi genişlik, yükseklik, metin hizalama vb. kodlar kullanılabilir.

Uygulama

HTML elemanlarının görünüm ayarlarını değiştirme işlemini Görsel 4.19’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.

Görsel 4.19: Görünüm seviyeleri

1. Adım: Web sayfasına iki adet <div> elemanı ekleyiniz.

2. Adım: Sayfanın arka plan rengini mor yapınız.

3. Adım: <div> elemanlarının stil özellikleri; arka plan rengi turuncu, genişlik 100 piksel, yükseklik 100 piksel olarak ayarlayınız ve sayfayı görüntüleyiniz.

4. Adım: <div> elemanının stil kodlarına display:inline kodunu ekleyiniz ve tekrar sayfayı çalıştırınız.

HTML	CSS
<div>kutu1</div> <div>kutu2</div>	div{ background-color:orange; width: 100px; height: 100px; display: inline; }

Not: 128. sayfada yer alan örnek kodda <div> elemanların display özelliği inline olarak değiştirildiği için Görsel 4.19’da görüldüğü gibi genişlik ve yükseklik özellikleri geçersiz kalır.

Float: Bir elemanın, sayfanın normal akışı dışında sola veya sağa kaydırılarak konumlandırılması için kullanılan stil komutudur. Sayfanın normal yerleşim akışı değişir fakat diğer elemanlar sola veya sağa kaydırılmış nesnenin etrafını sardıktan sonra sayfa, normal yerleşim akışına devam eder. Float kullanım şekilleri Tablo 4.12’de görüldüğü gibidir.

Tablo 4.12: Float Kullanım Şekilleri

CSS Kodu ve Kullanımı	Açıklama
float:left	Elemanı sayfa akışını bozarak sola kaydırır.
float:right	Elemanı sayfa akışını bozarak sağa kaydırır.
float:none	Varsayılan olarak her elemanın float elemanın float özelliği değeri “none”’dır. Herhangi bir sağa, sola kaydırma işlemi yapılmayacağını belirtir.

Clear: Float özelliği kullanılmış bir nesneden sonra clear özelliği kullanılmış bir nesne ekleyerek sayfanın normal yerleşim akışına devam etmesi sağlanır. Clear kullanım şekilleri Tablo 4.13’te görüldüğü gibidir.

Tablo 4.13: Clear Kullanım Şekilleri

CSS Kodu ve Kullanımı	Açıklama
clear:left	float:left komutunun etkisini kaldırır.
clear:right	float:right komutunun etkisini kaldırır.
clear:both	Hem float:left hem de float:right komutunun etkilerini kaldırır.

Uygulama

<div> elemanlarının float ve clear özelliklerini kullanarak basit bir sayfa tasarımını Görsel 4.20’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.

Görsel 4.20: Sayfa tasarımı

1. Adım: index.html sayfasına kimlik (ID) özellikleri; banner, left, center, right, footer olan beş tane <div> elemanı ekleyiniz ve <div> elemanlarının hangi bölüme ait olduğu bilgisini yazınız ve tüm elemanların yazılarını ortalı yapınız.

<div id="Banner">Üst Bölüm(Menüler vs.)</div>
<div id="Left">Sol İçerik Bölümü</div>
<div id="Center">Orta İçerik Bölümü</div>
<div id="Right">Sağ İçerik Bölümü</div>
<div id="Footer">Alt Bölüm</div>

2. Adım: Banner id’li elemanın genişliğini %100, yüksekliğini 40 pixel, arka plan rengini tomato yapınız.

3. Adım: Left ve Right id’li elemanın genişliğini %25, yüksekliğini %80, arka plan rengini lightseagreen, float özelliğini left yapınız.

4. Adım: Center id’li elemanın genişliğini %50, yüksekliğini %80, float özelliğini left yapınız.

5. Adım: Footer id’li elemanın genişliğini %100, yüksekliğini 40 pixel, arka plan renginiseagreen, clear özelliğini both yapınız.

body{ text-align: center; }
#banner{ background-color: tomato; width: 100%; height: 40px; }
#left{ background-color: lightseagreen; width: 25%; height: 80%; float:left; }
#center{ width: 50%; height: 80%; float: left; }
#right{ background-color: lightseagreen; width: 25%; height: 80%; float: left; }
#footer{ background-color: darkgray; width: 100%; height: 40px; clear: both; }

Uygulama

Bir mesajlaşma uygulaması için gelen mesaj kutusu tasarımını Görsel 4.21’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.

Görsel 4.21: Gelen mesaj kutusu

1. Adım: index.html, mesajlar1.html, mesajlar2.html, mesajlar3.html, mesajlar4.html, stil.css isimli dosyalar oluşturunuz.

2. Adım: index.html sayfasına stil.css dosyasını bağlayınız.

3. Adım: Kişilerin resimleri için “resimler” isimli bir klasör oluşturunuz ve içine dört adet resim ekleyiniz.

4. Adım: stil.css dosyasına aşağıdaki kodları ekleyiniz.

CSS

body{ background-color:lightyellow;} a{text-decoration: none;} .mesajKutusu{ clear: both;margin-top: 10px;background-color:lightsteelblue; width: 250px; height: 60px; border-radius: 15px; } .mesajKutusu:hover{background-color:lavender; cursor:hand; } .mesajKutusu img{ width: 50px; height: 50px; border-radius: 35px; float: left; margin:5px;} span{font-size: 18px; margin-left: 20px; margin-top:20px; } .adSoyad{padding-top:10px;color:black} .tarih{padding-top:5px; font-size:10px; color:dimgray }

5. Adım: index.html sayfasının <body> elemanı içine aşağıdaki kodları ekleyiniz ve eksik olan kodları tamamlayınız.

HTML

<div class="mesajKutusu"> <a href="mesajlar1.html"> <img src="resimler/kisi1.jpg"> <div class="adSoyad"> Harun(Mühendis)</div> <div class="tarih"> bugün 22:00</div> </a> </div> <!-- Diğer 3 kişi için mesaj kutusu kodları -->

Z-index: Sayfaya eklenen elemanlar konumlandırma, yerleşim ayarları ile üst üste gelebilirler. Bu gibi durumlarda hangi elemanın üst katmanda hangi elemanın alt katmanda gösterileceğini ayarlamak için z-index komutu kullanılır. En az iki elemanın üst üste geldiği durumlarda geçerlidir. Z-index değeri varsayılan olarak tüm elemanlarda “0”dır. Z-index değeri en büyük olan en üste görünür.

#resim1{ z-index:-1; }

Yukarıdaki örnek koda göre resim1 id’li eleman, üst üste geldiği elemanlardan daha altta görülecektir.

#resim1{ z-index:1; }

Yukarıdaki örnek koda göre resim1 id’li eleman, üst üste geldiği elemanlardan daha üstte görülecektir.

#arkaPlan{ z-index:1; }
#resim{ z-index:2; }
#yazi{ z-index:3; }

Yukarıdaki örnek koda göre arkaPlan id’li eleman, resim id’li elemandan daha altta kalır; resim id’li eleman da yazi id’li elemandan daha altta kalır.