CSS METİN(TEXT) ÖZELLİKLERİ

Bu bölümde metni nasıl biçimlendireceğinizi (Bir metne ait renk, Hizalama, font büyüklüğü, harfler arası boşluk, metni altını ve üstünü çizmek gibi) öğreneceğiz. Bu özellikler:

• Color
• Text-align
• Text-decoration
• Text-transform
• Text-indent
• Letter-spacing
• Word-spacing
• Vertical-aling

CSS METÄ°N RENGÄ°

---

Color özelliği, metne renk vermek için kullanılır. Değer olarak daha önce örneklerde görmüştünüz. Şimdi burada bir kez daha tekrar etmiş oluyoruz. Değer olarak öğrendiğiniz renk birimlerinden istediğinizi kullanabilirsiniz.

p{color:blue}

span{color:#f09450}

div{color:rgb(180,180,180)}

ÇIKTI:

CSS METÄ°N HÄ°ZALAMA

---

Text-align özelliği metinleri hizalama için kullanılır. Metinleri sağa , sola ,iki yana yaslayabilir veya ortalayabiliriz.

• text-align: left; (Metini sola hizalamak için kullanılır.)
• text-align: center; (Metini ortaya hizalamak için kullanılır.)
• text-align: right; (Metini saÄŸa hizalamak için kullanılır.)
• text-align: justify; (Metin içeriÄŸinin saÄŸ taraftan kalan boÅŸluklarını tamamlar, okumayı kolaylaÅŸtırır. Gazete ve Magazin dergilerinde olduÄŸu gibi.)

CSS:

p {text-align: right;}

span {text-align: center;}

div {text-align: justify;}

ÇIKTI:

CSS METÄ°N DEKORASYONU

---

Text-decoration özelliği genellikle bağlantıların(link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi, altını çizmeyi, üzerini çizmeyi sağlar.

• text-decoration: none;(ÖrneÄŸin, bu kodu "a" etiketi için kullandığımızda linkin alt çizgisi kaybolacaktır.)
• text-decoration: underline; (Metni altı çizili yapar.)
• text-decoration: overline; (Metin tepesini çizili yapar.)
• text-decoration: line-through; (Metin ortasından çizgi geçirir.)

CSS:

h3{text-decoration:underline}

p{text-decoration:line-through}

span{text-decoration:overline}

a{text-decoration:none;}

ÇIKTI:

CSS METİN DÖNÜŞÜMÜ

---

text-tansform özelliği bir metindeki karakterleri büyük veya küçük harfe çevirebilir ya da metinde ki kelimelerin ilk harflerini büyütebilir.

• text-transform:uppercase Metindeki tüm harfleri büyük harfe çevirir
• text-transform:lowercase Metindeki tüm harfleri küçük harfe çevirir
• text-transform:capitalize Metindeki kelimelerin ilk harflerini büyük harfe çevirir

p{text-transform: uppercase;} 

span{text-transform: lowercase;}

div{text-transform: capitalize;}

ÇIKTI:

CSS METÄ°N GÄ°RÄ°NTÄ°LEME

---

text-indent özelliği, parağraf başı yaparken cümlenin ne kadar içten başlıyacağını ayarlamak için kullanılır.

p{text-indent:50px} /* her parağraf 50px içerden başlar */

CSS SATIRLAR ARASI MESAFE AYARI

---

line-height Özelliği, metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.

CSS:

p{line-height:25px;}/*Satırlar arası mesafeyi 25 px yapar.*/

ÇIKTI:

CSS HARFLER ARASI MESAFE AYARLAMA

---

Letter-spacing Özelliği metin içindeki yer alan karakterlerin arasındaki boşluğu ayarlamak için kullanılır

p{letter-spacing:12px}

ÇIKTI:

CSS KELÄ°MELER ARASI MESAFE

---

word-space: Özelliği metin içinde yer alan kelimeler arasındaki (boşluğu) ayarlamak için kullanılır.

p{word-spacing:12px /* Kelimeler arası mesafeyi 12px yapar */}

ÇIKTI:

CSS METİN İÇİNDEKİ RESİMİN KONUMUNU AYARLAMAK

---

vertical-aling: Özelliği bir öğenin dikey olarak hizalaması için kullanılır. Aşağıdaki değerleri alabilir. Varsayılı değeri baseline 'dır

• baseline: Orta(metin içeriÄŸine göre)
• sub: Altsimge
• super: Ãœstsimge
• top: Yukarı(Elemente göre)
• text-top Yukarı(metin içeriÄŸine göre)
• middle Orta(elemente göre)
• bottom Alt(elemente göre)
• text-bottom Alt(metin içeriÄŸine göre)
• px ve yüzde(%) deÄŸerleride verilebilir

CSS:

img.ilk{vertical-align:text-top;}

img.iki{vertical-align:text-bottom;} 

img.uc{vertical-align:middle;}

HTML:

<p>Bu<img src="logo.jpg" alt=""/> bir deneme yazısıdır</p>

<p>Bu<img class="ilk" src="logo.jpg" alt=""/> bir deneme yazısıdır</p>

<p>Bu<img class="iki" src="logo.jpg" alt=""/> bir deneme yazısıdır</p>

<p>Bu<img class="uc" src="logo.jpg" alt=""/> bir deneme yazısıdır</p>

ÇIKTI:

4352

Gönder