Bu yazımda Css’te text (metin) özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz. Text özellikleri ile yazının boyutunu, tipini, kalınlığını, stilini vb.. düzenliyebiliriz. Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.
CSS COLOR ÖZELLİĞİ
Bu özellik ile yazılara istediğimiz renkleri verebiliriz. Dilerseniz direk renk adını verebileceğiniz gibi renklerin rgb ve hex kodlarınıda kullanabilirsiniz. Renk kodlarıyla ilgili daha fazla bilgi edinmek isterseniz Tüm Renk İsimleri ve Renk Kodları (Html, Css, Hex, Rgb) yazımı inceleyebilirsiniz.
Örneğimizde 3 adet <p> etiketi tanımlayıp color değerlerini 3 farklı şekilde verelim ve tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 |
<p style="color:red;">color:red;</p> <p style="color:rgb(67,46,211);">color:rgb(67,46,211);</p> <p style="color:#808080;">color:#808080;</p> |
CSS TEXT ALİGN ÖZELLİĞİ
Bu özellik ile yazıları yatayda hizalayabiliriz. Yani yazının sağda, solda, ortada veya sağa ve sola dayalı şekilde olmasını sağlayabiliriz.
text-align özelliğine şu değerleri verebiliriz;
► right
► left
► center
► justify
► end
► start
Örneğimizde 3 adet <p> etiketi tanımlayalım, text-align özelliğine right, left, center değerleri verelim ve tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 |
<p style="text-align:right;">text-align:right;</p> <p style="text-align:left;">text-align:left;</p> <p style="text-align:center;">text-align:center;</p> |
Şimdi de 2 <div> etiketi tanımlayalım, text-align özelliğine left ve justify değerleri verelim ve tarayıcıdaki durumlarını inceleyelim.
Gördüğünüz gibi justify değeri verildiğinde yazımız sağa ve sola yaslanmış hale geliyor.
|
1 2 3 4 5 |
<div style="text-align:left;">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</div> <div style="text-align:justify;">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</div> |
Önemli Block etiketlerde hizalama işlemlerini yapabilirken, inline etiketlerde hizalama işlemleri işlevsel değildir. Inline etiketlerde hizalama işlemlerini yapmak için bu etiketleri bir block etiket içerisine almamız gerekiyor. Çünkü hizalama yapabilmek için etiketin tüm satırı kaplaması gerekiyor.
CSS TEXT DECORATİON ÖZELLİĞİ
Bu özellik ile yazıların altını, üstünü, üzerini çizebiliriz yada bu etkileri kaldırabiliriz.
text-decoration özelliğine şu değerleri verebiliriz;
► underline : yazının altını çizer.
► line-through : yazının üzerini çizer.
► overline : yazının üstünü çizer.
► none : varolan etkileri kaldırır.
Örneğimizde 4 adet <p> etiketi tanımlayıp text-decoration değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 |
<p style="text-decoration:underline;">text-decoration:underline;</p> <p style="text-decoration:line-through;">text-decoration:line-through;</p> <p style="text-decoration:overline;">text-decoration:overline;</p> <p style="text-decoration:none;">text-decoration:none;</p> |
CSS TEXT TRANSFORM ÖZELLİĞİ
Bu özellik ile yazılarda küçük harfleri büyük harfe, büyük harfleri küçük harfe dönüştürebiliriz. Aynı zamanda sadece ilk harfleri büyük diğerleri küçük olacak şekilde kelime ve cümlelerde oluşturabiliriz.
text-transform özelliğine şu değerleri verebiliriz;
► uppercase : Küçük harfleri büyük harfe dönüştürür.
► lowercase : Büyük harfleri küçük harfe dönüştürür.
► capitalize : İlk harf büyük diğer harfler küçük olacak şekilde dönüştürür.
Örneğimizde 3 adet <p> etiketi tanımlayıp text-transform değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 |
<p style="text-transform:uppercase;">hello world! (uppercase)</p> <p style="text-transform:lowercase;">HELLO WORLD! (lowercase)</p> <p style="text-transform:capitalize;">hello world! (capitalize)</p> |
CSS TEXT İNDENT ÖZELLİĞİ
Bu özellik ile yazının ilk satırının daha içerden başlamasını sağlayabiliriz. Değeri px olarak verebiliriz.
Örneğin bir <p> etiketi tanımlayalım ve belli bir genişlik değeri verelim.
text-indent uygulanmış ve uygulanmamış durumlarını tarayıcıda inceleyelim.
|
1 2 3 4 5 |
<p> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</p> <p style="text-indent:60px;"> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</p> |
CSS LETTER SPACİNG ÖZELLİĞİ
Bu özellik ile yazının karakterleri arasındaki boşluğu artırabiliriz. Negatif değerler verdiğimizde ise aradaki boşluklar azalır.
Örneğin 3 <p> etiketi tanımlayalım ve ilkinde herhangi bir işlem yapmayalım.
İkincisinde karakterler arasına 10px boşluk verelim.
Üçüncüsünde ise -2px ile aradaki boşluğu azaltıp durumlarını tarayıcıda inceleyelim.
|
1 2 3 4 5 6 7 |
<p>Tincidunt integer eu augue augue nunc elit dolor</p> <p style="letter-spacing:10px;">Tincidunt integer eu augue augue nunc elit dolor</p> <p style="letter-spacing:-2px;">Tincidunt integer eu augue augue nunc elit dolor</p> |
CSS WORD SPACİNG ÖZELLİĞİ
Bu özellik ile yazının kelimeleri arasındaki boşluğu artırabiliriz. Negatif değerler verdiğimizde ise aradaki boşluklar azalır.
Örneğin 3 <p> etiketi tanımlayalım ve ilkinde herhangi bir işlem yapmayalım.
İkincisinde kelimeler arasına 10px boşluk verelim.
Üçüncüsünde ise -5px ile aradaki boşluğu azaltıp durumlarını tarayıcıda inceleyelim.
|
1 2 3 4 5 6 7 |
<p>Tincidunt integer.</p> <p style="word-spacing:10px;">Tincidunt integer.</p> <p style="word-spacing:-5px;">Tincidunt integer.</p> |
CSS LİNE HEİGHT ÖZELLİĞİ
Bu özellik ile bir satırın diğer satırlar ile arasındaki mesafeyi yani satırın yüksekliğini ayarlayabiliriz.
Örneğin 3 <p> etiketi tanımlayalım ve birincisinde satır yüksekliğini 16px verelim.
İkincisinde satır yüksekliğini 32px verelim.
Üçüncüsünde ise 8px verelim ve durumlarını tarayıcıda inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 |
<p style="line-height:16px;">Tincidunt integer.<br />Tincidunt integer.<br />Tincidunt integer.</p> <hr /> <p style="line-height:32px;">Tincidunt integer.<br />Tincidunt integer.<br />Tincidunt integer.</p> <hr /> <p style="line-height:8px;">Tincidunt integer.<br />Tincidunt integer.<br />Tincidunt integer.</p> |
CSS DİRECTİON ÖZELLİĞİ
Bu özellik ile bir yazının yönünü değiştirebiliriz.
direction özelliğine şu değerleri verebiliriz;
► ltr : soldan sağa
► rtl : sağdan sola
Örneğimizde 2 adet <p> etiketi tanımlayıp direction değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 |
<p style="direction:ltr;"> <bdo>Hello World!</bdo> </p> <p style="direction:rtl;"> <bdo>Hello World!</bdo> </p> |
CSS WHİTE SPACE ÖZELLİĞİ
Bu özellik ile yazılardaki boşlukların nasıl değerlendirileceğini ayarlıyabiliriz.
white-space özelliğine şu değerleri verebiliriz;
► normal
► nowrap
► pre
► pre-line
► pre-wrap
Örneğimizde 5 adet <p> etiketi tanımlayıp belirli bir genişlik değeri verelim.
white-space değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<p style="white-space:normal;"> Tincidunt integer eu augue augue nunc elit dolor. Tincidunt integer eu augue augue nunc elit dolor. </p> <p style="white-space:nowrap;"> Tincidunt integer eu augue augue nunc elit dolor. Tincidunt integer eu augue augue nunc elit dolor. </p> <p style="white-space:pre;"> Tincidunt integer eu augue augue nunc elit dolor. Tincidunt integer eu augue augue nunc elit dolor. </p> <p style="white-space:pre-line;"> Tincidunt integer eu augue augue nunc elit dolor. Tincidunt integer eu augue augue nunc elit dolor. </p> <p style="white-space:pre-wrap;"> Tincidunt integer eu augue augue nunc elit dolor. Tincidunt integer eu augue augue nunc elit dolor. </p> |
CSS TEXT OVERFLOW ÖZELLİĞİ
Bu özellik ile yazılarımızın sığmadığı durumlarda yazının devamının olduğunu belirtmek için “…” (üç nokta) koyabiliriz.
text-overflow özelliğine şu değerleri verebiliriz;
► clip : varsayılan olarak gelen değer.
► ellipsis : yazının taştığını belirten “…” (üç nokta) koyar.
Örneğimizde 2 adet <p> etiketi tanımlayalım ve text-overflow değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
Burda dikkat etmemiz gereken konu, text-overflow kullanırken onunla beraber şu iki css kodunuda yazmamız gerekiyor.
|
1 2 3 4 5 6 7 8 |
white-space: nowrap; overflow: hidden; <p style="white-space: nowrap; overflow: hidden; text-overflow: clip;">Tincidunt integer eu augue augue nunc elit dolor</p> <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Tincidunt integer eu augue augue nunc elit dolor</p> |
CSS WORD WRAP ÖZELLİĞİ
Bu özellik ile bulunduğu alana sığmayacak kadar uzun olan kelimeleri satır sonunda bölebiliriz.
word-wrap özelliğine şu değerleri verebiliriz;
► normal : Varsayılan olarak gelen değer.
► break-word : Sığmayan kelimeyi böler.
Örneğimizde 2 adet <div> etiketi tanımlayalım ve içerisine sığmayacak şekilde bir kelime yazalım.
İlk örnekte kelime satır sonunda bölünürken, ikinci örnekte bölünmeyip taşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> div { width: 160px; height: 100px; border:2px solid cornflowerblue; margin-bottom:20px; padding:10px; } #box1{ word-wrap:break-word; } #box2{ word-wrap:normal; } </style> <div id="box1">Bu cümle içerisinde çok uzun bir kelimeeeeeeeeeeeeeeeeeeeeeeeeeeee var.</div> <div id="box2">Bu cümle içerisinde çok uzun bir kelimeeeeeeeeeeeeeeeeeeeeeeeeeeee var.</div> |
CSS WORD BREAK ÖZELLİĞİ
Bu özellik ile satır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölebiliriz.
word-break özelliğine şu değerleri verebiliriz;
► keep-all : Varsayılan olarak gelen değer.Satır sonundaki kelimeler bölünmez.
► break-word : Satır sonundaki sığmayan kelimeler bölünür.
Örneğimizde 2 adet <div> etiketi tanımlayalım ve içerisine birkaç cümle yazalım.
İlk örnekte satır sonundaki kelimeler durumunu korurken, ikinci örnekte satır sonlarındaki kelimeler bölünecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> div { width: 160px; height: 100px; border:2px solid cornflowerblue; margin-bottom:20px; } #box1{ word-break:keep-all; } #box2{ word-break:break-all; } </style> <div id="box1">Bu cümle içerisinde kelimeler bölünmez.Bu cümle içerisinde kelimeler bölünmez.</div> <div id="box2">Bu cümle içerisinde kelimeler satır sonunda bölünür.Bu cümle içerisinde kelimeler satır sonunda bölünür.</div> |
CSS WRİTİNG MODE ÖZELLİĞİ
Bu özellik ile yazılarımızın dikey bir hale dönüşmesini sağlayabiliriz.
writing-mode özelliğine şu değerleri verebiliriz;
► horizontal-tb : Yazı yatay halde olur.
► vertical-lr : Yazı dikey halde olur.
► vertical-rl : Yazı dikey halde olur.
Örneğimizde 3 adet <p> etiketi tanımlayalım ve writing-mode değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> #p1 { writing-mode:horizontal-tb; } #p2 { writing-mode:vertical-lr; } #p3 { writing-mode:vertical-rl; } </style> <p id="p1">horizontal-tb</p> <p id="p2">vertical-lr</p> <p id="p3">vertical-rl</p> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
 Özellikleri ve Kullanımı){kind=link}