Turkcell | Geleceği Yazanlar

201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

CSS Metin İşlemleri

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : css-metin metin-islemleri metin-rengi text-align text-decoration uppercase lowecase case indentation align-center web-programlama

Metinlerin özellikleri CSS kullanılarak değiştirilebilir.

 

Metin rengi (Text Color)

Renk özelliği, bir metnin rengini atamak için kullanılır. CSS'te renk atama,

  • bir HEX değerle: "#ff0ee0",
  • bir RGB (red-green-blue, kırmızı-yeşil-mavi) değerle: "rgb(200,10,50)",
  • ya da bir renk adı belirtilerek gerçekleştirilebilir.

Bir sayfa için varsayılan renk, body seçicisi ile tanımlanır.

body {
    color: green;
}

h1 {
    color: #00ffec;
}

h2 {
    color: rgb(255,110,210);
}
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                color: pink;
            }

        h1 {
            color: #0effcd;
        }

        p.ex {
            color: rgb(110,220,155);
        }

        </style>
    </head>

    <body>
        <h1>ILGINC BIR RENK, HEXADECIMAL ATANMIS</h1>
        <p>RGB KARMASI BIR RENK</p>
        <p class="ex">BAKALIM HANGI RENK</p>
       
    </body>
</html>

 

Metnin yerleştirilmesi

Text-align özelliği, metnin yatay yerleşimi için kullanılır. Metin ortalanabilir (centered), sola ya da sağa yanaşık olabilir veya ayrılan yere göre kendini ayarlayabilir.  

h1 {
    text-align: center;
}

p.date {
    text-align: left;
}

p.main {
    text-align: justify;
}
<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                text-align: center;
            }

        p.date {
            text-align: left;
        }

        p.main {
            text-align: justify;
        }

        </style>
    </head>

    <body>
        <h1>CSS METIN YERLESTIRME</h1>
        <p class="date">EYLUL, 2014</p>
        <p class="main">YUMUSAK YONETILEN ULKENIN HALKI YALINDIR
        SERT YONETIM HALKI KURNAZLASTIRIR</p>
        <p><b>Not</b> KONFUCYUS'UN BU UNLU SOZU BUGUN DE GECERLI DEGIL MI?'</p>
    </body>
</html>

 

Metin dekorasyonu

Text-decoration özelliği, metin içine bir dekorasyon ekleme ya da metinden bir dekorasyonu uzaklaştırma amacıyla kullanılır. text-decoration özelliği, genelde tasarım amacıyla bağlantılardan alt çizgileri uzaklaştırmak için kullanılır.

a {
    text-decoration: none;
}

Ayrıca metni dekore etmek için de kullanılabilir:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
<!DOCTYPE html>
<html>
    <head>
        <style>

        h1 {
            text-decoration: overline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: underline;
        }
        </style>
    </head>

    <body>

        <h1>MOBIL TEKNOLOJILER</h1>
        <h2>iOS</h2>
        <h3>iPad ile uygulama geliştirme</h3>
    </body>

</html>

 

Metin dönüşümü

Metin dönüşüm (text-transform) özelliği, metin içinde büyük harf ve küçük harf karakterleri belirlemek için kullanılır. Ya karakterler büyük harfe veya küçük harfe çevrilir ya da her kelimenin ilk harfi büyük harf yapılır.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}


p.capitalize {
    text-transform: capitalize;
}
<!DOCTYPE html>
<html>
    <head>
        <style>
        p.uppercase {
           text-transform: uppercase;
        }

        p.lowercase {
            text-transform: lowercase;
        }

        p.capitalize {
            text-transform: capitalize;
        }
        </style>
    </head>

    <body>
        <p class="uppercase">ankara</p>
        <p class="lowercase">ANKARA</p>
        <p class="capitalize">ankara</p>
    </body>
</html>

 

Metin girintileme (Text Indentation)

Text-indent özelliği, metnin ilk satırının ne kadar içeriden yazılacağını belirler.

p {
    text-indent: 40px;
}
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-indent: 50px;
            }

        </style>

    </head>

    <body>

        <p>Stefan Zweig. Musevi kökenli Avusturyalı yazar. 20. yüzyıl başında </br>Avrupa entelektuel dünyasının önemli isimlerinden. Avusturya aşığı bu büyük edebiyatçı Hitler zulmünden kaçtı; </br>Güney Amerika'ya sığındı. 1. Dünya Savaşı sona ermeden intihar etti.</p>

    </body>

</html>

 

Metin özellikleri

Özellik Anlamı
color Metnin rengini atama işlemini gerçekleştirir.
direction Metnin yazma yönünü belirler.
letter-spacing Metindeki karakterler arasındaki boşlukları artırır ya da azaltır.
line-height

Satır yüksekliğini atama işlemini gerçekleştirir.

text-align Metnin yatay konumlandırılmasını belirler.
text-decoration Metne eklenecek dekorasyonu belirler.

text-indent

Bir metin bloğundaki ilk satırın ne kadar içerden başlayacağını belirler.

text-shadow

Metne eklenecek gölge etkisini belirler.

text-transform

Metnin büyük-küçük harf durumunu belirler.

vertical-align

Bir elemanın düşey yerleşimini belirler.

white-space

Eleman içinde alfabe dışı karakterlerin nasıl işlem göreceğini belirler.

word-spacing Bir metinde kelimeler arasında bulunan boşluk sayısını artırır ya da azaltır.