Anasayfa / CSS / Css Metin Biçimlendirme

Css Metin Biçimlendirme

Önceki dersimizde Css de oluşturduğumuz sınıfları her etiket için nasıl kullandığımızı gördük.Bu yazımızda ise Css metin biçimlendirme etiketleriyle metinleri nasıl biçimlendireceğimizi görelim

Metin biçimlendirmedeki kastımız ;metnin hizalanması,renginin değişmesi,altının çizilmesi,yazı tipi vb. özelliklerdir.Şimdi bunların ne olduklarını teker teker görelim ve örnekler üzerinde anlatalım

METİN RENGİ DEĞİŞTİRME

Bir elementin rengini değiştirmek için kullanacağımız özellik color dır.Bu parametreye ” ”  ifadeleri arasında renk değerleri verebiliriz.Vereceğimiz renkleri doğrudan adını girerek , renk kodunu yazarak veya RGB formatında yazarak belirleyebiliriz.Şimdi,önceki derste gördüğümüz gibi sınıf şeklinde bir stil belirleyelim ve bu renk stillerimizi, başlık ve paragraf içinde kullanalım

Yazdığım kodun Çıktısını görerek konuyu daha ayrıntılı anlatalım

css yazı stili

Yukarıdaki kodlarımızda biz,önceki derste gördüğüm konulardan olan dahili css ile yazdık. <body> kısmında sayfamızın arka plan rengini, h4 ve p özelliğinde ise sayfamızda yazılacak her h4 ve p elementi için bir stil belirledik. p.stilim kısmında ise , diğer p etiketlerinden ayrı olarak bir stil uygulamak istediğimiz için yazdık.

kod satırı ile paragraf etiketimiz için (stilim) adındaki sınıf üyemizi kullandık.Bunun tanımlaması ise yukarıda p.stilim ile belirlendi

 

METİN HİZALAMA

Html derslerinde gördüğümüz gibi yazılarımızı sağa,sola dayalı veya ortalı yapabiliyorduk.Bunu Css kodları ile nasıl yapabileceğimizi görelim;

Burada h3.sola , h3.orta stilleri tanımladık.Bu şu demektir.Yazacağımız <h3> etiketleri için orta ve sola adlı 2 stil tanımladık. <h3> etiketlerinde class=”sola” tanımlarsak , h3.sola stilimizi kullanacaktır.Bu stilimizde ise yazılarımız sola dayalıdır.Şimdi tarayıcımızda çıktımızı görelim
sola dayali

 

METİN DEKORASYONLARI

Bu konumuza da önceki derslerimizde kısaca bahsetmiştir.Şimdi derinlemesine inceleyelim.Metin dekorasyonu derken metnimizin altını, üstünü çizmek gibi stillerden bahsediyoruz.Burada yapacağımız örnekleri de Dahili Css mantığı ile yapalım (Önceki Css derslerimizde bahsetmiştik)

Kullanabileceğimiz dekorasyonlardan bahsedelim ve örneklerimize geçelim;

text-decoration:overline;               =>  Yazımıza üst çizgi koyar
text-decoration:line-through;      =>   Yazımızın üstünü çizer
text-decoration:underline;            =>   Yazımızın altını çizer
text-decoration:none;                      =>   Default olarak herhangi bir çizgi koymaz.

 

Bu verdiğimiz özellikler ile ilgili örnek kodumuzu verelim;

Burada h2,h3,h4,h5 etiketleri için 4 er tane metin dekorasyonu tanımladık ve bunları <body> kısmındaki etiketlerimiz üzerinde kullandık

Çıktımız ise ;
decoration

Kodlara ve çıktımıza bakarak neyin ne olduğunu daha iyi anlayabiliriz

 

CSS YAZI TİPİ DEĞİŞTİRME

Font stili sayesinde , yazılarımızı italik (eğik) yapabilir veya yazı fontunu değiştirebiliriz

font-family     => ile fontumuzun yazı tipi belirlenir

font-style        => ile fontumuzun stili belirlenir

font-size          => ile fontumuzun boyutu belirlenir (px-piksel cinsinden)

P elementimiz için 3 adet özellik belirledik.İlki için p.normal kullandık.Bu demektir ki classını egik belirlediğimiz her p etiketi için bu stiller kullanılacaktır
yazı stilleri

 

 

Mehmet Kirazlı

İstanbul Eyüp'te ikamet ediyorum. Giresun Alucra'lıyım. Bilgisayar Mühendisliği bölümünden 2013 yılında mezun oldum. "Yeni Başlayanlar için Java 8" kitabının yazarıyım. Şu anda özel bir firmada Mobil Yazılım Geliştirme Uzmanı olarak çalışıyorum.

One comment

  1. iyi ki css diye aradım he

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir