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:
Â
<html>
<head>
<title>Text-align özelliÄŸi</title>Â
<style>
<!–
p
{
text-align:justify
}
h1
{
text-align:center
}
h3
{
text-align:left
}
h4
{
text-align:right
}
–>
</style>
</head>
<body>
<br> <h4>Ankara, Kasım 1996</h4><br>
<h1>Anadolu’da Bronz Çağı Kentleri</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ı. Anadolu’da 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>Sevgi Aktüre</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:
<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.
h1
{
color:crimson;
}
h2
{
color:#8b008b;
}
h3
{
color:rgb(139,0,139)
}
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.
Â
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.