Son Haberler
Anasayfa / Yazılım / HTML / CSS / CSS Kullanım Şekilleri

CSS Kullanım Şekilleri

CSS yapısını WEB uygulamarımızda kullanabilmemizin üç şekilde yolu vardır.

Harici bir CSS Dosyası Yöntemi ile :

Harici bir CSS stil dosyası hazırlayarak bunu istediğimiz WEB sayfalarına bir link ile bağlayabiliriz. Genelde en çok kullanılan ve en profesyonel olan yöntemdir. Bu şekildeki kullanım ile birlikte çok daha rahat şekilde yönetim, değişiklik de yapabiliriz. Harici bir CSS dosyasını bir WEB forma, WEB sayfasına bağlamak için kullanılabilecek örnek referans linki aşağıdaki gibidir :

Bu kod head elementi içinde yer alır.

Üstteki kodda CSSDosyam.css benim oluşturmuş olduğum metin özelliğine sahip bir CSS dosyasıdır. Bu CSS dosyasının içinde tanımlamış olduğum özelliklere dair bilgiler mevcuttur. Örnek olarak;

a { 
background-color: #ff7; 
color: #0ff;
}

Üstteki kod bloğunda görüldüğü gibi CSS kuralları, tanımlamarım bir CSS dosyası içinde yer alırlar. Örnek olarak üstteki kod bloğunda a elementi için bir arkaplan ve bir yazı rengi tanımlanmıştır.

İkinci yöntem hazırlanan bir WEB forma embed edilmesi yani direkt olarak eklenmesi sureti ile CSS kullanımı.

Bu tip kullanımda web formun head elementi arasında


Bu kullanımda etkilidir fakat bu kullanımın en büyük dezavantajı sadece ilgili web form için yazılmış olmasıdır, ben bir başka sayfada buna benzer değişiklikler yapmak istiyorsam onun içinde burdaki embed edilmiş CSS kurallarımı tekrar yazmalıyım. Dolayısı ile birinde olan bir değişiklik diğerlerini etkilemez ve bu yönden yönetimi zordur. Genelde WEB formları için CSS yazılırken genel ortak özellikler hepsi bir arada tek bir harici CSS dosyasında bulunur. Sayfaların istisnai düzenlenmesi gereken, sayfaya özel durumlar ise bu şekilde embed edilerek style oluşturulma yoluna gidilir.

Üçüncü yöntem ise inline olarak yani direkt olarak HTML koda yazılan CSS kuralları :

Bu durum çok zorda kalındığında, ya da sadece o sayfanın küçük bir kısmında yapılması gerekiyor ise kullanılır. İlgili HTML tag için Style attribute tanımlanır ve burada CSS kurallarımızı belirtiriz. Örneğin a elementi için uygulama yapalım :

 Ana Sayfa

Şeklinde olabilir.

CSS dosyaları hazırlanırken bir CSS kuralında harici veya dahili olsun bir takım özellikler kullanılmaktadır. Her stil kuralı bir selector?e sahiptir.

Örneğin;

a { 
background-color: #ff9; 
color: #00f;
}

Burada yer alan selector a ?dır. Ve ardından a için iki özellik tanımlanmıştır. Birisi arka plan rengi, diğeri ise ön yazı rengidir. Bu şu demektir, ben WEB formumda HTML tag olarak a ile tanımladığım her yeri, yani link olacak her yerin arka plan rengini ve yazı rengini bu CSS kuralı ile belirtmiş oluyorum.

CSS kuralı yazılırken dikkat edileceği üzere selector?den sonra bir süslü parantez açıyorum, özelliklerimi tanımlıyorum ve tekrar süslü parantezimi kapatıyorum. {?} şeklinde..

Daha sonra bir stil tanımlamam oluyor ve ardından bir üst üste iki nokta ( : ) ve sonra da tanımlamama dair olan özellik değeri ve bu değerin ardından diğer tanımlamamı ayırabilmek için noktali virgül ( ; ) kullanıyorum.

CSS?de Selector Tipleri :

CSS?de üç tip selector tipi kullanılır. Class tip, Element tip ve ID tip.. Element tip selectorler HTML elementler ile oluşturulan tipteki selectorlerdir. Örneğin :

h2 HTML elementi için bir CSS kuralı tanımlayalım :

h2 { 
color: #345;
}

Gibi. Buna göre h2 elementinin dahil olduğu bütün yazıların renk değeri #345 olur.

Sınıf tipi ve ID tip selector : Mantıkları aynıdır o yüzden tek başlık altında ele alıyorum. Kullanım şekillerinde, tanımlanmalarında biraz farklılık söz konusu.

Class yani sınıf tipi selector başında nokta (.) ile birlikte tanımlanır ve istediğimiz ismi verebiliriz (Türkçe karakter olmasın tabi). Aynı şekilde ID tip selector başında diez (#) şeklinde tanımlanır ve yine istediğimiz ismi verebiliriz, tabi Türkçe karakter kullanmamak koşulu ile.

Örnek tanımlamalarım :

CSS kuralı olarak,

.SayfaBilgisi { 
font-family: Arial; 
font-size: x-small;
}

Bu kuralı tanımladıktan sonra bir HTML elemente attribute olarak bu classı atarım ve kullanırım. Şu şekilde :

Copyright 2006

Burada h3 tagine Sayfabilgisi sınıfı attribute olarak eklenmiş olup, h3 elementi içinde yer alan tüm ifadeler SayfaBilgisi sınıfı adı altında tanımlanmış CSS kurallarına sahip olurlar.

ID selector tanımlama da buna benzer hatta aynı örnek üzerinden gideyim :

CSS kuralı olarak,

#SayfaBilgisi { 
font-family: Arial; 
font-size: x-small;
}

Bu kuralı tanımladıktan sonra bir HTML elemente attribute olarak bu ID?yi atarım ve kullanırım. Şu şekilde :

Copyright 2006

Burada h3 tagine Sayfabilgisi ID?si attribute olarak eklenmiş olup, h3 elementi içinde yer alan tüm ifadeler SayfaBilgisi ID?si adı altında tanımlanmış CSS kurallarına sahip olurlar.

Selector kullanımı isterse harici bir stil sayfası olsun, isterse gömülü olarak ya da kod gölümü olarak olsun aynı snytaxa sahiptir. Burada dikkat edilmesi gereken bir durum bir ID selector bir class selectoru barındırabilir hatta bir html tag?de barındırabilir. Örneğin :

#SayfaBilgisi  .UstKutu p {
font-family: Arial; 
font-size: x-small;
}

Gibi. Bunun da kullanımı şöyle olabilir :

Sayfamıza Hoşgeldiniz

şeklinde..

CSS hakkında daha geniş kapsamlı yazılarımı sonra tekrar eklemeye devam edeceğim.

Bir cevap yazın

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