Date Image Friday, November 27, 2009 | Kategoriler | Css, Tümü

Css İle Metinlerin Baş Harflerine Otomatik Olarak Farklı Stil Atamak

   Gazetelerde ya da bazı haber sitelerinde görmüşsünüzdür. Bazı haber içeriklerinin başlangıç harfi biraz daha dikkat çekici, farklı bir stilde yazılır. Bunu otomatik olarak css ile yapabiliriz. Bakalım nasıl;

.news

{

     font-family:Verdana;

     font-size:medium;

     color:Blue;

}

.news:first-letter

{

     font-size:xx-large;

     font-weight:bold;   

}

   Css imizde news adlı bir class oluşturduk ve özelliklerini belirttik. Bu class ı haber metnimiz için kullanacağımız <p> elementi için kullancağız. Gördüğünüz gibi hover, visited gibi first-letter özelliğini ayarladık. Bu özellik, metnimizin baş harfi için ayrı bir stil tanımlamamızı sağlıyor.

<p class="news">Bu haber tüm takımda şok etkisi yarattı.</p>

   Html içeriğimize classı news olan bir <p> elementi ekliyoruz.

Css first-letter

Etiketler :