CSS ile hazırlamış olduğunuz metinlere birçok biçim özelliği verebilirsiniz. Metin rengi değiştirme, metin hizalanması, karakterler arası aralık belirlenmesi gibi bir çok özelliğin nasıl değiştirileceğini yazının devamında bulabilirsiniz.

CSS color Özelliği

“color” özelliği metnin rengini ayarlamak için kullanılır. Renk verme şu şekilde belirtilir:

Renk Adı – ‘red’
bir HEX değeri – gibi ‘#ff0000’
bir RGB değeri – ‘rgb (255,0,0)’ gibi

CSS Renklerle Çalışma Konusuna tıklayarak detaylı bilgi alabilirsiniz.

Bir sayfa için varsayılan metin rengi, body seçicisinde tanımlanır. Aşağıdaki örneği inceleyin.

CSS text-align Özelliği

text-align özelliği, bir metnin yatay hizalamasını ayarlamak için kullanılır.

Bir metin sola veya sağa hizalanabilir, ortalanmış veya iki yana hizalı olabilir.

Aşağıdaki örnek, merkez hizalanmış ve sol ve sağ hizalı metni gösterir (metin yönü soldan sağa ise sol hizalama varsayılan, metin yönü sağdan sola ise sağa hizalama varsayılan değerdir):


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

h2 {
    text-align: left;
}

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

<h1>Başlık 1 (orta)</h1>
<h2>Başlık 2 (sol)</h2>
<h3>Başlık 3 (sağ)</h3>

<p>Yukarıdaki üç başlık, orta, sol ve sağ hizalıdır.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-align: center;

}

h2 {

text-align: left;

}

h3 {

text-align: right;

}

</style>

</head>

<body>

<h1>Başlık 1 (orta)</h1>

<h2>Başlık 2 (sol)</h2>

<h3>Başlık 3 (sağ)</h3>

<p>Yukarıdaki üç başlık, orta, sol ve sağ hizalıdır.</p>

</body>

</html>

text-align özelliği ‘justify‘ olarak ayarlandığında, her satır genişler ve her satır eşit genişlikte olur ve sol ve sağ kenar boşlukları düzdür (dergi ve gazetelerde olduğu gibi).


<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    padding: 10px;
    width: 200px;
    height: 200px;
    text-align: justify;
}
</style>
</head>
<body>

<h1>text-align:justify Örneği:</h1>

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "</p>

<div>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 10px;

width: 200px;

height: 200px;

text-align: justify;

}

</style>

</head>

<body>

<h1>text-align:justify Örneği:</h1>

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "</p>

<div>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</body>

</html>

CSS text-decoration Özelliği:

text-decoration: none; özelliği genellikle menülerde metinden alt yazıların kaldırılması için kullanılır.

Örnek:


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

h2 {
    text-decoration: line-through;
}

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

<h1>BAŞLIK 1</h1>
<h2>BAŞLIK 2</h2>
<h3>BAŞLIK 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ŞLIK 1</h1>

<h2>BAŞLIK 2</h2>

<h3>BAŞLIK 3</h3>

</body>

</html>

CSS text-transform Özelliği:

text-transform özelliği, bir metinde büyük ve küçük harfleri belirtmek için kullanılır.

Tüm harfleri büyük veya küçük harflere dönüştürmek için kullanılabilir veya her kelimenin ilk harfini büyük harfle yazabilirsiniz.


<!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">Bu örnek bir metindir.</p>
<p class="lowercase">Bu örnek bir metindir.</p>
<p class="capitalize">Bu örnek bir metindir.</p>

</body>
</html>

<!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">Bu örnek bir metindir.</p>

<p class="lowercase">Bu örnek bir metindir.</p>

<p class="capitalize">Bu örnek bir metindir.</p>

</body>

</html>

CSS text-indent Özelliği:

text-indent özelliği, metnin ilk satırının girintisini belirtmek için kullanılır.

CSS letter-spacing Özelliği:

letter-spacing özelliği,metindeki karakterlerin arasındaki boşluğu belirtmek için kullanılır.

Aşağıdaki örnek, karakterler arasındaki boşluğun nasıl artırılacağını veya azaltacağını gösterir.


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

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

<h1>Bu ilk Başlık</h1>
<h2>Bu ikinci Başlık</h2>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

letter-spacing: 3px;

}

h2 {

letter-spacing: -3px;

}

</style>

</head>

<body>

<h1>Bu ilk Başlık</h1>

<h2>Bu ikinci Başlık</h2>

</body>

</html>

CSS line-height Özelliği:

line-height özelliği satırlar arasındaki yüksekliği belirlemek için kullanılır. Ayrıca bir div içindeki metni dikeyde ortalamak içinde kullanılabilir.

Aşağıdaki örnekte line-height özelliğinin kullanımı verilmiştir.


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

p.big {
    line-height: 1.8;
}
div{
	width:400px;
    height:80px;
    border:1px solid black;
    text-align:center;
    line-height:80px;
}

</style>
</head>
<body>

<p>
Bu standart bir paragraf.<br>
Çoğu tarayıcıda varsayılan satır yüksekliği yaklaşık% 110 ila% 120'dir.<br>
</p>

<p class="small">
Bu, daha küçük bir line-height özelliğine sahip bir paragraftır.<br>
Bu, daha küçük bir line-height özelliğine sahip bir paragraftır.<br>
</p>

<p class="big">
Bu, daha büyük bir line-height özelliğine sahip bir paragraftır.<br>
Bu, daha büyük bir line-height özelliğine sahip bir paragraftır.<br>
</p>

<div>
	Bu yazı line-height özelliği ile dikeyde ortalandı.
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.small {

line-height: 0.7;

}

p.big {

line-height: 1.8;

}

div{

width:400px;

height:80px;

border:1px solid black;

text-align:center;

line-height:80px;

}

</style>

</head>

<body>

<p>

Bu standart bir paragraf.<br>

Çoğu tarayıcıda varsayılan satır yüksekliği yaklaşık% 110 ila% 120'dir.<br>

</p>

Bu, daha küçük bir line-height özelliğine sahip bir paragraftır.<br>

</p>

Bu, daha büyük bir line-height özelliğine sahip bir paragraftır.<br>

</p>

<div>

Bu yazı line-height özelliği ile dikeyde ortalandı.

</div>

</body>

</html>

CSS direction Özelliği:

direction özelliği, bir öğenin metin yönünü değiştirmek için kullanılır.

Örnek:


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

<p>www.tasarimkodlama.com</p>
<p class="ex1"><bdo dir="rtl">www.tasarimkodlama.com</bdo></p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

direction: rtl;

}

</style>

</head>

<body>

<p>www.tasarimkodlama.com</p>

<p class="ex1"><bdo dir="rtl">www.tasarimkodlama.com</bdo></p>

</body>

</html>

CSS word-spacing Özelliği:

word-spacing özelliği, metindeki sözcükler arasındaki boşluğu belirtmek için kullanılır.

Aşağıdaki örnek, kelimeler arasındaki boşluğun nasıl artırılacağını veya azaltacağını gösterir.


Result Size: 737 x 602

#
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
    word-spacing: 10px;
}

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

<p id="p1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h1>
<p id="p2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h2>

</body>
</html>

Result Size: 737 x 602

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {

word-spacing: 10px;

}

#p2 {

word-spacing: -5px;

}

</style>

</head>

<body>

<p id="p1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h1>

<p id="p2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h2>

</body>

</html>

CSS text-shadow Özelliği

text-shadow özelliği metne gölge ekler.

Aşağıdaki örnek kırmızı renkli bir yazıda, yatay gölgenin (3px) konumunu, dikey gölgenin (2px) konumunu ve gölgenin rengini (siyah) belirtir:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 3px 2px black;
    color:red;
}
</style>
</head>
<body>

<h1>www.tasarimkodlama.com</h1>

<p>CSS Dersleri - Metin Biçimlendirme Özellikleri</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 3px 2px black;

color:red;

}

</style>

</head>

<body>

<h1>www.tasarimkodlama.com</h1>

<p>CSS Dersleri - Metin Biçimlendirme Özellikleri</p>

</body>

</html>

CSS Text Özellikleri (Tümü)

Özellik	Açıklama
color	Metin rengini ayarlar
direction	Metin yönünü ayarlar
letter-spacing	Metindeki karakterler arasındaki boşluk ayarlanır.
line-height	Satır yüksekliği ayarlanır.
text-align	Metni yatayda hizalamak için kullanılır.
text-decoration	Metni süslemek için kullanılır.
text-indent	Metnin ilk satır girintisini ayarlar.
text-shadow	Metne gölge efekti verir.
text-transform	Metnin büyük/küçük harf kullanımını ayarlar.
text-overflow	Gösterilmeyen taşan içeriğin kullanıcıya nasıl bildirilmesi gerektiğini belirtir.
unicode-bidi	Aynı belgede birden çok dili desteklemek için metnin geçersiz kılınması gerekip gerekmediğini belirlemek için yön özelliği ile birlikte kullanılır.
vertical-align	Bir öğenin dikey hizalamasını ayarlar.
white-space	Bir öğenin içindeki beyaz boşluğun nasıl ele alınacağını belirtir
word-spacing	Kelimeler arası boşluk ayarlanır.

CSS Metin (Text) Biçimlendirme

CSS color Özelliği

CSS text-align Özelliği

CSS text-decoration Özelliği:

CSS text-transform Özelliği:

CSS text-indent Özelliği:

CSS letter-spacing Özelliği:

CSS line-height Özelliği:

CSS direction Özelliği:

CSS word-spacing Özelliği:

CSS text-shadow Özelliği

CSS Text Özellikleri (Tümü)

2 Yorum

İptal Et

CSS color Özelliği

CSS text-align Özelliği

CSS text-decoration Özelliği:

CSS text-transform Özelliği:

CSS text-indent Özelliği:

CSS letter-spacing Özelliği:

CSS line-height Özelliği:

CSS direction Özelliği:

CSS word-spacing Özelliği:

CSS text-shadow Özelliği

CSS Text Özellikleri (Tümü)

Bunları da beğenebilirsiniz

2 Yorum