Salı , Haziran 27 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS Font Özellikleri (5. Ders Yazı Metinlerini Düzenleme)

CSS Font Özellikleri (5. Ders Yazı Metinlerini Düzenleme)

Sayfanızda oluşturmuş olduğunuz içerik alanlarında ki yazılarınızı bir kaç ufak değişiklikle daha görsel hale getirebilirsiniz. Bu dersimizde en çok kullanılan font özelliklerini örnekte anlatacağız ve örnekleme yapmadığım birçok özelliği de zamanla diğer deslerimiz de yapacağız ve hemen örnek yazı şablonumuza bakalım.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

body{ margin:0; padding:0;} Komutumuz ile alanımızın boşluklarını sıfırladık. İlerleyen derslerimizde css sıfırla komutu ile daha kapsamlı css sıfırlamaları yapacağız.

#tumalan{ Sayfamızı oluşturan yapımızı seçtik ve bu alana genel olacak birkaç özellik tanımladık.

width:1024px; Komutumuz ile genişliğinin 1024px olmasını istedik aşağıya doğru uzayacağı için yükseklik değeri belirtmedik.

margin:0px auto; Komutumuz ile tumalan Alanımızın sayfada ortalanmasını istedik. Bu komutu kullanmazsak sayfamız varsayılan olarak sola yaslanırdı.

font-style:italic; Komutumuz ile sayfamızda yazılan her yazının italik olmasını istedik eğer extra tanımlama yapmazsak tumalan alanımız içindeki tüm yazılar italik olur.

}

.ustbaslik { Alanımızı seçtik ve aşağıdaki komutları alanımıza tanımladık.

height:70px; Komutumuz ile yükseklik değerini tanımladık. Bunu yapmamızın sebebi, aşağıda kullandığımız line-height komutu ile yazımızın 70px ortasına getirmek için.

line-height:70px; Komutu ile yazımızı 70px değerinin ortasına sabitledik.

text-align:center; Komutu ile yazımızın alanımızın ortasında olmasını istedik.

font-size:50px; Komutu ile yazımızın 50px büyüklüğünde olmasını istedik.

font-weight:bold; Komutu ile yazımızın kalın olmasını istedik.

color:#FF6251; Komutu ile yazımızın rengini belirledik.

}

.yazialani {font-size:16px; } Komutumuz ile yazıalani classımızın içine yazılan her yazının 16px büyüklüğünde olmasını istedik.

.yazialani h1{ Alanı şeklinde yazıalani class etiketimizin içinde olan h1 etiketimizi belirledik. Bu şekilde tanımlama yapmamızın sebebi: Eğer başka h1 etiketlerinde bu özellikleri vermesin diye bu şekilde sadece yazialani clasımızın içinde bulunan h1 etiketine bu özellikleri verecektir.

text-align:center;  Komutu ile başlığımızın ortalanmasını istedik.

font-size:30px;  Komutu ile yazı boyutumuzun 30px boyunda olmasını istedik.

margin-top:30px; Komutu ile yazı başlığımızın üst kısımdan 30px bir boşluk bıraktıktan sonra başlamasını istedik.

}

.yazialani p { Yine h1 etiketimize yaptığımız gibi yazialni içindeki p etiketimizi tanıtarak başka p etiketlerine etki yapmasını engelledik.

line-height:23px; Komutumuz ile paragraflar arasındaki boşluğumuzu 23px. bırakarak daha görsel bir yapı kazandırdık yazımıza.

font-family:serif; Komutumuz ile p alanımızın içinde yazılan yazılarımızın font biçimini değiştirdik normalde varsayılan olan georgian yazı tipini serif olarak değiştirdik.

}

.detaylar { Yazımızın altında bulunan alanımızı tanımladık.

text-align:right; Komutu ile yazımızı alanımızın sağ köşesine yasladık.

font-size:15px; Komutu ile yazımızı 15px boyunda olmasını istedik

color:gray; Komutu ile yazımızı gri renginde olmasını istedik.

}

Hakkında BilgeBank

İlgili Makale

html menü

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını …

Bir Cevap Yazın