CSS de Metin Biçimi

HTML kodlarına atanan
parametreler, metin formatı konusunda çok yetersiz kalmaktadır. En
basiti metni iki yana yaslayamıyorduk. HTML derslerinden hatırlanacağı
üzere, align="..." parametresi ile metni sağa (right ), sola (left ) ve
merkeze (center ) yaslamak mümkün. Ancak göze hoş gelen iki yana yaslama
biçimini bu parametreyle gerçekleştiremiyorduk.

Metin Hizalama
CSSde metni yaslamak için text-align özelliğinden yararlanıyoruz. Bu
özelliğe verebileceğimiz değerler:left (sol ), right (sağ ), center
(orta ) ve justify (iki yana yasla ). Aşağıdaki uygulamamıza bakalım:

Kod Alanı:<html>
<head>
<title>Text-align özelliği</title>
<style>

</style>
</head>
<body>
<br> <h4>Ankara, Kasım 1996</h4><br>
<h1>Webmaster Forumu</h1>
<p>Kentler, endüstri toplumunda olduğu gibi endüstri öncesi
toplumlarda da tarih boyunca en devingen öğe oldu, toplum yaşantısında
belirgin izler bıraktı. Anadoluda kent ve kentleşme tarihi üzerinde
yapılmış çeşitli araştırmaların sonuçlarını bir araya getirip bunlardan
yeni sentezler üretti. Anadolu kentlerinde mekânsal yapı değişimi ile bu
yapıyı belirleyen sosyo-ekonomik süreçler arasındaki nedensellik
ilişkilerinin irdelendiği bu kitap, araştırmacılar, özellikle kent
plancıları için önemli bir kaynak.</p>
<h3>Hakan</h3>
</body>
</html>

Uygulamamızda yer alan <p>, <h1>, <h3> ve
<h4> kodların hepsi align="..." parametresini destekleyen
kodlardır. Bu parametreyi desteklemeyen <code>, <address>
gibi kodlar pek tabi ki text-align özelliğini de desteklemezler. Hangi
kodların hangi parametreleri desteklediğini HTML Kodları sayfasından
öğrenebilirsiniz.

Metinler ve Çizgiler
Metin formatı için kullandığımız bir başka özellik: text-decoration. Bu özelliğin aldığı değerler şunlardır:

overline Yazıların üstünün çizili olmasını sağlar.
text-decoration: overline
line-through Yazıların üzerinin çizili olmasını sağlar.
text-decoration: line-through
underline Yazıların altının çizili olmasını sağlar.
text-decoration: underline
none Yazıların çizgisiz olmasını sağlar.
text-decoration: none

Bu özelliği web tasarımcıları daha çok hiperlinkler için
kullanırlar. Bildiğiniz gibi <a href="..."> kod ve parametresiyle
oluşturduğumuz hiperlinkler, mavi renkli altı çizili yazılardır. Eğer
hiperlinklerin altı çizili olmasını istemiyorsak CSS dosyamızda şu
özelliği kullanırız:text-decoration: none. Aşağıdaki hiperlink
çeşitlerine bakalım:

Kod Alanı:<html>
<head>
<title>Text-align özelliği</title>
</head>
<body>
<br>

<a href="derscss1.html" style="text-decoration:overline">Metin Formatı</a><br>

<a href="derscss2.html" style="text-decoration:line-through">Font Formatı</a><br>

<a href="derscss3.html" style="text-decoration:underline">Arkaplan Formatı</a><br>

<a href="derscss4.html" style="text-decoration:none">Tablo Formatı</a><br>

<a href="derscss5.html">Sınıflandırma</a><br>

</body>
</html>

Tabi text-decoration özelliğini başka bir menüde de kullanabiliriz.
Örneğin başlık yapmaya yarayan <h1>...<h6> kodlarına bu
özelliği atayarak, altı çizili alt başlıklar oluşturabiliriz.

Metin Renkleri
Metnin renk özelliklerini tanımlamak için color aracından
yararlanırız. Bu özelliğin aldığı değerler İngilizce renk ismi olarak
tanımlanabileceği gibi, hekzadesimal (onaltılık sistem ) rgb kodları
veya ondalık rgb kodları halinde de tanımlanabilir.

Kod Alanı:h1
{
color:crimson;
}
h2
{
color:#8b008b;
}
h3
{
color:#8B008B
}
h4
{
color:rgb(54%,0%,54% )
}

Satır Arası Yükseklik
Metnin hizalamayı, metnin çizgi formatını ayarlamayı ve metnin
rengini belirlemeyi öğrendik. Metnin satırları arasıdaki mesafeyi
belirlemek şimdiki konumuz. Bunun için line-height özelliğini
kullanıyoruz. Eğer metnin line-height özelliğine normal değerini
verirsek, satır arası yükseklik varsayılan değerini alır. Tabi biz bu
özellik üzerinde şu değerlerle oynayabiliriz.

sayı Satır arası yüksekliğini verilen sayıya göre belirler.
line-height: 1.5
birim Satır arası yüksekliğini px, cm gibi girilen birimlere göre belirler.
line-height: 10mm veya line-height: 15px
yüzde Satır arası yüksekliği yüzde oranı cinsininden belirler.
line-height: 150%

Sayfayı fazla uzatıp, okuyucuyu sıkmamak için uygulama yapmıyorum,
sizler <p> koduna bu özellikleri atayarak istediğiniz satır
aralığında paragraflar oluşturabilirsiniz. Başka kodlarla da denemeniz
faydalı olacaktır. Ayrıca Özelleştirme konusunu anlattığım sayfada bu
özellikleri kullanacağım birkaç örnek bulunacak, onlara da
bakabilirsiniz.

Harfler Arası Boşluk
Metin formatı için öğreneceğimiz diğer bir özellik: harfler
arasındaki mesafeyi ayarlamak. Bunun için letter-spacing aracından
yararlanacağız. (NOT:NN browserını kullananlar bu özelliği göremez. ) Bu
özelliğe vereceğimiz değerler cm, mm gibi veya px (piksel ) gibi
birimlerle tanımlanmalı. Vereceğimiz değer negatif olursa, harfler
arasındaki boşluk normalden daha az olur. Değer pozitif olursa;
anlaşılacağı üzere, harfler arasındaki mesafe normale göre daha fazla
olur. Matematiği süper olan okuyucularımız, bu değerin sıfır olması
halinde nasıl sonuç alınacağını hemen anlamıştır: Birşey değişmez

Kod Alanı:<html>
<head>
<title>Harfler arası mesafeyi ayarlamak...</title>
<style>

</style>
</head>
<body>
<br>
<h1>hakan hakan!</h1><br>
<h2>hakan hakan!</h2><br>
<h3>hakan hakan!</h3><br>
<h4>hakan hakan!</h4><br>
</body>
</html>

IE kullanan okuyucularımız bu uygulamayla letter-spacing özelliğini
daha iyi kavramışlardır. Uygulamada 5mm yazılan yere 0.5cm de
yazabilirdik pekalâ. İngiliz matematiğinde ondalık sayıların "." ile,
Türk matematiğinde ise "," ile ayrıldığını unutmayalım.

Satırbaşı Boşluğu
Sayfa uzuyor ama biz halâ metin formatını bitiremiyoruz. Bir başka
özellik de satır başı tanımlamak. HTML derslerinde öğrendiğimiz
<p> kodu ile satır başı yapmaksızın, üst ve alt satırları boş
bırakılan paragraflar elde ediyorduk. Aslında bu format standartlaştı
ama eski format; yani satırbaşı bırakma geleneğini de bir çırpıda
silemeyiz. Satır başı bırakabilmek için text-indent özelliğinden
yararlanıyoruz. Bir önceki özellik de olduğu gibi, bu özelliğe de cm, px
gibi birimlerle tanımlanmış değerler verebiliyoruz ve yine negatif
değerler atanabiliyor. Eğer değer pozitifse, bildiğimiz anlamda satır
başı bırakılmış oluyor, eğer negatif ise paragrafın ilk satırı diğer
satırların solunda kalıyor. Diğer özelliğin aksine, bu özelliği NN 4.0
ve daha üstü browserlar da destekliyor; desteklemeyenleri ayrıca
belirtiyorum zaten.

Kod Alanı:
<html>
<head>
<title>Satır başı bırakma</title>
<style>

</style>
</head>
<body>
<br>
<p>Bir Numaralı Webmaster Forumu</p>
<em>Hakan</em>
</body>
</html>

Büyük Harf, Küçük Harf
Diğer özelliğimiz: text-transform. Bu özelliğe değerler vererek
metnin büyük harflerle yazılı olmasını (uppercase ), küçük harflerle
yazılı olmasını (lowercase ) veya sözcüklerin ilk harflerinin büyük
olmasını (capitalize ) sağlayabiliyoruz. Uygulamamız ile neler dediğimi
daha iyi anlayacaksınız:

Kod Alanı:<html>
<head>
<title>Büyük harf, küçük harf sorunsalı,</title>
<style>

</style>
</head>
<body>
<br>
<h2>HAKAN!</h2><br>
<h3>HAKAN!</h3><br>
<h4>HAKAN!</h4><br>
</body>
</html>
Metin formatı için kullanacağımız son özellik: vertical-align
(düşey-hizalama ). Bu özellikle araçların düşey olarak nasıl
hizalanacağını belirleriz. HTML derslerinde <img> komutunu
anlattığımız sayfada, resim nesnesinin yazıya göre nasıl hizalanacağını
align="..." parametresiyle göstermiştik. Bu sefer hizalamayı CSS
özellikleriyle yapıyoruz. vertical-align özelliğinin aldığı değerler
şunlardır:

baseline Nesne ana elemanın taban hattına yerleşir.
vertical-align: baseline
sub Nesne alt simgeymiş gibi hizalanır.
vertical-align: sub
super Nesne üst simgeymiş gibi hizalanır.
vertical-align: super
top Nesne satırdaki en yüksek elemanın yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: top
text-top Nesne metnin yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: text-top
middle Nesne ana elemanı ortalayacak şekilde hizalanır.
vertical-align: middle
bottom Nesne satırdaki en aşağıdaki elemanın seviyesini taban hattı alacak şekilde hizalanır.
vertical-align: bottom
text-bottom Nesne metnin tabanını taban hattı alacak şekilde hizalanır.
vertical-align: text-bottom
yüzde oranı Nesne satır hattına göre yüzde oranı ile hizalanır; negatif değerler geçerlidir.
vertical-align: 5%

HTML derslerinde nesne hizalamayı iyi öğrenenler, anlatılanları
rahatlıkla anlamışlardır. Bu özellik NN 4.0 ve üzeri browserlarda sadece
<img> kodu için geçerlidir.

Favorilerine al ya da arkadaşlarınla paylaş: