[table_of_contents]
CSS Link
Bir web sayfasından sitedeki başka bir sayfaya yada başka bir siteye yönlenilmesini sağlayan linkler farklı şekillerde stillendirilebilir. Bu stil, bütün css özellikleri ile verilebilir. Altı çizilmesi gereken bir nokta vardır. Bu da
sayfadaki linkin farklı durumlarıdır. <a> etiketi ile hazırlanan linkin sayfada farklı durumları (states)
bulunmaktadır :
a:link -> Linkin henüz ziyaret edilmemiş normal hali
a:visited -> Kullanıcının önceden ziyaret ettiği linkin durumu
a:hover -> Kullanıcının fare ile linkin üzerinde gezindiği hali
a:active -> Linkin kullanıcı tarafından tıklandığı andaki hali
Bir linkin farklı durumlarına, farklı stiller atanabilir. Bunu bir örnek üzerinde görmek için aşağıdaki css kodlarını incele :
<html>
<head>
<style type=”text/css”>
a:link {color:blue;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:black;}
</style>
</head>
<body>
<p>
<a href=”#” >Örnek link</a>
</p>
</body>
</html>
CSS Text
Metin Rengi
color özelliği, bir metne yazı rengi belirlemek için kullanılır. Renk vermek için şu yollar tercih edilebilir :
1. Adı ile : red
2. HEX değeri ile : #ff0000
3. RGB değeri ile : rgb(255,0,0)
Aşağıdaki örnekte <body> elementine sayfa için varsayılan renk ve sayfadaki bazı p elementleri için ve h2 başlıklarına bir yazı rengi ataması yapılır.
<html>
<head>
<style type="text/css">
body {color:blue;}
p.onemli {color:red;}
h2 {color : Orange;}
</style>
</head>
<body>
<h2>Başlık portakal renginde olması için stillendirildi.</h2>
<p>Bu normal bir paragraf. Bu metin mavidir. Çünkü p etiketi için özel bir yazı rengi belirlenmedi,
dolayısıyla kendisini kapsayan body etiketinin yazı rengini aldı.</p>
<p class="onemli">Bu paragraf onemli class seçicisi ile işaretlendiği için yazı rengi kırmızı.</p>
</body>
</html>
Bu html dosyanın ekran çıktısı şöyle olacaktır :
css-metin-renk
Metin Hizalaması
text-align özelliği, bir metne yatayda hizalama vermek için kullanılır. Bir yazı ortalanabilir (center), sola/sağa yaslanabilir (left/right) yada satırdaki diğer yazılara göre hizalanabilir (justify). Bir örnekle metin hizalamasına açıklık getirmeye ne dersin :
<html>
<head>
<style type="text/css">
h2 { text-align:center; }
li.makale { text-align:justify; }
li.isim { text-align:right; }
</style>
</head>
<body>
<h2>Ortalı Başlık</h2>
<ul>
<li class="isim">Sağa dayalı yazar adı</li>
<li class="makale">justify olarak atanan text-align özelliği sayesinde bu uzun yazıyı okurken eğer
tarayıcıyı büyütüp küçültürsen, yazının düzenini koruduğunu göreceksindir. Birçok haber sitesi ve blog bu
özellikten faydalanır.</li>
</ul>
</body>
</html>
Sen de bu örneği kendin yazarak html uzantılı bir dosya olarak kaydet ve çalıştır. Ardından tarayıcıda sonuçları analiz ederek öğrenme sürecini hızlandır. İşlem sonrasındaki görsel çıktı aşağıdaki gibi olmalıdır:
metin-yaslama-hiza
Metin Dekorasyonu
text-decoration özelliği en çok bir metnin altını çizmek, üstünü çizmek yada bunları kaldırmak için kullanılır. Linklerin alt çizgisini kaldıran aşağıdaki css satırını incele :
a { text-decoration:none; }
Bunun yanında düz yazıları dekore etmek için de text-decoration özelliğinden faydalanılabilir :
<html>
<head>
<style type="text/css">
h2 { text-decoration:overline; }
h3 { text-decoration:line-through; }
h4 { text-decoration:underline; }
</style>
</head>
<body>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
</body>
</html>
Örneği html uzantılı bir dosya olarak kaydedip çalıştırdığında alacağın ekran çıktısı aşağıdaki gibi olacaktır:
metin-dekorasyon-baslik
Faydalanabileceğin diğer önemli css metin özellikleri şöyle sıralanabilir :
[box type="info" size="large" style="rounded" border="full"]letter-spacing: Yazı içindeki karakterlerin arasındaki boşluğu belirler
line-height: Satır yüksekliği belirlenir.
text-shadow: Yazıya eklenecek gölge efektini belirler
text-transform: Yazının büyük/küçük harf durumunu kontrol eder.
vertical-align: Bir elementin dikey hizalamasını ayarlar.
word-spacing: Yazıdaki kelimelerin arasındaki boşluğu artırır yada azaltır.[/box]
Konular: anlatım, biçimlendirme, css, csss, dekorasyon, ders, görsel, hizalama, hızlı, kolay, link, makale, metin, not, öğren, rehber, renkhex, renklendir, resimli, rgb, şablon, url, yasla
Yorum yok
Bu yazı için Yorum Beslemesi
Geri izleme bağlantısı http://www.kodhane.com/css-metin-link-bicimlendirme.html/trackback