ONBİNRENK - Bilgi Arşivi

css2

Metin Biçimi 

 
HTML kodlarına atanan parametreler, metin formatı konusunda çok yetersiz kalmaktadır.
En basiti metni iki yana yaslayamıyorduk. HTMLde de olduğu gibi, 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: 

 
Kod:
<html> 
<head> 
<title>Text-align özelliği</title> 
<style> 
<!-- 
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. 
 

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. (Tabii forumumuzda
linklerin altı çizili olmaması için kodlar da mevcut)Aşağıdaki hiperlink çeşitlerine bakalım: 
 
Kod:
<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:
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. 
 
 

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:
<html> 
<head> 
<title>Harfler arası mesafeyi ayarlamak...</title> 
<style> 
<!-- 
h1 {letter-spacing:-3px} 
h2 {letter-spacing:1 cm} 
h3 {letter-spacing:0 cm} 
h4 {letter-spacing:5mm} 
--> 
</style> 
</head> 
<body> 
<br> 
<h1>Büyük Altay!</h1><br> 
<h2>Büyük Altay!</h2><br> 
<h3>Büyük Altay!</h3><br> 
<h4>Büyük Altay!</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. HTMLde de olduğu gibi <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. 
 
Kod:
<html> 
<head> 
<title>Satır başı bırakma</title> 
<style> 
<!-- 
p {text-indent:1cm} 
--> 
</style> 
</head> 
<body> 
<br> 
<p>İşte o günden sonra, biz eşek milleti, konuşmasını, söyleşmesini unutmuşuz; her
duygumuzu, her düşüncemizi, anırtıyla anlatmaya başlamışız. O eski kuşaktan eşek, 
tehlike kuyruk altına girinceye dek, kendini avutup, kandırmamış olsaydı, bizler de 
konuşmasını bilecektik.</p> 
<em>Ah Biz Eşekler, Aziz Nesin</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:
<html> 
<head> 
<title>Büyük harf, küçük harf sorunsalı,</title> 
<style> 
<!-- 
h2 {text-transform:lowercase} 
h3 {text-transform:uppercase} 
h4 {text-transform:capitalize} 
--> 
</style> 
</head> 
<body> 
<br> 
<h2>BüYüK AlTaY!</h2><br> 
<h3>BüYüK AlTaY!</h3><br> 
<h4>BüYüK AlTaY!</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. Yine HTML den 
Tanıdığımız <img> komutunun, resim nesnesinin yazıya göre nasıl hizalanacağını 
align="..." parametresiyle biliyoruz... 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% 
 
Bu özellik NN 4.0 ve üzeri browser'larda sadece <img> kodu için geçerlidir. 



  


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=