Metin Biçimi

CSS DERSLERİ

Ders2: 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

CSS'de 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:

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:

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:

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.

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.

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.

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ü browser'lar da destekliyor; desteklemeyenleri ayrıca belirtiyorum zaten.

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:

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: