Html5

Ders-8 Html Elementlerini Css İle Biçimlendirme

Css yani Cascading StyleSheet (Basamaklı stil şablonları) anlamına gelir.

Css Html elementlerinin tarayıcıda nasıl görüneceğini belirtmek için kullanılır. Css bize çok kolaylık sağlar. Aynı anda birkaç sitenin görünümünü değiştirmek için tek bir css dosyasın kullanabilmekteyiz. Bootstrap yazılarıma başlayınca ne demek istediğimi anlayacaksınız.

Css Html elementine 3 şekilde eklenilir

1)Satır içi kullanım

Bu özelliği html elementlerinde style özniteliği kullanılarak yapabiliriz . Style özniteliği içerisine css kodları yazarak çalıştırabilmekteyiz bunu bir örnekle size anlatacağım.

Kodumuzun çıktısı şu şekilde olmaktadır ;

2) Head Elementi arasına <style></style> etiketini koyarak

Html sayfamızda head elementleri arasın <style></style> elementini yerleştirerek arasına css kodlarımızı yazabiliriz. Bu çok kullanılan bir özeellik değildir. 3. özelliği anlattığımda nedenini çok daha iyi anlayacaksınız. Şimdi bununla ilgili bir örnek yapalım ve konuyu daha iyi anlayalım

Çıktı:

3) Harici Css dosyasını sayfaya dahil ederek

Son kullanım şekli harici Css dosyasına sayfamıza dahil etmektedir. Web sitelerinin tamamında bu kullanılır. link elementi arasına kaynak dosyanın yolunu ve ismini belirterek bu özelliği kullanabiliriz. Link elementi ise head elementlerinin arasına yazılır. Bir örnekle de bunu açıklayıp konuyu noktalayalım.

Html Dosyamız :

ayar.css Dosyamız (Harici) :

p{
font-size:25px;
color: green;
background:yellow;
}

Çıktı:

Yorum yapmak için tıklayın

Cevap bırakın

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

Popüler

En üste