Tarih :10 Aralık 2019

HTML Divler ve CSS

Merhabalar arkadaşlar bu bölümümüzde html de divleri ve css de bağlantıları öğreneceğiz.
Divler birer bölümdür arkadaşlar. Yapacağımız sitedeki bölümleri teker teker belirtiriz. Bunun için de divleri kullanırız. Divleri birer kutu olarak da düşünebiliriz tabiki.
Div etiketinin aldığı parametre genellikle class ve id parametreleridir.
Class ve id parametrelerini divlerimizin boyutunu, şekilini ve hangi amaç için kullanacağımızı belirlemek için kullanırız. Örneğin bir divimizin boyutunu belirtmek için stil uygulamamız gerekmektedir. (width:50% veya height:50% şeklinde de ulaşabiliriz fakat karışıklılık yaratabilir.)
Hatırlarsanız uygulayacağımız stilleri yazmamız için ilk dersimizde 2 adet dosya açmıştık. O dosyalardan bir tanesini img yani resimlerimiz için kullanmıştık, style kodlarımız için ise css klasörünü kullanacağız.
Açmış olduğumuz css klasörümüzün içerisine bir adet style.css dosyası oluşturalım.
Ve index.html dosyamıza tekrar dönelim.
Ve head etiketlerimiz arasına kırmızı kutucuktaki kodumuzu ekleyelim.


         
          KODCULAR.COM 

Bu kodu yazmamızdaki amaç style.css dosyamıza index.html tarafından erişmemiz içindir.

Style.css dosyamıza erişimimizi sağladığımıza göre sırada style dosyamızın yapısını anlatmakta. 

Style dosyaları dediğimiz gibi html sayfamızda yarattığımız öğelerin görünümünü ayarlamamız için kullandığımız stil yapılandırma dosyasıdır.

Örneğin bir div yaratmış olalım.

Bu divimize stlye.css içerisinden stil vermemiz için style.css dosyamıza .kutucuk { } yazmamız gerekir. Ve süslü parantezler arasına stil kodlarımız gelecek.

Örnek verecek olursak kutucuğumuzun genişliğini 100px ve uzunluğunu 100px ve rengini kırmızı yapalım.

Style.css içerisindeki Kodumuz;

.kutucuk{
height:100px;    
width:100px;      
background:#FF0000;   
}

Ve çıktımız bu şekilde olacaktır;

Şimdi ise kutucuğumuzun içerisine bir adet link ekleyelim.

KODCULAR

Ve yarattığımız linki style.css kodlarımızda düzenleyelim.

.kutucuk a{
color :white;  
font-family: Verdana; 
font-weight:bold; 
font-size:14pt; 
text-decoration: none; 
}

.kutucuk a dediğimiz zaman: kutucuk divimizin içerisindeki A öğelerinin hepsini kapsamaktadır. Eğer özel bir öğe üzerinden erişim sağlamak istiyorsak aynı divlerdeki gibi o öğe üzerine class parametresi vermemiz gerekmektedir.

Kodumuzun çıktısı aşağıdadır.

Bu konumuzda da DİVleri ve CSS dosyamızı inceledik. Aklınıza takılan bir soru veya çalışmayan bir kodunuz varsa, yorumlardan bizlere iletebilir, hep beraber çözüm arayabiliriz. Görüşmek üzere..

Bir cevap yazın

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