Css örnekleri 1

Pek çok arkadaş bana İlk bloğumda css kullanarak yaptığım pek çok şeyi nasıl yaptığımı defalarca sordu. Bende mümkün mertebe yardımcı oldum. Sürekli bu konularda sorular sorulmaya devam ettiği için bunları yazı olarak yazmaya karar verdim ve bundan sonrada Css kullanarak yapılabilcek değişik şeyler hakkında kullanabilceğiniz örnekler vereceğim.

Bunları değişik sitelerde değişik anlatımlarla bulmak mümkünken neden onlara bağlantı vermek yerine burada anlatacağım?

1. Her yiğidin ayrı bir yoğurt yiyişi vardır.

2. Öğrendiklerimi öğretebiliyorsam onları gerçekten öğrenmişimdir. VArsa hatalarım onlarıda sizler sayesinde düzeltebilirim.

ve ilk css kullanarak yapacağımız örnek.

Herhangi bir başlık, yazı , bağlantının… önüne, arkasına… küçük bir resim simge koymak.

h2 {
background:url(atac.png) center left no-repeat; /* arkaplan resmi */
font:1em “Arial”,sans-serif; /* font boyutu ve tipi */
font-weight:700; /* yazının kalınlığı */
padding-left:18px; /* yazının sol kısmındaki boşluk */
margin-bottom:4px; /* alttaki yazı ile mesafe */
}

background‘daki “center” resmin yazıya göre orta hizada olmasını sağlar. Eğer üstte olmasını isterseniz “top” altta olmasını isterseniz “bottom” kodlarını kullanabilirsiniz.

“center” den sonra gelen “left” resimin sağdamı yoksa soldamı olacağını ayarlar. Sağda olmasını isterseniz “right” ile değiştirmelisiniz.

“no-repeat” resmin tekrar etmemesini ayarlar.

Kodları kopyala yapıştır yaparken yanlara yaptığım açıklamaları ( /* açıklama */) isterseniz silebilirsiniz. Silmesenizde kodun çalışması açısından bir zararı olmaz. Kendinize göre kisiselleştirdikten sonra silmenizi öneririm.

Bunun dışında h2 yerine h3, h4, h5, …. yazabilirsiniz. Eğer Şablonunuz katmanlardan (div) oluşuyorsa ve siz sadece belli katmanlarda bu kodun çalışmasını istiyorsanız o katmanın genel sitilini ayarladığınız kodu başa yazın.

örneğin: .sidebar h2 { …} , #logo h3 a {……} gibi…

Eğer yalnız bağlantı verdiğiniz yazıların başına bu resmin gelmesini istiyorsanız h2′nin yanına bir “a” getirin. ” h2 a{…} ”
Sadece üzerine gelince çıkmasını istiyorsanız a’dan sonra “hover” yazın. “h2 a:hover {…}

Eğer üzerine geldiğinizde resmin değişmesini isterseniz yukarıdakilerin her ikisinide yazmalısınız.

h2 a {
background:url(atac.png) center left no-repeat; /* arkaplan resmi */
font:1em “Arial”,sans-serif; /* font boyutu ve tibi */
font-weight:700; /* yazının kalınlığı */
padding-left:18px; /* yazının sol kısmındaki boşluk */
margin-bottom:4px; /* alttaki yazı ile mesafe */
}

h2 a:hover { background:url(atac.png) }

h2 a:hover’ da sadece değişmesini istediğimiz kodları yazıyoruz. Üstteki kodların hepsini birden yazmaka sakınca yok ama gerekte yok. Eğer bağlantının üzerine gelince değişmesini istediğiniz başka şeyler varsa onlarıda ekleyebilirsiniz.

Özet olarak

• h2 {…} , sadece <h2></h2> arasına gelen yazıların,
• h2 a {…} , <h2><a href=”#”>link</a></h2> şeklinde başında h2 kodu yazılan bağlantıların
• h2 a:hover {…} , h2 kodları arsına yazılmış bağlantıların üzerine gelindiğindeki sitilini ayarlar.

Peki bunu kullandığımız menulere nasıl ekleyeceğiz. Yani aşağı yada yana oğru uzanan menülere eklemek için ne yapmalıyız. Bunun için 2. sayfaya geçelim.