Menü ve Reklam Alanı
Sayfayı Paylaş

THB - Ücretsiz Hizmetler

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 CSSEric Meyer’s CSS ResetTripoli

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 ClassDiv 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 ListsAmazing 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 KatmanTablo 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 DeveloperDOM InspectorInternet Explorer Developer ToolDOM InspectorFirebug   


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 yapmakCSS ile form mantığıCSS ile form tasarlamak   

11 (Ek madde) - CSS için bir editör edinin

CSS kodlamak için profesyonel, ücretli/ücretsiz bir çok editör bulunmakta ve hepsinin fonksiyonları birbirinden farklıdır. biz sizler için 12 adet editörü burada toparladık, buradan istediğinizi seçebilirsiniz.
Bugün 10 ziyaretçi (26 klik) sitemizi ziyaret etti.

Copyright 2012. THB. Tüm hakları saklıdır. Tasarımlayan: Oğuzhan Acımaz.
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol