HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css metin hizalama
css metin özellikleri
css metin işlemleri
css metin ortalama
css text kodları
css metin rengi değiştirme
css text rengi
css text align
css text color
css text color code
css text alignment code
css for text alignment
css text decoration nedir
css text decoration padding
css text transform
css style indentation
css text align indent
css harf arası boşluk
css for letter spacing
letter spacing css
css satır boşluk
css satır aralığı
css line height nedir
css direction of text
css set text direction
css kelime arası boşluk
css kelimeler arası boşluk
css text gölge
css text shadow examples
css text shadow kullanımı

CSS Text(Metin)

CSS Text(Metin)

En önemli konulardan birine geldik arkadaşlar. Web sitemizin büyük bir çoğunluğu metin yazılarından oluşacak elbet. Bu metin yazılarını isteğinize göre biçimlendirebilirsiniz.Bu biçimlendirmeler peki ne şekilde olacak.Bir metnin rengini, yönünü değiştirebilirsiniz.Bunun yanında metnin üstüne,altına üzerine çizgi çizebilirsiniz.Metniniz eğer paragraf başı ise ön boşluk ekleyebilirsiniz.Metninizin kelime ve harf arası boşluklarını ayarlayabilirsiniz.Metninizin satır yüksekliklerini ayarlayabilirsiniz.Hatta metninizin yönünü yani düz şekilde mi yoksa ters şekilde mi yazacağınıza karar verebilirsiniz.Metninize gölge efekti ekleyebilirsiniz.Bu efektin yataydan ve dikeyden ne derece olacağına ve rengine de karar verebilirsiniz. Gelin bu önemli konuyu güzel örnekler ile anlamaya çalışalım.

Bu konu hakkında tavsiyem çok çalışın arkadaşlar.Çok örnekler yapın. "Class" yapıları "Id" yapıları ile pek çok örnekler yapın. Bu konuyu iyi anlamanız size önemli ölçüde katkı sağlayacaktır.

Sizler için her şeyi içinde barındıran genel bir örnek hazırladım.Bu örnekte neyin nereye ait olduğunu anlamaya çalışın.Eğer çabucak anlıyorsanız bu işi rahat kavrayabileceğiniz anlamına gelir.Sadece parametrelerin özelliklerini incelemeniz yeterli olacaktır.Eğer anlayamıyorsanız da teker teker örnekleri incelemelisiniz. Ondan sonra kendiniz bu yapıların hepsini bir arada kullanarak güzel hoş bir örnek hazırlamalısınız.

Kullanımı:

Css
#bilgikutusu {
border: 1px solid gray;
padding: 8px;
}
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
a {
text-decoration: none;
color: #008CBA;
}
Html
<div id="bilgikutusu">
<h1>Google</h1>
<p>Google, İnternet araması, çevrim içi bilgi dağıtımı, reklam teknolojileri ve arama motorları için yatırımlar yapan çok uluslu Amerikan anonim şirketidir. İnternet tabanlı hizmet ve ürünler geliştirir, ek olarak bunlara ev sahipliği yapar.
</p>
<a target="_blank" href="https://www.google.com">Google Git</a>
<div style="padding-top:5px;">
Alıntı: <a target="_blank" href="https://tr.wikipedia.org/wiki/Google">https://tr.wikipedia.org/wiki/Google</a>
</div>
</div>

1-Text Color(Metin Rengi)

Metin rengini değiştirmek için kullanırız. Aşağıdaki şartları tekrar hatırlamakta fayda var.

  • Direk ismini verebilirsiniz. Mesela kırmızı istiyorsanız "red" yazabilirsiniz.
  • Hex renk kodu karşılığını kullanarak yazabilirsiniz. Bu size daha fazla ve daha ayrıntılı renk seçeneği sunacaktır.Ör: "#000"
  • RGB renk kod karşılığını kullanarak da yazabilirsiniz. Bu size daha da ince ayrıntı kullanarak tam tonunu yakalamanızı sağlayacaktır.Ör:"rgb(255,0,0)"

Kullanımı

Css
h1.yesil {
color: green;
}
p.mavi {
color: blue;
}
Html
<h1 class="yesil">Bu bir Yeşil başlık</h1>
<p class="mavi">Bu bir mavi paragraf</p>

2-Text Aligment(Metin Hizalanması)

Metninizi istediğiniz şekilde hizalayabilirsiniz. Aşağıdaki örnekte tüm özellikleri mevcuttur.

Kullanımı:

Css
h1.ortala {
text-align: center;
}
h2.sola {
text-align: left;
}
h3.saga {
text-align: right;
}
Html
<h1 class="ortala">Başlık 1 (center)</h1>
<h2 class="sola">Başlık 2 (left)</h2>
<h3 class="saga">Başlık 3 (right)</h3>
<p>Yukarıdaki başlıklar belirli özelliklere göre hizanmıştır.</p>

3-Text Decoration(Metin Dekorasyonu)

Metnin tasarımını değiştirmenizi sağlar. Metninizin üstünü, altını ve üzerini çizebilirsiniz.

Kullanımı:

Css
h1.uzericizili {
text-decoration: overline;
}
h2.ustucizili {
text-decoration: line-through;
}
h3.alticizili {
text-decoration: underline;
}
Html
<h1 class="uzericizili">Başlık Tipi 1</h1>
<h2 class="ustucizili">Başlık Tipi 2</h2>
<h3 class="alticizili">Başlık Tipi 3</h3>

Not: İstisna bir durumumuz var arkadaşlar. Linkler varsayılan olarak altı çizili olarak gelirler. Bunu bazen kaldırmak isteyebiliriz.Bunun için aşağıdaki örneği inceleyelim.

Css
#googlelink{
text-decoration: none;
}
Html
<p>Alt çizgisiz link: <a id="googlelink" target="_blank" href="http://www.google.com">Google'a gider.</a></p>

4-Text Transformation(Metin Dönüşümü)

Açıkçası bazı şeyleri türkçeleştirmek de çok zorlanıyorum :). Metinlerinizin karakterlerini büyütüp küçültmek için kullanırız.Aşağıdaki örnekte çeşitli kullanımları mecvut.

Kullanımı

Css
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Html
<p class="uppercase">Bu paragrafın tüm karakterleri büyük.</p>
<p class="lowercase">Bu paragrafın tüm karakterleri küçük.</p>
<p class="capitalize">Bu paragrafın sadece baş harfleri büyük</p>

5-Text Indentation(Metin Girintisi)

Metinlerinize girinti eklemek için kullanılır. Aslında bildiğimiz paragraf başı boşluğudur.

Kullanımı

Css
p.bas {
text-indent: 25px;
}
Html
<p class="bas">Web sitenizin hemen her sayfasında paragrafları kullanırız.Zaten websitenizi oluşturan en önemli yapı paragraflardır. Her konunun da bir paragraf başı olmalıdır. Böylece hem yazım kurallarına uymuş olursunuz hemde sitenizi ziyaret edenlere iyi bir izlenim vermiş olursunuz.</p>

6-Letter Spacing(Harf Boşluğu)

Kelimelerinizdeki harflerin her biri arasındaki boşluğu ayarlar.

Kullanımı

Css
h1.genis {
letter-spacing: 3px;
}
h2.genis {
letter-spacing: -3px;
}
Html
<h1 class="genis">Bu bir paragraf 1</h1>
<h2 class="genis">Bu bir paragraf 2</h2>

7-Line Height(Satır Yüksekliği-Boşluğu)

Metinlerinizin bulunduğu satır ile bitişiğinde olan satır arasındaki boşluğu ayarlamak için kullanır.

Kullanımı

Css
p.az {
line-height: 0.7;
}
p.cok {
line-height: 1.8;
}
Html
<p>
Bu paragrafta standart satır boşluğu kullanılmıştır.<br>
Tüm tarayıcılarda standart satır aralığı %110 ve %120 arasıdır<br>
</p>
<hr>
<p class="az">
Bu paragrafın satır aralığı küçük değerlidir.<br>
Bu paragrafın satır aralığı küçük değerlidir.<br>
</p>
<hr>
<p class="cok">
Bu paragrafın satır aralığı büyük değerlidir.<br>
Bu paragrafın satır aralığı büyük değerlidir.<br>
</p>
<hr>

8-Text Direction(Metin Yönü)

Metninizin yazış yönünü belirler. Kullanımı özel bir kullanımdır.Lütfen çok dikkatli inceleyiniz.

Kullanımı:

Css
p.tersyaz {
direction: rtl;
}
Html
<p>Bu paragraf normal yönde yazılmıştır</p>
<p class="tersyaz"><bdo dir="rtl">Bu paragraf tersten yazılmış bir paragraftır.</bdo></p>

9-Word Spacing(Kelime Boşluğu)

Metinlerinizdeki kelime arasındaki boşlukları belirlemek için kullanılır.

Kullanımı:

Css
h1.klmgenis {
word-spacing: 10px;
}
h2.klmdar {
word-spacing: -5px;
}
Html
<h1 class="klmgenis">Bu Birinci Başlıktır</h1>
<h2 class="klmdar">Bu İkinci Başlıktır</h2>

10-Text Shadow(Metin Gölgesi) >

Metinlerinize dikeyde ve yatayda istediğiniz renkte gölge efekti vermenizi sağlar.

Kullanımı:

Css
h1.golgegri {
text-shadow: 6px 2px grey;
}
Html
<h1 class="golgegri">Metin Gölge Efekti</h1>
<p><b>Note:</b> Internet Explorer 9 ve eski sürümlerinde çalışmaz.</p>


Paylaş:

Enes KILIÇ
Webmaster