Standart CSS Text Yazı Özellikleri

İlk önce renk özelliklerinden bahsedelim renk vermek renk seçimi yapmak bazen zor olabiliyor yaptığımız tasarımlara göre renk seçmek çok önemlidir aslında sadece yazı için geçerli değil bu durum her alanda her ksımda önemlidir kodlarımıza geçelim
color:

hex-decimal kodu ile renk verme
h2 {color: #FF0000;}

renk ismi ile renk verme
h2 {color: red;}

RGB ile renk verme
h2 {color: rgb(255,0,0);}

RGB ile renk verirken dikkat etmemiz gereken renk kodunun parantez içinde olmalı ve virgül ile ayırmalıyız - rgb(R,G,B)
Sonuc olarak görünüm hepsinde aynıdır örnek görünüm
CSS Text Yazı Özellikleri
background-color:

Bir makalede önemli yerleri belirtmek için arka plan rengi kullanabiliriz örnek vermek gerekirse
Bu makalede önemli olan yerlerler belirtilmiştir
kodumuz ise şu şekildedir
<span style="background-color: yellow;">önemli</span>
tabiki burada bir etiket hazırlayıp kullanabiliriz letter-spacing:

letter-spacing kodumuzda yazıların bir birine yakınlığını uzaklığını ayarlarız A↔B örnek yapalım alttaki örnekte yazılarımız bir birine çok yakın olsunlar Bu bir örnektir yazılarımız birbirine çok yakın olsunlar
burada kullandığımız kod şu şekildedir #etiket {letter-spacing: -1px}
alttaki örnekte yazılarımızı birbirinden uzaklaştıralım Bu bir örnektir yazılarımız birbirine çok uzak olsunlar
#etiket {letter-spacing: 4px}
(-) olarak verdiğimiz değerde birbirine yakınlaştırır normal verdiğimiz değer birbirinden uzaklaştırır line-height:

line-height kodumuzda yazıların bir birne yakınlığı ve uzaklığı ile alakalı bir koddur fakat bu kodumuz üstten alta doğu yüksekliği ayarlar ↕ bu yazımızın üst ve alt aralığı bir birine yakın olsunlar
bu yazımızın üst ve alt aralığı bir birine yakın olsunlar
#etiket {line-height: 20px}
burada kullandığımız kodda pixel kullandım ama burada isteğe bağlı olarak % de kullanabiliriz santimde kullanabiliriz isteğe bağlı text-align:

text-align hizalama kodumuzudur sola sağa ortaya olmak üzere 4 kodumuz var bunları sıralayalım hemen
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
ilk kodumuz sola hizilama yapıyor ikincisi ortalıyor üçüncüsü sağa hizalıyor dörcünüsü hem sola hemde sağa yaslıyor yani iki yanı dolduruyor text-decoration:

text-decoration yazılarımızın altını üstünü ve ortasına çizgi çekmemize yarar örneklerle devam edelim ilk olarak bir yazımısın altını çizelim Bu yazının altını çizdik
alttaki kod yazımızın altını çizmektedir ve bu kod genelde linklerde kullanılır #etiket {text-decoration: underline;}
diğer örnekte ise yazının üstünü çizelim Bu yazının üst kısmını çizdik
alttaki kod yazımızın üst kısmını çiziyor #etiket {text-decoration: overline;}
diğer örnekte ise yazımızın orta kısmını çizelim Bu yazının orta kısmını çizdik
alttaki kodumuz yaznının orta kısmını çiziyor #etiket {text-decoration: line-through;}
text-indent:

gazete yada dergilerde sıkca kullanılır okuyanlar bilir makalenin başlangıcı biraz boşlukla başlar bu kodda bunu yapmamıza yardımcı olur öernekle devam edelim Nasılsınız iyimisiniz neler yapıyorsunuz, Nasılsınız iyimisiniz neler yapıyorsunuz ,Nasılsınız iyimisiniz neler yapıyorsunuz ,Nasılsınız iyimisiniz neler yapıyorsunuz, Nasılsınız iyimisiniz neler yapıyorsunuz ,Nasılsınız iyimisiniz neler yapıyorsunuz, Nasılsınız iyimisiniz neler yapıyorsunuz
kullandığımız kodda ise ben 1cm yani 1 santim boşluk verdim bunu pixel olarakta kullanabiliriz #etiket {text-indent: 1cm;}
text-transform:

text-transform kodu yazıları BÜYÜK küçük ve Baş harfleri BÜYÜK göstermemize yarayan bir koddur örneklerle devam edelim ilk örnekte yazıların tamamını büyük olarak gösterelim bu yazı aslında küçük harflerle yazıldı (kaynak koddan görebilirsiniz)
alttaki kod küçük yazılarımızı büyük harflerde yazmış gibi gösterir #etiket {text-transform: uppercase;}
ikinci bir örnekte ise yazılarımızı küçük olarak gösterelim BU YAZI ASLINDA BÜYÜK HARFLERLE YAZILDI (kaynak koddan görebilirsiniz)
#etiket {text-transform: lowercase;}
diğer öernekte ise küçük yazılarımızın sadece baş harflerini büyük yazılmış gibi göstermemizi sağlar bu yazının baş harfleri küçük harflerle yazıldı (kaynak koddan görebilirsiniz)
#etiket {text-transform: capitalize;}
word-spacing:

word-spacing kodumuz ise yazı aralarındaki aralıkların yakınlığını ve uzaklığını belirlememizi sağlar ↔ örnekle devam edelim Bu yazıda boşluk bırakılan yerler uzun olsun
kodumuz ise şu şekilde #etiket {word-spacing: 1cm}
ben 1 santim boşluk verdim tabi isteğe bağlı olarak (px) pixel kullanılabilir birde direction kodumuz var fakat bu kod text-align kodu ile aynı görevi gördüğü için bahsetmeye gerek duymuyorum başka bir css başlığında görüşmek dileği ile hoşcakalın