Css Div Yapisi

Yazar: BirKod Tarih: 26.07.2015

Bu konuda sizlere temel olarak Div Nedir? kısmını açıklamayı, divlerin sayfamızdaki görevlerini, div çetilerini ve daha sonrasında da divlere atanabilecek özellikleri anlatmaya çalışacağız. Lafı fazla uzatmadan gelin başlayalım.

Div Nedir?

Div'ler sayfamızda belirlemiş olduğumuz bir etikete css dökümanımızdan kolaylıkla ulaşıp ona ait özellikler atamamıza yardımcı olurlar. Bazılarınız Ee biz bunu klasik olarak bir etiket açıp (b gibi) ona da atayabilirdik, buna ne gerek var ki? diyor ise şöyle kısaca bir açıklayalım;

Bir sayfa oluşturduk ve sayfamızda b etiketi içerisine Birkod'a Hoşgeldiniz! gibi bir yazı yazdık. Sonra hemen altına bu kez i etiketi içerisine Hoşbulduk yazdık (Kendi kendimize konuşuyormuş gibi).. Ardından sayfamıza baktığımızda kalın bir şekilde belirttiğimiz Birkod'a Hoşgeldiniz! ve italik olarak yazdığımız Hoşbulduk yazılarını görürsünüz. Şimdi bu yazılardan sonra tekrar bir b etiketi açıyoruz ve bu kez de Buraya kalın bir yazı gelecektir. yazıyoruz. Kodlarımız aşağıdaki gibi oluşmuş oldu.

<!DOCTYPE html>
<html>
<head>
	<title>BirKod | Css Div Yapısı</title>
	<link href="stil.css" rel="stylesheet" />
</head>
<body>
	<b>Birkod'a Hoşgeldiniz!</b>
	<i>Hoşbulduk</i>
	<b>Buraya kalın bir yazı gelecektir.</b>
</body>
</html>

Kodlarımızı gördünüz.. Şimdi bu kodları sayfamızda açıyoruz ve tamda istediğimiz gibi oluştu. Buraya kadar olan kısmı zaten genel olarak biliyoruz. Peki ya bu divler işin neresinde?

Örneğimizi oluşturduk ve görüntüledik. Div eklenmemiş olarak hepsini gördük. Şimdi isteğimiz şu;

Sayfamızda 2 adet b etiketi bulunmakta. Fakat ben 2. olan b etiketinin kırmızı, ilk b etiketinin kırmızı olmamasını istiyorum. Eğer biz b {color: red} dersek tüm b etiketleri kırmızı olur. Bu işin içinden nasıl çıkacağız şimdi? İşte burada yardımımıza koşan elemanlarımız ışıklar içinde sahneye gelen DIV'ler!

Div Çeşitleri

1. Class (. - Nokta)

2. Id (# - Diyez)

ID ve Class Arasındaki Fark

Öncelikle id ve class işlevsel olarak aynı işlemi görmektedirler lakin XHTML'in genel kuralları çerçevesinde ID etiketleri sayfada genel işlevlere atanmışlardır. Örnek vermek gerekirse sitemizin yan menüsünü bir id divi içerisine alırken menümüzün elemanlarını düzenlerken birçok class kullanabiliriz. Gelin aşağıdaki örneğimize bakalım..

<!DOCTYPE html>
<html>
<head>
	<title>BirKod | ID ve Class Arasındaki Fark</title>
</head>
<body>
	<div id="idAdı">
		<div class="classAdı1">Kategoriler</div>
		<div class="classAdı2">Reklam Alanı</div>
		<div class="classAdı3">Son Yorumlar</div>
	</div>
</body>
</html>

Genel mantığı örneğimizde anladığınızı varsayıyoruz. Fakat biz bu işlemi ilk örneğimize göre anlatmaya devam edelim. Stil.css dosyamızı ve index.html dosyamızı aşağıdaki kodlar gibi düzenleyelim;

index.html

<!DOCTYPE html>
<html>
<head>
	<title>BirKod | Css Div Yapısı</title>
	<link href="stil.css" rel="stylesheet" />
</head>
<body>
	<b>Birkod'a Hoşgeldiniz!</b>
	<i>Hoşbulduk</i>
	<b class="burasiKirmizi">Buraya kalın bir yazı gelecektir.</b>
</body>
</html>

stil.css

.burasiKirmizi {
	color: #ff0000
}

Kodlarda da anlaşıldığı üzere klasik div kullanımımızın dışında bir etiketin içerisine de class veya id etiketlerini örneğimizdeki gibi yerleştirebiliyoruz.

NOT: Bu konu bir site oluştururken en çok kullanılan yapıları içermektedir. Lütfen anlamadığınız yerleri yorum alanından veya e-mail ile sormaktan çekinmeyin. Kolay gelsin.