10cssipucu
CSS'e yeni başlayanlar için 20 kullanışlı ipucu
Eski geliştiriciler bir seb sitesini güncellemek için eskiden bir çok programa bağlı olarak işlerini yürütüyorlardı ancak CSS'in esnekliği geldikten sonra bir web sayfasının stillemek çok kolay bir hal aldı. Öyle ki yeni başlayan biri bile web sayfasının stilini çok rahat bir şekilde değiştirebilmekte.
Eğer güçlü bir stil dosyası oluşturabilmek istiyorsanız her zaman biraz bilgi toplamaya ihtiyacınız vardır ve bizim elimizde de yeni başlayanlar için kullanışlı 10 ipucu bulunmakta. Şimdi bunlara göz atalım.
1- reset.CSS kullanın
CSS tüm tarayıcılar için farklı ayarlamalar gerektiren bir stil oluşturma yöntemidir. Firefox ve Internet Explorer gibi iki ayrı tarayıcı için farklı ayarlamalar yapmanız gerekecektir. Ancak reset.CSS kullandığınız takdir de tüm ayarlamalar sıfırlanır ve boş ve gerçek bir sayfaya sahip olursunuz.Kullanılan birkaç yaygın reset.CSS – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli
2- CSS'de kısaltma taktiklerini uygulayın (Shorthand CSS)
CSS size kod yazma imkanı sunamktadır ancak bundan daha önemlisi size daha kısa biz kod yazma imkanı sunmaktadır. Shorthand kullanmak sizin yazdığınız CSS kodunu daha kısa ve anlaşılır hale getirmektedir.Bu tekniğin kullanılmadığı örnek bi CSS kodu:
.header { background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; }
Şimdi bu kodun shorthand taktiği ile yazılmış halini görelim.
.header { background: #fff url(image.gif) no-repeat top left }
3- ID ve Class mantıklarını anlayalım
ID ile Class'ı birbirinden ayıran en önemli özellik şudur: ID sayfada bir yere aittir, yani sayfada bir defa kullanılmalıdır. Ancak Class sayfada bir çok biçimlendirilme işinde kullanılmaktadır, yani birden çok yere ait bir komuttur.ID tanımlarken " # " kullanılır, Class tanımlarken " . " kullanılır.
Daha fazlası için - CSS Yapısı, Div ve Class, Div ve Class arasındaki fark
4- Daha çok <li>
<li> tanımlaması doğru bir şekilde <ol> veya <ul> ile kullanıldığı zaman sayfa içerisinde ki yönlendirmeler daha düzgün bir hal alacaktır.Daha fazlası - Taming Lists, Amazing LI
5- <table>'yi unutun <div>'i kullanın
CSS'nin en kullanışlı elemanı <div>'dir ve bunu kullanmak birçok yönden daha avantajlıdır. Ancak tasarım kodlamada <table kullanmak <div>'e göre pasif ve cılız kalmaktadır. Çünkü içeriklerimizi <td> arasına sıkıştırmak kullanışlı değildir. <div> kullanımı <table>'ye göre birçok yönden daha avantajlı olduğu için ben bunu öneriyorum.Daha fazla - Tablo ve Katman, Tablo yerine Katman kullanımı, Table yerine Div
6- Web geliştirici ekini kullanın
Bazen her geliştiriciye yerinde, uygulamalı örnekler sunmak o mantığı anlamak için daha ideal gelmektedir. Çünkü bir şeyi yerinde oturmuş görmek mantığı daha çok açıklar ve geliştirici pratik yapmak için o mantık üzerinden gider.Web geliştirici için - Web Developer, DOM Inspector, Internet Explorer Developer Tool, DOM Inspector, Firebug
7- Bir tanımlamada çok komut kullanmaktan kaçının
Bazen birden çok etiketi bir tanımlamada kullanabilir bunlar tarayıcı için bazen karmaşık gelebilir ve tüm kodlamalar birbirine girebilir.İşte bu kodlamadan bir örnek:
ul li { ... }
ol li { ... }
table tr td { ... }
Aşağıdaki gibi kullanmanız daha doğru olacaktır:
li { ... }
td { ... }
<ul> veya <ol> içinde <li> ve <table> içinde <td> gibi iki iç içe elemanı tek bir satırda tanmıladığınızda hatalar meydana gelebilir.
8- !important'ı hatırlayın
Stil dosyanızı oluştururken iki tanımalama yapabiliriz. Örnek:.page { background-color:blue !important; background-color:red;}Burada gördüğünüz gibi arkaplan resmine iki tanımlama yapılmış ancak !important'la kullanılan tanımlama öne çıkmaktadır yani !important iki aynı tanımlamadan birini öne çıkarmaktadır. (Internet Explorer 6 ile sorun çıkabilir.)
9- CSS dosyanızı @import veya <link> ile ekleyin
CSS'i sayfalarınıza harici ekleme yönteminden başka 2 yolu vardir @import veya <link> yöntemidir ve kaynağınızda bir yığın görünmesini engellemektedir bu yöntemler.Daha fazla bilgi - CSS'i web sayfasına eklemek
10- Formlarınızı CSS ile düzenleyin
Web sayfanızdaki formlar her tarayıcı, işeltim sisteminde farklı olarak görünmektedir. CSS ile bunun önüne geçebilri tek bir görünüme kavuşturabilirsiniz.Daha fazla - CSS ile form yapmak, CSS ile form mantığı, CSS ile form tasarlamak