İlginizi Çekebilir
HTML Renk Kodları

Temel CSS Yapısı

Temel CSS Yapısı

HTML kodları ile sitemizin temel iskeletini, yapısını ve verilerini oluştururuz. CSS ile bu oluşturduğumuz yapıları özelleştirebilir, stil şablonlarını belirleyebilir, nasıl görüneceğini belirleme imkanımız olur. Örneğin yazdığınız bir başlık yazısının rengini font büyüklüğünü, CSS ile düzenleyebilir, şekil verebilirsiniz.
CSS Kodlarımızı <head> ... </head> etiketleri arasında, <style> ... </style> şeklinde belirtmekteyiz.
Aynı zamanda etiket içerisinde de css kodunu belirtebiliriz.
CSS ile etiketlerimizi biçimlendirirken ıd ve class sınıflarının ne olduğunu anlamamız gerekmekte.
Aşağıda ki vereceğim örnekler anlamanıza yardımcı olacaktır.

Etkiket içerisinde CSS kodu kullanmak

HTML sayfasının arka plan rengini kırmızı yapmak istersek;

 
Bir paragraf yazısının rengini pembe yapmak istersek;

 

<style> etiketleri arasında CSS kodu kullanmak

HTML sayfasının arka plan rengini kırmızı yapmak istersek;

 

Sayfa içindeki tüm etiketleri seçmek

Bir html dökümanı içerisinde birden fazla <h1> başlığı olduğunu düşünelim, bu başlıkların hepsini tek seferde biçimlendirebiliriz.
Örneğin bütün başlıkları sağa yaslı, rengi mavi yapmak istersek aşağıdaki örnekte gibi olacaktır.

 

Belirli bir öğeyi seçmek için id özelliğini kullanmak

Etiketleri id ile seçmek için # işareti kullanılır. Etiketlere ilk başta bir isim verilir ve bu isim seçilerek özelleştirmeler yapılır.
Örneğin <p> türünde paragrafımız var, ismi de “paragraf1” , bu yazının rengini turuncu yapmak istiyoruz.

 

Bir sınıfı seçmek için class özelliğini kullanmak

Etiketleri class ile seçmek için . işareti kullanılır. Etiketlere ilk başta bir isim verilir ve bu isim seçilerek özelleştirmeler yapılır.
Örneğin <p> türünde paragrafımız var, ismi de “paragraf1” , bu yazının rengini mor yapmak istiyoruz.

 
Daha iyi anlaşılması açısından, hem id özelliğini hem de class özelliğini bir arada kullanarak nasıl yazıldığını inceleyelim..

Yorum Yap

Yorum Yap