Css Metin Biçimlendirme

Bir önceki dersimizde Css de oluşturduğumuz sınıfları her bir etiket için nasıl kullandığımızı gördük.Bu yazımızda ise Css de 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

<html>
 <head>
   <style type="text/css">
    body {color:aqua;}
    p.stilim{color:FF0000;}
    h4{color:Orange;}
    p{color:green;}
   </style>
 </head>
  <body>
   <h4>Burası,turuncu renkli bir başlıktır</h4>
   <p>Burası,yeşil renkli bir paragraftır</p>
   <p class="stilim">Burası,p etiketinin "stilim" sınıfına aittir ve kırmızı renktir</p>
  </body>
</html>

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.

<P class="stilim"

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;

<html>
<head>
<style type="text/css">
h3.sola { text-align:left; }
h3.orta { text-align:center; }
</style>
</head>
<body>
<h3 class="sola" >Bu başlık sola dayalıdır</h2>
<h3 class="orta">Bu başlık ortadadır</h3>
</ul>
</body>
</html>

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;

<html>
<head>
<style type="text/css">
h2 { text-decoration:none; }
h3 { text-decoration:overline; }
h4 { text-decoration:line-through; }
h5 { text-decoration:underline; }
</style>
</head>
<body>
<h2>Mehmet</h2>
<h3>Mehmet</h3>
<h4>Mehmet</h4>
<h5>Mehmet</h5>
</body>
</html>

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)

<html>
<head>
<style type="text/css">
p.duz {font-style:normal;}
p.egik {font-style:italic;}
p.times{font-family:"Arial";}
</style>
</head>
<body>
<p class="duz">Burası normal yazıdır</p>
<p class="egik">Burası egik yazıdır</p>
<p class="times">Burası Arial Yazı tipiyle yazıldı</p>
</body>
</html>

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

 

 

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla