JTY/B4/D2 - template.css Dosyasını Tanıma

Bu habere oy verin
(0 oy verilmiş)

Bir önceki derste boş tema kurulumunu yapmış, standart temadaki dosyaları tanımış, ardından index.php içerisindeki kodlardan bahsetmiştik. Şimdi ise template.css dosyasından bahsedeceğiz.

template.css dosyasını açtığınızda karşınıza aşağıdaki kod yığını olarak tabir edebileceğimiz yazılar çıkacaktır. Buradaki kodlar sıfırlama kodları dediğimiz kodlar. Buradaki kodlar her tasarımcıya göre değişiklik gösterebilir. En genel anlamda aşağıdaki şekilde kullanılmaktadır.

/* Tarayıcılar için ortak css sıfırlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus, a:focus, a:active{ outline: 0; }
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
table{border-collapse: collapse; border-spacing: 0;}
.soruncoz:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.soruncoz {display: inline-block;}
* html .soruncoz {height: 1%;}
.soruncoz {display: block;}
a img { border: none; }
a { color: #000; text-decoration: none;}
a:hover, a:active, a:focus { color: #000; text-decoration: underline;}
/* Sıfırlama Son */


Bizi asıl ilgilendiren bölüm sıfırlamalar sonrasındaki bölümdür. Burada şimdilik sadece body tanımlaması yapılmış durumdadır. Temamızın index.php dosyasındaki tüm sınıfları burada tanımlayacağız.

/* Anasayfa Genel Kodlar*/
body{
 background-color:#fff; 
 font:normal 12px/18px Arial, Helvetica, sans-serif; 
 color:#000; 
}

CSS kodlarıyla ilgili detaylı bilgi almak için bu adrese göz atabilirsiniz. Biz sadece tema yapmamıza yarayan basit kodları kullanacağız.

(Daha önceki derslerimizden birinde temanın kağıt üzerinde çizimini yapmış, sütun ayarlamalarını yaptığımız bir iskelet resmini çizmiştik. Bu çizimimi fireworks programı yardımıyla parçalamıştık. Resimlere ayırma diğer adıyla slice'lama dersine geri dönmek için tıklayın)

Resimlere parçalama dersinin ardından xhtml kodlamasına başlayabiliriz.


Şimdi diğer adıma geçelim ve xhtml kodlamasına başlayalım. >>