Css Text - Css Dersleri

Css ile yazılarımızın görüntüsünü nasıl değiştiririz ? Css text özelliklerimiz nelerdir ?

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 seviyesindebir renk kullanabiliriz.

Kod:Panoya kopyala

body {
    color: blue;
}

h1 {
    color: green;
}

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.

Kod:Panoya kopyala

a {
   text-decoration:none;
}

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.

Kod:Panoya kopyala

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

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.

Kod:Panoya kopyala

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

Css Text Indentation Nedir ve Nasıl Kullanılır ?
Css text indent özelliği paragraf başı yapmak için kullanılır.

Kod:Panoya kopyala

p {
    text-indent: 50px;
}

Css Letter Spacing Nedir ve Nasıl Kullanılır ?
Css letter spacing, her bir harf arasındaki mesafeyi belirler.

Kod:Panoya kopyala

p {
    letter-spacing:1.2px;
}

Örneğimizde her bir harf arasındaki mesafe 1.2px olur.

Css Line Height Nedir ve Nasıl Kullanılır ?
Css Line Height özelliği satır aralıklarını belirler.

Kod:Panoya kopyala

.small {
    line-height: 0.7;
}

.big {
    line-height: 1.8;
}

Css Word Spacing Nedir ve Nasıl Kullanılır ?
Css Word Spacing ile kelime arasındaki boşlukları belirleyiz.

Kod:Panoya kopyala

h1 {
    word-spacing: 5px;
}

h2 {
    word-spacing: -5px;
}

<h1> için her kelime aralığı 5px iken <h2> etiketi için -5px olarak belirttik.

Html sayfalarında text hizalama işlemleri nasıl yapılır ? Css text-align nedir ve nasıl kullanılır ?

Html sayfalarımızda yazıları hizalamak için text-align özelliğini kullanırız.

Kod:Panoya kopyala

p#first{
  text-align:left;
}

p#second{
  text-align:center;
}

p#third{
  text-align:right;
}

p#fourth{
  text-align:justify;
}

Örneğimizde 3 <p> etiketi için farklı text-align özellikleri kullandık.

text-align:left; => sola hizalanır.

text-align:center; => ortaya hizalanır.
text-align:right; => sağa hizalanır.

text-align:justify; => sağa ve sola hizalanır.

Html' de Inline etiketler nasıl hizalanır ?
** hizalama işlemi block etiketlere uygulanır. Eğer inline bir etiketleri için text-align özelliği işlevsel değildir. Eğer ki inline etiket grubunu hizalamak istersek bu durumda inline etiket grubunu bir block etiketi içine alıp hizalama işlemini yapabiliriz.

Kod:Panoya kopyala

<div>
  <a href="#"> Link 1 </a>
  <a href="#"> Link 2 </a>
  <a href="#"> Link 3 </a>
</div>

div {
  text-align:right;
}

** inline etiketlere direk hizalama özelliği ekleyememizin sebebi; inline etiketler satırda içerik kadar yer kaplarlar hizalama işlemi için tüm satırı kaplamaları gerekir.