Ö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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
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.
|
1 |
<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;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
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;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 ;
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
iyi ki css diye aradım he