CSS stil adları ve sınıf tanımlaması

**RoHaN** · 19.02.2007 00:12

Arkadaşlar öncelikle konuya css nin ne olduğu ve sıkça bahsettiğimiz sıkça rastladığımız css teknolojisinin nerelerde ne şekilde kullanıldığıyla başlayalım. Bir web sitesi yaptığınızı düşünün. Joomla veya herhangi başka bir içerik yönetim sistemini kullanmak zorunda değilsiniz. Elinizle sıfırdan HTML kodlama yapıyorsunuz. Bazen öyle basit şeylerde resim kullanıyorsunuz ki bu hem sizi yavaşlatıyor hem de web sitenizin yüklenme hızını. Üstüne birde siteniz olması gerektiğinden çok daha fazla bant genişliği harcıyor.

İşte CSS bize bu noktada yardım ediyor. Tasarladığımız web sitesinin <head></head> kısmının içerisinde

<link rel="stylesheet" type="text/css" xhref="http://sizinsiteniz.com/css/stil.css"/>

buna benzer bir kod parçacığı ile kendi stil dosyamızın yolunu belirtiyoruz.

Bu kod parçacığını kullandığımız her html sayfa stil özellikleri renk ve font seçimleri açısından bu stil dosyasına bağlı olacaktır. Yani sizinsiteniz.com altında css klasörü içindeki stil.css dosyamıza.

CSS yi html dosyamızın içindeki öğelere nasıl uygulayacağımızı ve div mantığını aşağıda başlangıç düzeyinde anlatmaya çalışacağım.

HTML de tanımladığımız herhangi bir öğeye class=ogesinifi şeklinde bir kod ekleyerek css dosyamızda belirleyeceğimiz özellikleri sahiplenmesini sağlayabilirz.

Örneğin:

<table class=tablonun_sinifi>
<tr>
<td></td>
<td></td>
</tr>
</table>

Yukarıdaki örnekte tablomuza tablonun_sinifi isimli bir stil sınıfı atadık. Web teknolojilerinde geniş düşünmeyi öğrenmek durumundayız. Bu class mantığını alnızca tablolarımız değil <img>,<a>,<ul>,<li> en çok kullanılanlar olmak üzere istediğimiz tüm etiketlerde kullanabiliriz. Buna body dahil.

Tabiyki sınıf atama mantığı herhangi bir öğeye özel bir görünüm istiyorsanız basitlik sağlayacaktır.

CSS dosyamızda ise atadığımız sınıf bu şekilde gözükecektir.

.tablonun_sinifi{
border:none;
background-color:red;
}

Yukarıdaki css kodu tablomuza bordürsüz ve kırmızı arkaplan özelliği sağlayacaktır.

Düşünün body tag için vereceğiniz herhangi bir özellik tüm sayfalarınızı etkileyecektir. Tüm sayfalarınızdaki metin boyutlarını standarda indirgeyecek ve sitenizin her sayfasının istediğiniz gibi görünmesini sağlayacaktır.

Yazar Sinan Ata

Konu: CSS stil adları ve sınıf tanımlaması

LinkBack

Seçenekler

Görüntü

Threaded View