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 Sayfasına Arka Plan Ekleme

Oluşturacağımız html sayfalarının arka planına  bir resim ekleyebilir veya arka plan rengini değiştirebiliriz.İlk olarak arka plan için renk belirleyelim.Bunun için sayfamızın başında yazdığımız <body> etiketinin bgcolor özelliğini kullanmalıyız.

<body bgolor=”green”> yazarsak arka plan rengimiz yeşil olacaktır.Arka plan rengini doğrudan yazmak yerine, istediğimiz rengin kodunu da yazabiliriz.Yani <body bgcolor=”#FFCCFF”> olarak da yazabilir.Renklerimizin html kod karşılıklarını bulmak için google üzerinden  Html renk kodları olarak aratabilirsiniz.Bunun için bir html sayfası örneği verelim;

Html Listeleme Yapısı

Yapacağımız sayfada bazı yazılarımızı maddeler halinde yazmak isteyebiliriz.Yazacağımız maddeleri sıralı ve sırasız olarak 2 şekilde yapabiliriz.Sırasız ( unordered list ) oluşturmak  için kullanacağımız etiket <ul> dir  ve  </ul> etiketiyle kapatılması gerekir.Bu etiket yardımıyla listeyi oluşturmuş oluruz ve bu etiketlerin içerisine yazacağımız <li> etiketleriyle de listemizin elemanlarını belirleriz.

Ekleyeceğimiz her liste elemanı için <li> Eklenecek eleman </li>  etiketlerini kullanmalıyız.Anlattıklarımıza basit bir örnek verelim;

<html>
 <head>
  <title>Listeleme</title>
 </head>
 <body>
  <h4>Listeleyeceğimiz Elemanlar</h4>
  <ul>
   <li>1.eleman</li>
   <li>2.eleman</li>
   <li>3.eleman</li>
  </ul>
  </body>
</html>
Arama
RSS
Beni yukari isinla