CSS Metin Özellikleri

Merhaba Arkadaşlar,
Bu makalede sizlere örnekli bir biçimde CSS Metin özellikleri konusundan bahsedeceğim. Metni sağa veya sola dayalı bir biçime getirme , altını veya üstünü çizme , kelimelerin ilk harfinin veya tüm harflerinin büyük olması gibi özellikleri bu makale içerisinde örnekli bir biçimde görerek daha iyi kavrayacağız.

Tüm işlemlerimizi içerisinde uygulayacağımız iki adet sayfa bize yeterli olacaktır. Bu sayfaların isimlerini ” index.html ” ve ” stil.css ” şeklinde veriyoruz. Her bir uygulamamızı daha düzenli bir görünüm elde etmek adına ayrı ayrı div içerisine alarak işlemlerimize başlıyoruz…

Word-Spacing : Bu özellik cümle içerisinde kullanılan kelimelerin arasında vereceğimiz boşluğun belirlenmesini sağlar. Bu özelliği kullanarak daha geniş görünümlü cümleler oluşturabiliriz. Bu özelliğin kullanımına geçtiğimizde sayfamıza bir adet class ‘ı uyg1 olacak şekilde div oluşturuyoruz ve içerisine ” Word – Spacing uygulaması ile kelimeler arası boşluklar ayarlanıyor ” yazıyoruz.

<div class="uyg1">Word - Spacing uygulaması ile kelimeler arası boşluklar ayarlanıyor..</div>

Bu işlemi yaptıktan sonra index sayfamızı çalıştırdığımızda normal bir yazı göreceğiz. Kelimeler arası boşluğu vermek için stil dosyamızı açıyoruz ve uyg1 isimli class ‘ımıza işlemimizi uyguluyoruz.

.uyg1{word-spacing: 1cm;}

Bu kodu ekledikten sonra kaydedip index sayfamızı çalıştırdığımızda her kelime arasında 1cm lik boşluk oluştuğunu göreceğiz.

Letter – Spacing : Sıradaki özelliğimiz olan Letter-spacing de bir kelime içerisinde bulunan tüm harfler arasında eşit boşluklar yaratmamızı sağlamaktadır. Bu işlemi genellikle yazı içerisinde dikkat çekmek istediğimiz kelimeler de küçük değişiklikler ile yaparak amacımıza ulaşmak için kullanırız. İşlemi gerçekleştirmek için class ‘ı uyg2 olan div ‘imizi oluşturuyoruz ve içerisine ” Letter – Spacing uygulaması ile harfler arası boşluklar ayarlanıyor.. ” yazıyoruz.

<div class="uyg2">Letter - Spacing uygulaması ile harfler arası boşluklar ayarlanıyor..</div>

Daha sonra stil sayfamıza geçiyoruz ve boşlukları ayarlamak için uyg2 class ‘ ı için şu kodları yazıyoruz :

.uyg2{letter-spacing: 0.3cm;}

[/Css]

Böylece bu işlemimizi de tamamlamış oluyoruz..

<strong>Text - Decoration : </strong>Özellikleri anlatmaya devam edeceğiz ama içlerinden en çok kullandığımız olarak gözümüz kapalı bunu gösterebiliriz. Günümüze uygun tasarımlarda özellikle de <a></a> tag 'lerini kullandığımız hemen her yerde bu özelliğe de ihtiyaç duyuyoruz. Çünkü class 'ı bulunmayan bir text 'e link verildiğinde hemen rengi değişiyor ve altı çizili bir yazı haline geliyor. İşte bu alttaki çizgiyi text-decoration kullanarak kaldırabiliyoruz. Sık kullandığımız bu özelliğin içerisinde " underline " , " overline " , " line-through " , " none " , " blink " bileşenleri bulunmaktadır. uyg3 class 'lı bir div açıyoruz ve her bileşeni tek tek görebilmek için içerisine uyg3-1 , uyg3-2 şeklinde class 'ları bulunan div 'ler açarak işlemlerimizi yapıyoruz.



Stil sayfamız içinde şu kodları eklememiz yeterli olacaktır :



.uyg3-1{text-decoration: underline;}
.uyg3-2{text-decoration: overline;}
.uyg3-3{text-decoration: line-through;}
.uyg3-4{text-decoration: none;}
.uyg3-5{text-decoration: blink;}

Vertical – Align : Bu özelliği sayfamız bileşenleri uygun olmayacağı için ayrıntılı olarak açıklayarak geçeceğim. İsminden de anlaşılacağı üzere sayfa içerisinde bulunan text ‘in dikey anlamda ki konumunu belirlemek için kullanılır. Bir kaç değişik çeşidi bulunan özelliği maddelendirerek şu şekilde açıklayabiliriz :

• Baseline : Etrafında bulunan ve kendine göre baz alacağı bileşenin en alt seviyesine konumlanır.
• Sub : Kendisini bir alt simge olarak göstererek bu şekilde hizalanma sağlar.
• Super : Kendisini bir üst simge olarak göstererek bu şekilde hizalanma sağlar.
• Top : Özelliğin uygulandığı satırdaki metinlerin yüksekliğini baz alarak en üst yükseklikten itibaren konumlanır
• Bottom : Özelliğin uygulandığı satırdaki metinlerin yüksekliğini baz alarak en alt yükseklikten itibaren konumlanır.
• Text-Top : Metin yüksekliğini tepe noktası olarak görerek hizalanma yapar.
• Text-Bottom : Metin yüksekliğinin en alt noktasını baz alarak hizalanma yapar.
• Middle : Etrafında bulunan ana elemanın (Örn;Resim) tam orta noktasına göre hizalanır.

Text – Transform : Cümle içerisinde kullanılan kelimelerin tüm harflerini baz alarak işlem yapmamızı sağlamaktadır. Cümlede bulunan kelimelerin hepsinin büyük veya küçük harfler ile yazılacağına ve tüm baş harflerin büyük olmasına karar vermemizi sağlamaktadır. Üç farklı bileşeni vardır. Bunlar ; ” UpperCase ” , ” LowerCase ” , ” Capitalize ” dir. uyg4 isimli class ‘ı olan div ‘imizi oluşturuyoruz ve içerisine ayrı ayrı uyg4-1 , uyg4-2 ve uyg4-3 class ‘lı divler oluşturarak yazılarımızı yazıyoruz.

<div class="uyg4">
     <div class="uyg4-1">UpperCase özelliği kelimedeki tüm harflerin büyük olmasını sağlıyor..</div>
     <div class="uyg4-2">LowerCase özelliği kelimedeki tüm harflerin küçük olmasını sağlıyor..</div>
     <div class="uyg4-3">Capitalize özelliği kelimelerin ilk harflerinin büyük olmasını sağlıyor..</div>
</div>

Daha sonra stil dosyamıza geçerek her div için belirlediğimiz özelliklerimizi işleme sokuyoruz.

.uyg4-1{text-transform: uppercase;}
.uyg4-2{text-transform: lowercase;}
.uyg4-3{text-transform: capitalize;}

Text – Align : Bu özelliğin kazandırıldığı metnin sayfada dikey olarak bakıldığında ki konumunun belirtilmesini sağlamaktadır. Tanıdık gelecek olan ” left ” , ” right ” , ” center ” bileşenlerini kullanacağız. Bunun için uyg5 class ‘lı bir ana div oluşturuyoruz ve içerisine alt div ‘ler oluşturarak index sayfamızı düzenliyoruz.

<div class="uyg5">
     <div class="uyg5-1">Left özelliği kelimenin sola yaslı olmasını sağlıyor..</div>
     <div class="uyg5-2">Right özelliği kelimenin sağa yaslı olmasını sağlıyor..</div>
     <div class="uyg5-3">Center özelliği kelimenin ortalanmasını sağlıyor..</div>
</div>

stil sayfamıza geçerek şu kodları eklememiz gerekmektedir :

.uyg5-1{text-align: left;}
.uyg5-2{text-align: right;}
.uyg5-3{text-align: center;}

Text-Indent : İlk okul dan beri her zaman karşımıza dilekçe gibi önemli veya düz yazılar gibi basit yazılarda dahi paragraf başlarının biraz içeriden başlaması gerektiği söylenmektedir. İşte bu özellik sayesinde vereceğimiz değere göre paragrafımızın ilk satırı biraz daha içeriden başlayacaktır. uyg6 class ‘lı div ‘imizi oluşturarak içerisine uzun bir yazı yazıyoruz.

[soucecode language=”plain”]

[/sourcecode]

Daha sonra da stil sayfamızı düzenliyoruz.

.uyg6{text-indent: 1.2cm;}

Line – Height : Yazdığımız paragraflar uzun olduğu zaman çok iç içe durması nedeniyle kullanıcının okuma oranını düşürür. Kullanacağımız line-height özelliği sayesinde belirleyeceğimiz değerler sayesinde paragraf satırlarının arası biraz daha geniş bir hale getirilerek daha çekici bir görüntü oluşturulabilir. Kullanımı için uyg7 class ‘lı bir div açarak paragrafımızı içerisine oluşturuyoruz.

<div class="uyg7">Line-height özelliği sayesinde<br /> satır araları istediğimiz ölçülerde açılarak<br /> değişik bir paragraf görünümü kazanılabilir..</div>

Daha sonra stil sayfamıza geçerek line-height komutumuzu ekliyoruz.

.uyg7{line-height: 30px;}

Direction : Bu özellik adından da anlaşılacağı gibi metnin yazılış yönünün belirtilmesini sağlar. İki adet bileşeni vardır. ” LTR (Left To Righht) ” & ” RTL (Right To Left) ” şeklindedir. Bunların kullanımı için .uyg8 isimli ana div ‘imiz ve alt div ‘leri oluşturarak içerisine gelecek yazılarımızı yazıyoruz.

<div class="uyg8">
     <div class="uyg8-1">LTR özelliği yazının soldan sağa doğru yazılmasını sağlıyor..</div>
     <div class="uyg8-2">RTL özelliği yazının  sağdan sola doğru yazılmasını sağlıyor..</div>
</div>

stil dosyamızda direction özelliklerini de vererek işlemimizi tamamlıyoruz.

.uyg8-1{direction: ltr;}
.uyg8-2{direction: rtl;}

Artık makalemizin sonuna geldik. Son işlem olarak index ve stil dosyalarımızın tamamlanmış haline bakarsak sırasıyla şu şekilde iki adet görüntü çıkmaktadır :

<html>
    <head>
    <title>Bilgisayaci.Org - CSS Metin Özellikleri Uygulaması</title>
    <link rel="stylesheet" type="text/css" href="stil.css" />
    </head>
    <body>
    <div class="uyg1">Word - Spacing uygulaması ile kelimeler arası boşluklar ayarlanıyor..</div>
    <br />
    <div class="uyg2">Letter - Spacing uygulaması ile harfler arası boşluklar ayarlanıyor..</div>
    <br />
    <div class="uyg3">
        <div class="uyg3-1">Underline özelliği yazının altının çizili olmasını sağlıyor..</div>
        <div class="uyg3-2">Overline özelliği yazının üstünün çizili olmasını sağlıyor..</div>
        <div class="uyg3-3">Line-Through özelliği kelimenin ortasının çizili olmasını sağlıyor..</div>
        <div class="uyg3-4">None özelliği kelimenin herhangi bir yerinde çizgi olmadan görüntülenmesini sağlıyor..</div>
        <div class="uyg3-5">Blink özelliği kelimenin yanıp sönerek belirmesini Sağlıyor</div>
    </div>
    <br />
    <div class="uyg4">
        <div class="uyg4-1">UpperCase özelliği kelimedeki tüm harflerin büyük olmasını sağlıyor..</div>
        <div class="uyg4-2">LowerCase özelliği kelimedeki tüm harflerin küçük olmasını sağlıyor..</div>
        <div class="uyg4-3">Capitalize özelliği kelimelerin ilk harflerinin büyük olmasını sağlıyor..</div>
    </div>
    <br />
    <div class="uyg5">
        <div class="uyg5-1">Left özelliği kelimenin sola yaslı olmasını sağlıyor..</div>
        <div class="uyg5-2">Right özelliği kelimenin sağa yaslı olmasını sağlıyor..</div>
        <div class="uyg5-3">Center özelliği kelimenin ortalanmasını sağlıyor..</div>
    </div>
    <br />
    <div class="uyg6">Text - Indent özelliği sayfadaki paragraf başlarının verilecek değere göre<br /> içeride olmasını sağlamaktadır. Bu özellik sayesinde daha şık görünümlü paragraflar hazırlayarak<br /> kullanıcının dikkatini çekme işlemini başarılı bir şekilde gerçekleştirmiş oluruz.</div>
    <br />
    <div class="uyg7">Line-height özelliği sayesinde<br /> satır araları istediğimiz ölçülerde açılarak<br /> değişik bir paragraf görünümü kazanılabilir..</div>
    <br />
    <div class="uyg8">
        <div class="uyg8-1">LTR özelliği yazının soldan sağa doğru yazılmasını sağlıyor..</div>
        <div class="uyg8-2">RTL özelliği yazının  sağdan sola doğru yazılmasını sağlıyor..</div>
    </div>
    </body>
</html>

.uyg1{word-spacing: 1cm;}

.uyg2{letter-spacing: 0.3cm;}

.uyg3-1{text-decoration: underline;}
.uyg3-2{text-decoration: overline;}
.uyg3-3{text-decoration: line-through;}
.uyg3-4{text-decoration: none;}
.uyg3-5{text-decoration: blink;}

.uyg4-1{text-transform: uppercase;}
.uyg4-2{text-transform: lowercase;}
.uyg4-3{text-transform: capitalize;}

.uyg5-1{text-align: left;}
.uyg5-2{text-align: right;}
.uyg5-3{text-align: center;}

.uyg6{text-indent: 1.2cm;}

.uyg7{line-height: 30px;}

.uyg8-1{direction: ltr;}
.uyg8-2{direction: rtl;}

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 16 No ‘lu Maddeden İndirebilirsiniz..