CSS Metin İşlemleri

Eski zamanlardan beri varlığını koruyan hat sanatını bilirsiniz belki. Hat yazı ve çizgi anlamına gelmektedir. Kökleri oldukça eski zamanlara dayanır. Estetik ve görsel kuralların göz önünde bulundurulup, yazı ve çizgilerin kullanılarak yapıldığı yazı yazma sanatıdır. Yazıyı daha gösterişli kılmak, görsel açıdan zevke uygun kılmak maksatlı yapılır. Matbaa’nın gelişimiyle eski değerini kaybetmiş olsa da günümüz dünyasına şekil değiştirerek kendini devam ettirmiş, varlığı ile halen etkisinin ne denli büyük olduğunu göstermiştir. Adı artık hat olmasada biz buna web dünyasında web tipografisi adı veriyoruz. Tipografi, harf ve semboller kullanılarak yaratılan görsel tasarımlardır. Yazıları boyut, font ve boşlukları bakımından düzenleme ve tasarlama sanatıdır. Tipografi ile insanların ilgisini çekmeyen bir şeyi birden daha dikkat çekici ve akıcı yapabilirsiniz

Web Tipografisi alanı CSS ile birlikte zamanla önemli ölçüde büyüdü. Popülaritenin yükselmesi için birkaç farklı sebep olsa da yaygın olarak kabul edilen bir sebep, kendi web yazı tiplerini bir web sitesinde görmek, internet sayfalarındaki en değerli unsur olan metinsel içeriği estetik ve görsel açıdan daha fazla ön plana çıkarmaktır.

Geçmişte, bir web sitesinde kullanabileceğimiz az sayıda yazı karakteriyle sınırlıydık. Bu yazı biçimleri, bilgisayarlarda en sık yüklenen yazı tipleri olduğundan ekranda düzgün bir şekilde görüntülenme olasılığı en yüksekti. Bir font bilgisayarda yüklü değilse, web sitesinde de görüntülenmez. Şimdi, font servislerini kullanarak, web sitesine eklediğimiz yazı tipleri de dahil olmak üzere, seçilebilecek çok daha geniş bir yazı tipi paletine sahip olabiliyoruz.

Yazı tiplerini yerleştirme özelliği sayısız yeni yazı biçimine erişebilmemizi sağlarken, tipografinin temel ilkelerini bilmek de bizim için önemlidir. Bu derste bu temel ilkelerden bazılarını, HTML ve CSS‘yi kullanarak web sayfalarımıza nasıl uygulayacağımıza bir göz atacağız.

color : Metne Renk Ekleme

Genellikle, bir web sitesi oluştururken yapacağımız ilk kararlardan biri, kullanılacak birincil yazı tipi ve metin rengini seçmektir. Değiştirilebilecek diğer bazı özellikler (boyut, vurgu vb.) olsa da, yazı tipi ve metin rengi genellikle bir sayfanın görünümü ve okunurluğu üzerinde en büyük etkiye sahiptir. Tarayıcı varsayılanlarından kurtulmak ve kendi yazı karakterini ve metin rengini kullanmak derhal sayfanın tonunu ayarlamaya başlar.

color Özelliği metne rengini vermek için kullanılır. Bu özellik bir renk değeri kabul eder. Birçok farklı formatta, onaltılık değerleri ve RGB, RGBa, HSL ve HSLa değerlerini içerir. En fazla kontrolü en az çaba sarf ettikleri için onaltılık değerler en yaygın olanlardır.

Bir sayfada öğenin içindeki tüm metnin rengini değiştirmek için gereken CSS’e bir örnekle inceleyelim;


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {
        color: red;
    }
</style>
</head>
<body>

    <h1>CSS Dersleri Metin İşlemleri</h1>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: red;

}

</style>

</head>

<body>

<h1>CSS Dersleri Metin İşlemleri</h1>

</body>

</html>

Bir sayfanın varsayılan metin rengi <body> seçicisinde tanımlanır.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    body{
        color : cornflowerblue;
    }
    h1 {
        color: red;
    }
</style>
</head>
<body>

<h1>CSS Dersleri Metin İşlemleri</h1>
<p>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.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body{

color : cornflowerblue;

}

h1 {

color: red;

}

</style>

</head>

<body>

<h1>CSS Dersleri Metin İşlemleri</h1>

<p>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.</p>

</body>

</html>

text-align : Metin Hizalama

Metni yatayda hizalama, sayfada bir ritim ve akış oluşturmanın önemli bir parçasıdır; bunu text-align özelliği kullanarak yapıyoruz . text-align Özelliği beş farklı değer alabilmektedir.

center : Ortala
left : Sola hizala
right : Sağa hizala
justify : Her iki yana yasla
inherit : Üst kapsayıcıdan devral.

Örnek;

Aşağıdaki CSS ile başlıklar farklı yönlerde hizalanmıştır.


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

    h2 {
        text-align: left;
    }

    h3 {
        text-align: right;
    }
    p{
        text-align: justify;
    }
</style>
</head>
<body>

    <h1>Ortalanmış Başlık</h1>
    <h2>Sola Hizalı Başlık</h2>
    <h3>Sağa Hizalı Başlık</h3>
    <p>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.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-align: center;

}

h2 {

text-align: left;

}

h3 {

text-align: right;

}

text-align: justify;

}

</style>

</head>

<body>

<h1>Ortalanmış Başlık</h1>

<h2>Sola Hizalı Başlık</h2>

<h3>Sağa Hizalı Başlık</h3>

<p>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.</p>

</body>

</html>

text-decoration : Metin Dekorasyonu

text-decoration Özelliği metinden süslemeleri kaldırmak için kullanılır. Alabileceği değerler;

overline : Metnin üstünü çiz.
line-through : Metnin ortasını çiz
underline : Metnin altını çiz
none : Hiç bir dekorasyon uygulanmaz

Linkler HTML standardı gereği altı çizgili olurlar. Aşağıdaki örnek ile bir linkin altı çizgili olmasını istemiyoruz.


<!DOCTYPE html>
<html>
<head>
<style>
    a {
        text-decoration: none;
    }
</style>
</head>
<body>

    <p>CSS Derslerini <a href="https://www.yazilimbilisim.net">yazilimbilisim.net</a> adersinden bulabilirsiniz.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

a {

text-decoration: none;

}

</style>

</head>

<body>

<p>CSS Derslerini <a href="https://www.yazilimbilisim.net">yazilimbilisim.net</a> adersinden bulabilirsiniz.</p>

</body>

</html>

Örnek;

Aşağıdaki örnekte text-decoration özelliğinin alabileceği diğer değerlerin metne olan etkilerini görüyorsunuz.


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {
        text-decoration: overline;
    }

    h2 {
        text-decoration: line-through;
    }

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

    <h1>Başlık 1</h1>
    <h2>Başlık 2</h2>
    <h3>Başlık 3</h3>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>Başlık 1</h1>

<h2>Başlık 2</h2>

<h3>Başlık 3</h3>

</body>

</html>

text-transform : Metin Dönüşümü

text-transform Özelliği ile bir metnin harflerinde küçük büyük karakter dönüşümü gerçekleştirebilirsiniz. Alabileceği farklı değerler

uppercase : Metni büyük harlere dönüştürür.
lowercase : Metni küçük harflere dönüştürür.
capitalize : Metnin ilk harflerini büyük karakterine dönüştürür


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

    p.low {
        text-transform: lowercase;
    }

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

    <p class="up">Bu bir paragraftır</p>
    <p class="low">Bu bir paragraftır</p>
    <p class="cap">Bu bir paragraftır</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.up {

text-transform: uppercase;

}

p.low {

text-transform: lowercase;

}

p.cap {

text-transform: capitalize;

}

</style>

</head>

<body>

<p class="up">Bu bir paragraftır</p>

<p class="low">Bu bir paragraftır</p>

<p class="cap">Bu bir paragraftır</p>

</body>

</html>

text-indent : Metin Girintisi

text-indent Özelliği bir elemanın içindeki metnin ilk satırına girinti için kullanılabilir. Bu özellik için, piksel, nokta, yüzdeler ve benzeri dahil tüm ortak uzunluk değerleri kullanılabilir. Pozitif değerler metni içeri doğru, negatif değerler ise metni dışa doğru girer.


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

<p>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.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

text-indent: 50px;

}

</style>

</head>

<body>

</body>

</html>

letter-spacing : Harf Boşluğu

letter-spacing Özelliği kullanarak, bir sayfada harfler arasındaki boşluğu ayarlayabiliriz. Pozitif bir uzunluk değeri harfleri birbirinden uzaklaştıracak, negatif uzunluk değeri ise harfleri birbirine daha yakın çekecektir.


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {
        letter-spacing: 3px;
    }

    h2 {
        letter-spacing: -3px;
    }
</style>
</head>
<body>

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

letter-spacing: 3px;

}

h2 {

letter-spacing: -3px;

}

</style>

</head>

<body>

<h1>Başlık 1</h1>

<h2>Başlık 2</h2>

</body>

</html>

line-heigth : Satır Yüksekliği

line-heigth Özelliği metnin iki satırı arasındaki boşluğu ayarlamanıza olanak verir.


<!DOCTYPE html>
<html>
<head>
<style>
    p.kucukbosluk {
        line-height: 0.7;
    }

    p.buyukbosluk {
        line-height: 1.8;
    }
</style>
</head>
<body>

<p>
Paragraf içi standart satır boşluğu<br>
Paragraf içi standart satır boşluğu<br>
</p>

<p class="kucukbosluk">
Paragraf içi küçük satır boşluğu<br>
Paragraf içi küçük satır boşluğu<br>
</p>

<p class="buyukbosluk">
Paragraf içi büyük satır boşluğu<br>
Paragraf içi büyük satır boşluğu<br>
</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.kucukbosluk {

line-height: 0.7;

}

p.buyukbosluk {

line-height: 1.8;

}

</style>

</head>

<body>

<p>

Paragraf içi standart satır boşluğu<br>

</p>

Paragraf içi küçük satır boşluğu<br>

</p>

Paragraf içi büyük satır boşluğu<br>

</p>

</body>

</html>

word-spacing : Kelime Boşluğu

word-spacing Özelliği kelimeler arası boşluğu ayarlamanızı sağlar. Pozitif değerler kelimeler arası boşluğu açarken, negatif değerler kelimeleri birbirine yaklaştırır.


<!DOCTYPE html>
<html>
<head>
<style>
    h2 {
        word-spacing: 20px;
    }

    h1 {
        word-spacing: -5px;
    }
</style>
</head>
<body>

<h1>Lorem Ipsum Nedir? Neden Kullanılır</h1>
<h2>Lorem Ipsum Nedir? Neden Kullanılır</h2>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

word-spacing: 20px;

}

h1 {

word-spacing: -5px;

}

</style>

</head>

<body>

<h1>Lorem Ipsum Nedir? Neden Kullanılır</h1>

<h2>Lorem Ipsum Nedir? Neden Kullanılır</h2>

</body>

</html>

text-direction : Metin Yönü

text-direction Özelliği ile metnin yönünü değiştirebilirsiniz. Alabileceği iki farklı değer vardır ;

rtl : Sağdan sola
ltr : Soldan sağa

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    p.ex1 {
        direction: rtl;
    }
</style>
</head>
<body>

<p>Soldan sağa paragraf</p>
<p class="ex1"><bdo dir="rtl">Sağdan sola paragraf</bdo></p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

direction: rtl;

}

</style>

</head>

<body>

<p>Soldan sağa paragraf</p>

<p class="ex1"><bdo dir="rtl">Sağdan sola paragraf</bdo></p>

</body>

</html>

text-shadow : Metin Gölgesi

text-shadow Özelliği metne gölge uygulamak için kullanılır. text-shadow dört farklı değer almaktadır. İlk değer gölgenin yatay kaydırmasını, ikinci değer gölgenin dikey kaydırmasını ve opsiyonel olan üçüncü değer gölgenin bulanıklık yarıçapını belirler. Dördüncü ve son değer ise gölge için kullanılan renk değerleri belirtilir.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {
        text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
    }    
</style>
</head>
<body>

<h1>Gölge Efekti</h1>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);

}

</style>

</head>

<body>

<h1>Gölge Efekti</h1>

</body>

</html>

İlgili

Yorum

CSS Hizalama – Yazılım Bilişim Programlama dedi ki:

Kasım 25, 2017, 9:51 pm

[…] : center;” bildirimi kullanılmalıdır. Metin hizalamayla ilgili daha fazla örnek için CSS Metin İşlemleri konusuna bir göz […]

Cevapla
CSS Dersleri – Yazılım Bilişim Programlama dedi ki:

Kasım 24, 2017, 3:10 pm

[…] CSS Metin İşlemleri […]

Cevapla

color : Metne Renk Ekleme

text-align : Metin Hizalama

text-decoration : Metin Dekorasyonu

text-transform : Metin Dönüşümü

text-indent : Metin Girintisi

letter-spacing : Harf Boşluğu

line-heigth : Satır Yüksekliği

word-spacing : Kelime Boşluğu

text-direction : Metin Yönü

text-shadow : Metin Gölgesi

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

CSS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X