Bu dersimizde web sayfalarındaki yazılara belli css text özelliklerini nasıl aktaracağımızı öğrenelim.
Css Color Nedir ve Nasıl Kullanılır ?
Bir yazıya renk vermek için color özelliğini kullanırız. Bu aşamada ister body seviyesinde ister etiket seviyesinde bir renk kullanabiliriz.
body {
color: blue;
}
h1 {
color: green;
}
Örnek 1 için tıklayınız.
Css Text Decoration Nedir ve Nasıl Kullanılır ?
Linkler için tarayıcılar varsayılan olarak link yazılarının altını çizerler ancak biz bunu css ile değiştirebiliriz.
a {
text-decoration:none;
}
Örnek 2 için tıklayınız.
text-decoration özelliğinin alabileceği farklı değerler vardır.
text-decoration: overline, özelliği yazının üstüne bir çizgi ekler.
text-decoration: line-through, özelliği yazının ortasına bir çizgi ekler.
text-decoration: underline, özelliği yazının altına bir çizgi ekler.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Örnek 3 için tıklayınız.
Css Text Transformation Nedir ve Nasıl Kullanılır ?
Css text transformation özelliği yazı karakterlerini büyük harften küçük harfe, küçük haften büyük harfe ya da kelimelerin baş harflerinin büyük harfe çevrilmesinde kullanılır.
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
Örneğimizde;
** text-transform:uppercase; diyerek tüm harfleri büyük harfe çevirmiş oluruz.
** text-transform:lowercase; diyerek tüm harfleri küçük harfe çevirmiş oluruz.
** text-transform:capitalize; diyerek cümle içindeki her kelimenin baş harfini büyük yapmış oluruz.
Örnek 4 için tıklayınız.
Css Text Indentation Nedir ve Nasıl Kullanılır ?
Css text indent özelliği paragraf başı yapmak için kullanılır.
p {
text-indent: 50px;
}
Örnek 5 için tıklayınız.
Css Letter Spacing Nedir ve Nasıl Kullanılır ?
Css letter spacing, her bir harf arasındaki mesafeyi belirler.
p {
letter-spacing:1.2px;
}
Örneğimizde her bir harf arasındaki mesafe 1.2px olur.
Örnek 6 için tıklayınız.
Css Line Height Nedir ve Nasıl Kullanılır ?
Css Line Height özelliği satır aralıklarını belirler.
.small {
line-height: 0.7;
}
.big {
line-height: 1.8;
}
Örnek 7 için tıklayınız.
Css Word Spacing Nedir ve Nasıl Kullanılır ?
Css Word Spacing ile kelime arasındaki boşlukları belirleyiz.
h1 {
word-spacing: 5px;
}
h2 {
word-spacing: -5px;
}
<h1> için her kelime aralığı 5px iken <h2> etiketi için -5px olarak belirttik.
Örnek 8 için tıklayınız.