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:

Bu bir deneme yazısı

Bu bir deneme yazısı

Bu bir deneme yazısı

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 text

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:

Bu bir deneme yazısı

Bu bir deneme yazısı

Bu bir deneme yazısı

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 */

Bu bir deneme yazısıdır. Bu bir deneme yazısıdır. Bu bir deneme yazısıdır. Bu bir deneme yazısıdır. Bu bir deneme yazısıdır.

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 line

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:

Bu bir deneme yazısıdır.

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:

Bu bir deneme yazısıdır

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:

Bu bir deneme yazısıdır

Bu bir deneme yazısıdır

Bu bir deneme yazısıdır

Bu bir deneme yazısıdır

ÇIKTI:

css vertical

Adınız

Eposta

Mesaj

2699

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE