Bu yazımda ve eğitimde CSS dilinin text, yazı özellikleri ve değerlerinin HTML üzerinde yazılara nasıl etki ettiğini göreceğiz. Aşağıdaki HTML kod bloğuna style.css dosyası external olarak eklenmiştir. Her bir özellik maddesi için yazılmış olan style.css dosyasını ayrı ayrı index.html üzerinde deneyebilirsiniz.
index.html
</pre> <!DOCTYPE html> <html> <head> <title>Yazı Text Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- YAZI (TEXT) HİZALAMA --> <h2 class="orta">Ortalanacak Başlık</h2> <h2 class="sol">Sola Yaslanacak Başlık</h2> <h2 class="sag">Sağa Yaslanacak Başlık</h2> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. <!-- YAZI (TEXT) DEKORASYONU --> <hr> <a href="#" class="none">Yazı üzerindeki tüm uygulanmış dekorasyonları kaldırır</a> Yazının üstü çizgili hale gelecek. <h3 class="line-trough">Üzeri çizili başlık</h3> Yazının altı çizgili hale gelecek. <!-- HARF DEĞİŞİKLİĞİ --> <hr> burası küçük harfler kullanılarak yazıldı ama tarayıcıda tüm farfler büyük gözükür. BÜYÜK HARFLER KULLANILMASINA RAĞMEN KÜÇÜK GÖZÜKÜR bu paragraftaki bütün kelimelerin ilk harfi büyük gözükür <!-- PARAGRAF GİRİNTİSİ --> <hr> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. <!-- HARFLER ARASI YATAY MESAFE --> <hr> Harfler arasındaki mesafe px cinsinden açılır veya kapanır. <!-- SATIR ARASINDAKİ MESAFE --> <hr> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</br> Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı </br> oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri </br> endüstri standardı sahte metinler olarak kullanılmıştır. <!-- KELİMELER ARASI MESAFE --> <hr> Bu pagraftaki kelimeler arası açılacak veya kapanacak <!-- YAZI GÖLGELENDİRME --> <hr> <h1 class="text-shadow">GÖLGELİ BAŞLIK</h1> </body> </html> <pre>
-
Yazı Rengi Özelliği (color:)
CSS’de color özelliğini en yaygın olarak kullanılan 3 şekli bulunmaktadır.
Doğrudan renk ismi belirtme;
style.css
h2{
color:red;
}
CSS’de color özelliğine doğrudan renk isimlerini İngilizce kullanarak değer olarak verebiliriz. Örnekte olduğu gibi red, blue, gray, black gibi.. Bu yöntemle kullanabileceğimiz renkler sınırlı olup renklerin tonları light veya dark olarak verilmiştir. https://www.quackit.com/css/css_color_codes.cfm adresinden renk isimlerini görebilirsiniz.
RGB Renk Skalası Kullanarak;
style.css
h2{
color:rgb(255,0,0);
}
RGB red, green, blue renk tonları 0-255 arasında bir değer alır. rgb(red,green,blue); Örneğimizde red kısmına 255 değer vererek kırmızının en saf hali elde edilmiştir. Sıfıra doğru yaklaşan bir değer verildiğinde koyulaştığını göreceksiniz. Şöyle düşününkü kırmızı renk ile mavi rengi karışımı ne olacaktır. Tabiki mor ve tonları olur. eğer kırmızı ve blue değerini 255’e yakın değerler verirseniz rengin mora döndüğünü göreceksiniz. RGB’yi daha net anlamak için şunu düşünün bir boya paletiniz var ve elinizde saf kırmızı mavi ve yeşil boyanız var, renkleri karıştırarak başka renkler elde ediyorsunuz. Mantıklı olarak renklerde sarı olması beklenir, fakat burada sitem tam tersi işliyor. siz elinizdeki paletten renkleri çıkarttığınızı düşünün, tüm renkleriniz olursa siyahı elde edersiniz, Sarıyı elde etmek içinde malum yeşil ve mavi renlerin birleşimidir. Yeşilden maviyi eksiltirseniz sarı’ya ulaşırsınız.
Hexadecimal renk kodu kullanarak;
style.css
h2{
color:#ff0000;
}
CSS’de genellikle rgb ve hex renk kodları kullanılmaktadır. HSL, HSV ve HWB renk skalaları bahsettiğimiz 3 skala dışında kullanılıyor olsa da çok yaygın değildir. https://www.quackit.com/css/css_color_codes.cfm adresinden tüm bu skalaları inceleyebilirsiniz. Örneklerde verilen tüm renkler kırmızıdır.
-
Hizalama (text-align:)
style.css
h2.orta
{
text-align: center;
}
h2.sol
{
text-align: left;
}
h2.sag
{
text-align: right;
}
p.ikiyana
{
text-align: justify;
}
Örnekteki deklarasyonlarda ki değerlere bakıldığında ilk seçici olan h2.orta; h2 etiketlerinden orta class’ı atanmış olanına text-align: center; komutu ile bu h2 etiketinin bulunduğu sınırlar içinde ortalanması sağlanmıştır. Aynı şekilde h2.sol seçicisinde deklarasyonun değeri left olmasından dolayı sola yaslanmış, h2.sag seçicisinde deklarasyonun değeri right olması sebebiyle sağa yaslanmıştır. Son olarak p etiketine ikiyana isimli class atamasıyla p.ikiyana seçicisi, text-align:justify deklarasyonu ile her iki yana yaslanması sağlanmıştır.
-
Yazı Dekorasyonu (text-decoration:)
text-decoration: none;
Etiketlerin üzerine atanmış veya kullanım alanına göre default olarak gelen yazı (text) üzerindeki tüm dekoratif etkileri kaldırır. Yukarıdaki HTML örneğine bakıldığında bir hyperlink <a> etiketine none isminde bir class atanmış. HTML’de bir hyperlink oluşturulduğunda default olarak (ziyaret edilmemiş bir link ise) mavi renginde altı çizili olarak görürüz. Altı çizili olması bu etikete bir dekorasyon uygulanmış olması anlamına gelir ki bunu text-decoration: none; deklarasyonu ile yok etmiş, alt çizgisini kaldırmış oluruz.
text-decoration: overline;
Yazı (text) etiketlerinin üstüne çizgi çekilmesini sağlar. Örnekte bir paragraf <p> etiketine overline isminde class ataması yapılmış. Style.css dosyasında da text-decoration: overline; deklarasyonu ile p etiketinin üstü çizili hale getirilmiş.
text-decoration: line-through;
Yazı (text) etiketlerinin üzerine çizgi çekilmesini sağlar. Örnekte h3 etiketine line-through isminde class atanmış ve bu etikete style.css dosyası içerisinde text-decoration: line-through; deklarasyonu ile üzeri çizili hale getirilmiştir.
text-decoration: underline;
Yazı (text) etiketlerini altı çizili hale getirir. Örnekte paragraf <p> etiketine underline isminde class atanmış ve bu etikete style.css dosyası içerisinde text-decoration: underline; deklarasyonu ile altı çizili hale getirilmiştir.
style.css
a.none{
text-decoration: none;
}
p.overline{
text-decoration: overline;
}
h3.line-trough{
text-decoration: line-through;
}
p.underline {
text-decoration: underline;
}
-
Harf değişikliği (text-transform:)
text-transform: uppercase;
Uygulandığı yazı etiketi içindeki tüm harfleri büyük harf olarak gösterir.
text-transform: lowercase;
Uygulandığı yazı etiketi içindeki tüm harfleri küçük harf olarak gösterir.
text-transform: capitalize;
Uygulandığı yazı etiketi içindeki tüm kelimelerin baş harflerini büyük hale getirir.
style.css
p.uppercase{
text-transform: uppercase;
}
p.lowercase{
text-transform: lowercase;
}
p.capitalize{
text-transform: capitalize;
}
-
Paragraf Girintisi (text-intent:)
Paragraflarda ilk kelimenin satırın içerisinden başlatılmasıdır. text-intent: özelliğine pixel (px) cinsinden bir değer atanabilir. Bu atanan pixel değeri kadar paragrafın ilk kelimesi içeriden başlar. Örnekte paragraf <p> etiketine 50px’lik bir değer verilerek, ilk kelimenin 50px içeriden başlaması sağlanmıştır.
style.css
p.text-intent{
text-indent: 50px;
}
-
Harfler Arası Mesafe (letter-spacing:)
Atandığı etiket içindeki kelimelerdeki her bir harfin arasındaki mesafeyi girilen pixel (px) değeri kadar açar, eğer değer – (negatif) olarak girilirse harfler birbirine yaklaşacaktır. Değer haddinden fazlaca negatif olarak verilirse sanki metni tersten yazmış gibi görürsünüz.
style.css
p.letter-spacing {
letter-spacing: 15px;
}
/* Değer - (negatif) olarak verilirse harfler yakınlaşır.*/
-
Satırlar Arası Mesafe (line-height:)
Line-height değeri default olarak 1’dir. İki satır arasındaki mesafeyi açmak 1’den büyük değer alması anlamına gelir. HTML üzerinden anlatmak gerekirse; her bir </br> etiketi ile bir satır arası verilir. Arka arkaya 5 tane </br> etiketinin verilmesi bize 5 satır arası yaratırken CSS’de bunu line-height özelliğine 5 değeri vererek sağlarız. Verilen rakamlar ondalıklı olabileceği gibi 0 ile 1 arasında verilecek ondalık değerler satır aralarını birbirine yaklaştırır. Değerin 0 olması bir önceki satırla aynı hizaya gelmesi demektir.
style.css
p.line-height{
line-height: 2;
}
-
Kelimeler Arası Mesafe (word-spacing:)
Her bir kelime arasındaki mesafeyi pixel (px) cinsinden açar veya yakınlaştırır. Ondalık değer kullanılamaz, – değer verilmesi halinde kelimeler içi içe girebilir.
style.css
p.word-spacing{
word-spacing: 10px;
}
-
Yazı Gölgelendirme (text-shadow:)
Genelde başlıklarda kullanılması tercih edilir. Normal bir paragraf içinde kullanılması ufak olan yazıların okunmasını güçleştirebilir. text-shadow: özelliği pixel (px) cinsinden iki adet değer alır. Birinci aldığı değer X eksenini, ikinci aldığı değer ise Y eksenini ifade eder.
style.css
h1.text-shadow{
text-shadow: 5px -5px;
}
Bir önceki BoxModel ve Outline Stil Özellikleri konulu yazıma ulaşmak için tıklayınız.
Son Yorumlar