Basit CSS Komutları {2}

Basit CSS Komutları {2}

Bir önceki yazımızda CSS’ye yeni başlayacak olan arkadaşlarımız için başlangıç makalesi hazırlamıştık ve bunun devamı geleceğini söylemiştik. Ben de arayı fazla soğutmadan ikinci makalemi hazırlamak istedim. Diğer yazımızda body, background, renk, yazı tipi v.b başlangıç komutlarını anlatmıştık. Bu yazımızda ise padding, margin gibi değerlerden bahsedeceğiz. İlk olarak bir önceki yazımızda yaptığımız sayfayı inceleyerek, o sayfanın kodlamasını devam ettirmek istiyorum.

Bu seride, başlığı olan yorum paneline benzer formları olan bir sayfayı (yani wordpress’in yazı sayfası gibi) CSS’de kodlayacağız. Bu makalede ise yavaş yavaş ilerleyerek sadece yazı bölümünü ve ortalama gibi şeyleri anlatacağım.

Bir Önceki Çalışmamız ve HTML’e Uyarlanmış Hali:

<style type=”text/css”>
body {
background: #fff (resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}

.sayfa {
width:600px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}
</style>

</head>

<body>
<div>
Basit CSS Komutları {1}

Merhaba arkadaşlar. Bu yazımda daha önceden CSS’ye sıfırdan başlayacak olan arkadaşlara yardımı olacak bir konuya değinmek istedim. CSS’de bildiğimiz, bilmediğimiz bir sürü komut var. Bazen sitede CSS nedeniyle herhangi bir kayma oluyor. Bilmediğimiz ama daha önceden kaymayı düzelten bir kodu hatırlayıp ekliyoruz. Kayma düzeliyor. Fakat aklımıza şu soru takılıyor: “Bu komut ne işe yarıyordu da kaymayı düzeltti?”. Bu yazı serisinde CSS komutlarını iyice açıklayacağım.
Bu yazımızda basit bir sayfa hazırlamaya başlarken kullandığımız komutlardan bahsedelim.
</div>
</body>

Önizlemesi:

Gördüğünüz üzere sağdan ve üstteki boşluklar olmadığından çok göz yoruyor ve düzensiz görünüyor. Ayrıca arka plandaki renk yazıyı kapalı gösterdiğinden sıkıcı bir hal almış. Sayfanın yüksekliği fazla gelmiş. Yazı altından çok boşluk var. İtalik özelliğinin kullanılması gereksiz. İtalik dikkat çekmek istenen yerlerde, alıntılarda veya yazı başlıklarında kullanılmalı bence. Tüm yazıyı italik yaparsak bu biraz tuhaf kaçar. Bir de anlatımda kullandığımız “lowercase” komutu tüm yazıyı küçük harfe dönüştürdü. Eğer resmi bir blogunuz varsa bu yöntem cümle düzenini bozar ve pek beğenilmez. Bu nedenle bu kodda bayağı bir değişikliğe gideceğiz :D

body {
background: #fff (resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}

.sayfa {
width:600px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}

Yukarıdaki kodu aşağıdaki şekilde değişikliğe uğratıyoruz. Bir de arka plan ekliyoruz ki, ona göre ayarlayıp ortalayalım.

body {
background: #fff url(resim/arkaplan.png) no-repeat scroll 50% 0;
font: 15px Palatino Linotype;
color: #333;
}

.sayfa {
width:600px;
border: 1px solid #666;
background:#f1f1f1;
padding:5px;
}

Resmi çağırdıktan sonra scroll 50% 0; değeri verdik. Bu değer “arka plan resmim büyük, ekrana göre yüzde elli küçültülsün” anlamına gelir.

Şimdi bir önizleme alalım.

Gördüğümüz gibi üst tarafta kalmış ve tam ortalı değil. Şimdi bu .sayfa etiketini biraz daha düzenleyelim.

.sayfa {
width:600px;
border: 1px solid #666;
background:#f1f1f1;
padding:5px;
}

.sayfa {
width:900px;
border: 1px solid #ddd;
background:#f9f9f9;
padding:10px;
margin:115px auto 0 auto;
line-height:23px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
webkit-box-shadow: 0px 1px 2px #ddd;
-moz-box-shadow: 0px 1px 2px #ddd;
box-shadow: 0px 1px 2px #ddd;
}

Önizleme Yapalım:

Şimdi yukarıdaki kodları açıklayalım.

Genişliği değiştirdik çünkü yazı bölümünün sayfaya tam ortalı olması gerekiyordu.

padding:10px;

padding komutu, CSS’de bir çerçeveye, resme ya da yazıya içten boşluk verir. Eğer padding komutunu kullanmamış olsaydık. İlk resimdeki gibi, üstten ve soldan çerçeveye (border’a) çok bitişik olacaktı. Bu nedenle padding:10px kullandık. Siz istediğiniz değeri verebilirsiniz.

Not: padding: 10px değeri, padding: 10px 10px 10px 10px; değerinin kısaltılmış halidir. Bunu aşağıda anlatacağım.

margin:115px auto 0 auto;

margin komutu ise bir çerçevenin pozisyonunu belirlemekte çok işimize yarar. Çünkü çerçeveye veya yazıya dıştan boşluk vermektedir. padding komutunda çerçevenin içindeki kenar boşluğunu belirlemiştik. margin ise, çerçevenin sayfaya göre yerini belirliyoruz yani çerçeve dışından boşluk vermiş oluyoruz.

peki neden margin:115px auto 0 auto; şeklinde kullandık? 115px neresi, auto neresi, 0 neresi? (yani hangi yön) Bu tip kalıplar padding ve marginde kullanılır. Yani boşluklar;

margin: üst sağ alt sol;

şeklinde verilir. Bunu aklınızda tutmak için kodlama yaparken gözlerinizle saat yönünde bir daire çizebilirsiniz, işe yarıyor :)

Eğer tüm boşluklarınız aynı olacaksa, yani üstten, alttan veya yanlardan 10px boşluk vermek istiyorsanız margin: 10px; değeri işinizi görecektir. Eğer her yönde aynı boşluk verilecekse on saat onları tek tek yazmaya gerek kalmaz :)

Ayrıca CSS’de auto değeri otomatik anlamına gelir. Yani biz yukarıdaki kodda, “sayın CSS, sağdan ve soldan otomatik boşluk verip çerçevemi ortalar mısın lütfen?” dediğimiz için, resimde görüldüğü gibi çerçevemiz ortalandı :) Üstten de 115px boşluk verdik. Çünkü çerçeveciği arka plandaki beyaz alana getirtmek için buna ihtiyaç vardı. Ama yazı başlığını ekleyeceğimiz zaman o boşluğu tekrar düzenlememiz gerekecek :)

line-height:23px;

line height satır yüksekliği anlamına gelir. Yazının alttaki satırla çok bitişik görünmemesini sağlar. Bu nedenle temiz bir tasarım için gereken güzel bir komuttur :) Bu değerin piksel cinsinden yazılışı her yazı tipine göre değişir. Yani Verdana adlı yazı tipinde 23px aralık az gelirse 25px kullanmak gerekebilir :)

Aşağıdaki kodlar CSS3 sürümünün kodları olduğundan ve başındaki çizgiler nedeniyle henüz aklımda tutmayı başaramadığım kodlardır :D Yapamadığım bir şey için öneri vermek yanlış olur. Bu nedenle siz bu kodları yazarken benim gibi şuradaki siteden yardım alabilirsiniz. Yine de bildiğim kadarıyla kodları biraz açıklayayım.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

border-radius komutu bir alanın kenarlarını ovalleştirmeye yarar. -webkit şeklinde başlayan tüm tarayıcılar için -moz ile başlayan mozilla için, border-radius ise opera tarayıcısı için geçerlidir.

Eğer siz “Ben sol üst ve sağ altın oval olmasını istiyorum. Diğerleri sivri kalsın. Bu nasıl olacak?” derseniz aşağıdaki makale gibi kodu kullanmanız gerekir. Ne kadar da çok :S

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0px;

Yukarıdaki kodları türkçe olarak anlamak için:

top: üst – right: sağ – bottom: alt  – left: sol

bunları bilmeniz yeterli.

webkit-box-shadow: 0px 1px 2px #ddd;
-moz-box-shadow: 0px 1px 2px #ddd;
box-shadow: 0px 1px 2px #ddd;

box-shadow ise bir alanın gölgesini oluşturmaya yarar. Bu gölgeler aşağıdaki forma göre verilir.

webkit-box-shadow:  yatay-gölge dikey-gölge bulanıklık #renk;
-moz-box-shadow: yatay-gölge dikey-gölge bulanıklık #renk;
box-shadow:  yatay-gölge dikey-gölge bulanıklık #renk;

Eğer gölgeyi içe doğru vermek isterseniz bu değerlerin en başına inset adlı değeri eklemeniz gerekir. Yani:

webkit-box-shadow: inset 0px 1px 2px #ddd;
-moz-box-shadow: inset 0px 1px 2px #ddd;
box-shadow: inset 0px 1px 2px #ddd;

Bayağı uzun bir yazı oldu :) Eğer tasarımımız bittiğinde görünüş olarak beğenilirse WordPress’e göre kodlayıp dağıtılabiliriz. Herhangi bir hata, yazım yanlışı veya bilgi eksikliği görürseniz iletişim formu menümüzde, yorum formu da hemen altta :) Neyse, “Basit CSS Komutları {3}” adlı yazımızda görüşmek dileğiyle :)

Yaptığımız çalışmayı aşağıdaki bağlantıdan indireblirsiniz.

Dökümanı İndir

Şifre: http://www.sorbize.com

7 Yorum

  1. admin 02 Haziran 2011
  2. AlpEreN 15 Haziran 2011
  3. Görkem KARA 17 Haziran 2011
  4. Hüseyin Temizyürek 19 Temmuz 2011
  5. mitsubishi klima 28 Temmuz 2011
  6. ali 29 Ağustos 2011
  7. akif türk 14 Ocak 2013

Yorum Yaz