Yazar: Merhaba değerli okurlarım!
Bu yazımda sizlere css text özelliklerinden bahsedeceğim. css ile text tanımlamaları nasıl yapılır bunu anlatmaya çalışacağım.
Css’yi anlamak adına css ile ilgili yazmış olduğum diğer yazılarada göz atmanızda fayda olacaktır.
Bir web sayfasında metin kutularımız ve ya form alanlarımız bulunabilir, işte bu alanların (text) bölümlerinin tüm özelliklerini, yazıların özelliklerini, stil tanımlamalarını text etiketini ve almış olduğu parametreler ile gerçekleştiriyoruz.
Bu alanda yazılarımızın font özelliklerini belirlemek kadar text özelliklerinide belirlemek oldukça önemlidir. hal böyle iken bir css dosyası tanımlarken kesinlikle kullanacağınız ve mutlaka bilmeniz gereken bu kısımı dikkatlice okumalısınız.
Örnek yapmadan önce text etiketinin özelliklerini ve hangi değerlerin ne işe yaradığını inceleyelim.
Text tanımlamaları için gerekli olan parametreler ve özellikleri:
Text transform:
lowercase: yazmış olduğunuz yazının tamamının küçük olmasını sağlar.
uppercase: yazmış olduğunuz yazının tamamının büyük olmasını sağlar.
capitalize: yazının istenilen şekilde kalması için kullanılır.
Text-decoration:
underline: yazmış olduğunuz yazıyı altı çizili yapar.
overline: yazmış olduğunuz yazıyı üstü çizili yapar.
line-through : yazmış olduğunuz yazının üstü çizili olmasını sağlar.
none: yazmış olduğunuz yazının her hangi bir yerine çizgi çekilmemesini sağlar.
text-align:
left: yazmış olduğunuz yazının sola yaslanmasını sağlar.
center: yazmış olduğunuz yazıyı ortalar.
right: yazmış olduğunuz yazıyı sağa yaslar.
line-height :yazmış olduğunuz yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler girebilirsiniz.
text-ident : yazmış olduğunuz Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.
bu özellikler ile text tanımlamalarınızı yapabilirsiniz. yakından görmek adına bir örnek yapalım ve text.html adında bir dosya oluşturalım.
html kod:
<html>
<head>
<title> css text özelliği </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”stile.css”>
</head>
<body>
<p> css text özelliklerini gösteren basit bir örnek sayfadır. </p>
</body>
</html>
Bu html sayfasını görüntülediğimizde css kodlarını tanımlamadığımız için sayfamız standart bir şekilde görüntülenecektir.
Şimdide css kodlarını yazalım ve tekrardan html sayfasını görüntüleyelim.
style.css dosyasının kodlarını şu şekilde yazalım.
css kod:
p {
text-transform : lowercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
Bu kodları yazdıktan sonra kayıt edin ve html dosyasını yeniden görüntüleyin, html sayfamızdaki yazının stil görünümüne bakabilirsiniz.
Sizlerde css’nin text özelliğini kullanarak web sayfalarınızdaki yazılar için farklı sitller elde edebilirsiniz.
Css text özellikleri ile ilgili soru ve sorunlarınızı bana ulaştırabilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css border özelliği başlıklı makalemizde css border, css border kullanımı ve css border özelliği hakkında bilgiler verilmektedir.