BT ifade

Başka bir eski okul bellek takviyesi ...

Neden windos.status sağlamak için mi?
Javascriptlerinizi hata ayıklamak için bir şey olduğunda bir kabus olması için olabilir. Firefox Firebug thats hayatımızı kolaylaştırır ve ayrıca, Javascript en popüler hata ayıklama tekniği için oy ") (ALERT" gitmek gerekir gibi bir kaç kullanışlı addons var. Anywaz! ALERT sizin mis-davranıyor Javascript sadece isn'ta iyi bir fikir olduğunu derlerim eklerken birkaç örneği vardır. Örneğin! kimin pozisyonu uyarılmak gerekiyor dragble öğe var .... YOK YOK! Dont do it! ... Sadece sonsuz uyarılar alırsınız ya da gerçekte dragable DRAP mümkün olmayacaktır. Eh! Eğer durum çubuğunda hata ayıklama metinler dışarı yazma olabilir daha iyi durumlarda, var daha usful ... İnan bana! Onun Deneyim!

Varsayılan IE sözdizimi "window.status = 'hata ayıklamak için bir şey'" kullanarak tarayıcı Durum Çubuğu yazmak bıraktı ama FireFox değil. Yani pencere durum değişikliği etkinleştirmek için, aşağıdakilerden birini yapabilirsiniz.

Hakkında açın: config tarayıcıda (türü "about: config" Bu adres çubuğuna) ve araştırın
dom. disable_window_status_change. False olarak değiştirin ... sadece onun durumunu değiştirmek için girişini tıklayın.

Ya da alternatif

"Araçlar → Seçenekler → İçerik → JavaScript'i / Gelişmiş → Değiştir durum çubuğu metni"

Ve ayrıca kısa bir sözdizimi yani durumu kullanırsanız ... senin Javascript durum çubuğunda yazmaya, IE sadece tamam olduğuna dikkat fakat FireFox, tam sözdizimi yani window.status = 'kullanmak zorunda =' bazı hata ayıklama metin ' 'hata ayıklamak için bir şey

Ne ben, Kullanıcı Arayüzü (UI) gelişimi için çok yeni duyuyorum ne de ben bir usta ve ben her zaman dediği gibi, ben pişmanlık duymadan, daha bir tasarımcı daha UI geliştirici profiline uygun. Eh Oh! Ben ne yazıyordu? Ben UI Tasarım (profesyonel tasarımcı tatile gittiğinde), biraz içine almak ne zaman ... Bir süre için her şimdi ve sonra, şimdi (herhangi bir daha az değil yıl olmalı), hep edemiyorum benim tasarım gerektiği olmadığını düşünüyorum düzgün uyumluydu olabilir ya da olmayabilir (içtenlikle ben de istedim,% 100 standartlarına uygunluk başarmak olabilir değil). Sonra kendi kendime söylediğim, ne saçmalık! ... Tasarımı (teknik olarak) ziyaretçi kaçmak yapmak ... ya da sıçrama değil, basit, güzel ve öncelikle kullanışlı görünüyor olmalıdır. Güzel bir tablosuz CSS düzeni tüm akıllı HİPER METİN ve web sayfanızın deri altında Cascading Style Sheet habersiz olan ziyaretçi, ... Zilch için ne iyi olurdu!
Bu, güzel görünmek ve kullanımı kolay olmalı ... sonra standartlara şeyler tüm geliyor.

Ben yüceltilmesidir Jason Fried, bu blog girişi stumbbled 37 Sinyaller 2004 yılında benzer bir şey yazdı ve neredeyse 5 yıl, inan bana (farkında 37 sinyalleri Basecamp, Campfire vb gibi bazı harika web uygulamaları yarattık onces değildir olanlar için) ve çok bu yana değişmiş değil ... Ben tamamen söylemek zorunda ve ona, onun sadece kendi hislerime hakkında anlattıklarını hakkında emin gerçek değildir ne katılıyorum olarak ben, görevinden okumak için mutlu olduğunu ve bu yüzden benimdir

Jason Fried: "Orada bir yol CSS ve XHTML ve Standartlar ve Erişilebilirlik hakkında konuşmak çok fazla olduğunu ve yeterli sayıda insan hakkında konuşmak değil. CSS ve Standartlarına Uyumlu Kod sadece araçlardır - Bu araçları ile inşa bilmek zorunda. Harika, ben senin UI tabloları kullanmak değildir sevindim. Öyleyse ne yapmalı? Hala insanların hedeflerine ulaşmak izin kimin umurunda. Web standartları büyük, ama insanların kendi standartlarını şeyler (ve bu online yapmak hala çok zor) yapılan alıyorum içerir.

UI tasarımcıları yapıyoruz aynı eski temel hatalar ", diğer tarafta insanı unutarak" - kendi kod daha iyi görünüyor bu sefer hariç. İnsanlar - yok kodu doğrulayıcılar - Kullanım arayüzleri ".

Ödeme Jason Fried tam makale

DISCALIMER: Bu hepimiz standartları hakkında rahatsız olmamalı anlamına gelmez. Standartları olan ve mümkün olduğunca onlara sopa iyidir. Biz sadece bu iyi UI tasarım anlamak gerekir her zaman% 100 Standartları complience veya tam tersi anlamına gelmez ....

Benim dersler listemde, ben bir kaç UI Tasarım ve Geliştirme Altın Kuralları ... Heres TOP 10 izleyin ... sen de onları takip yok ki ...

1. Kullanıcıların bak. Kullanıcıların yapmak veya sitenize zarar verebilir. Kullanarak web sitenize bütünüyle aciz bir toplam idoit gibi kullanıcı bakmak, yapmak etmemektedir. Yani kötü olur!

2. Basitlik tutun ve birincil ışık tutmaktadır Kullanım Kolaylığı. Ekranda çok şey var, daha yüksek bir kullanıcı karışık veya orijinal görev uzaklaşmayınız ihtimali.

3. SINIRLARI olun ... donot KULLANILABİLİRLİK, erişilebilirliği ve standartları içine çok fazla şımartmak. Etkili standartları kullanın ve onları ekibine anlatabilmiş. Bu ürün kıvamında sağlayacaktır

4. Gereksinimi Prototip. Beri kullan Arayüzleri ZENGİN olan bu gün, Prototipleme her zaman sadece basit wireframes yapmak daha iyidir ve ikincisi iyi etkileşimler geçersizdir, istemci geliştirilmektedir nihai ürünün net bir görüntü elde etmek için başarısız olur. Her zaman, bu son teslim içine prototip dönüştürmek için daha kolaydır. Ayrıca! prototip ile herhangi bir etkileşim sorunları daha önceki gelişim döngüsünde gidermesinden olabilir.

5. Tasarım ve etkileşim içinde Tutarlılık çok Önemlidir. Öngörülemeyen etkileşimleri ve Gizmos ile kullanıcı karıştırmayın etmemektedir.

6. Için "Tasarım Misyonu" anlayın. Hazır Sonuçlar tasarlanan sayfa beign birincil eylem odaklanın. Ayrıca, sayfada Seconday eylemlerin bir listesini yapın ve bunları öncelik.

7. Site kullanıcılarının uygun geri bildirim sağlayın. AJAX etrafında tasarlanmış web sitelerinin çoğu, sayfa değişiklikler hakkında kullanıcıya görsel ipuçları verir. Kullanıcı o yapar herhangi bir görevin tamamlanmasını bir onay verilen zorundadır. Kullanıcı bekleyin ve örneğin için, sanırım yapmak etmemektedir. Dosya uplaods için ilerleme göstergeleri sağlar.

8. Uygun kontrolleri kullanın. Örneğin Kullanım için sadece, donot kullanıcı seçme kutularını kullanarak 200 şehirlerinden biri seçmesine izin küçük listeleri için açılan listesinden seçin. Bir düğme ve bir bağlantı arasındaki farkı anlayın. Bir bağlantı ve düğme farklı amaçlara sahip, donot diğeri için birini kullanın. Bir sayfa daha kolay etkileşim yapma hakkı kontrolü sağlayın. Menüler kullanmaktan kaçının, o daha iki düzeyde derin vardır. Tekerleği yeniden icat etmeyin. Onları sadece çok gerekli ise özelleştirmek, standart denetimlerini kullanın. Yarattıkları ve kullanım yüceltilmesidir sitesi için hazır, bağımsız test edilebilir, böylece sitenizin ilk el için gereken her türlü özel denetimler tanımlayın.

9. Donot tasarım üzerinde çok fazla yineleme. Unutmayın! Tüm ürün başına daha o tasarımı oluşur. Tasarım tekrarlamaları için proje programınıza uygun zaman çizelgeleri oluşturun ve ona sopa. İterasyon bizimle çalışıyor ve ne, sorun noktalarını ortaya çıkarmak değil ne olduğunu bulmak için yardımcı olur. Güzel bir arayüz zaman alır gibi, tasarım tekrarlamaları doğrudan rework denk etmediğinden, böylece geliştirme döngüsünün başında yineleme için zaman sağlar. Çok fazla rework tarihleri ​​jeopradize olabilir.

10. Arkanıza yaslanın ve bazen bir kullanıcı gibi düşünün.

Ben durumun bu commaned çünkü etrafında kazmak zorunda olduğunu Javascript hile başka bir küçük takıyorum Heres. Ben iki kez "windows.onload" direyebilmiştir nerede web sitelerinden biri olarak, bu durum vardı. Benim gibi deneyimsiz bir zihin (Dürüstçe javascript Çerçeveler ve kütüphaneleri kullanarak beri, benim kendi ... üzücü ama gerçek üzerinde basit şeyler yapmak unutulmamalıdır var, söylemek zorundayım) gelmiş olacak ilk şey, aşağıdaki yöntemi ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 vs ..

Üzgünüz söylemek ama, bu işe alışkanlık ... Javascript kadar yürütme bilimi tartışmak istemiyorum ... ama benim son tecrübesine göre, sadece son fonksiyonu (onloadfn3) hasta aslında idam alacak.

Normal durumlarda, maden (biraz sonra bahsedeceğim olan) farklı olarak ... Eğer mutliple onload fonksiyonları çalıştırmak için aşağıdakilerden birini yapabilirsiniz ....

Bu gibi VEYA şey

 fonksiyonu doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Benim mevcut durum için, yukarıdaki birini kullanamazsınız ...
Neden windows.onload iki kez aramak yerine, tek bir onload fonksiyonu içinde iki işlevi çağıran bu gerekir mi? İşte benim sorun deyimi kısaca bir göz olduğunu ...

"Sitem sayfaları WORDPRESS tema gibi yapılandırılmıştır .... yani tüm site sayfalarında yer alır ortak bir header.php ve footer.php vardır. Bazı ortak onload fonksiyonları yapmak Footer.php bir onload fonksiyonu implementaion yoktur. VE dışında ortak onload fonksiyonu tarafından yapılan olanlardan kendi OnLoad bir şey gereken birkaç sayfa vardır. Ben window.onload işleyicisi doğrudan geri arama işlevi atarsanız, "Footer.php önceden atanmış geriçağırımları fazla kaçacağım

.... Benim sorunum anlaşılmaktadır ?

Eh! Ben buldun o birkaç çözüm vardır. Hepsi çok benzer ve özellikle Simon Willison (tarafından verilen bir çözüm implementions http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Çözüm:

Sadece site bu javascript kodu ekleyin ...

 fonksiyonu addLoadEvent (func) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'işlev') {
        window.onload = func
     } Else {
        window.onload = function () {
            {(oldonload) if
                   oldonload ()
           }
           func ()
        }
    }
 }

Ve bunun yerine her zamanki "windows.onload" nin diyoruz

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 Sayfa yük * çalıştırmak için / * daha fazla kod
 }); 

Bu kod parçası avantajları ...
1. Öncelikle, bir önceki tanımı overridding olmadan, kodunuzun ayrı bölümden çağrılır, birden fazla windows.onload etkinlik sağlar
2. Gerçekten mütevazi olduğunu. Bu sizin diğer scriptler ile bir dosya veya ayrı bir dosyaya yerleştirilebilir.
3. Bu window.onload zaten ayarlanmış olsa bile çalışır.

Ben bu bize UI ve senaryo yazarları günlük olarak bir gün bunu yapmak gerekir gibi birçok, google bulmak için bir doodle olacağını düşündüm, bir içine PHP kod parçacığı (. Php) ile takıyorum bir bit include Smarty Şablon (. tpl). Ben tam cevabı ... bir milyon arama sonucu bulmak daha da zor, daha kolay / popüler Sorgunuzla gerçekleştirdi ancak bunların çoğu "dosya" için başvuran Smarty de içerir ... bu aşağıdaki sözdizimine sahiptir

{Dosya = "include / header.php" ekleyin}

Bu aslında ince dosya inlcuded ama metin olarak, ne istediğini dahil dosyanın sonucudur. (Yukarıda bir şablon dosyası içinde şablon bulunmaktadır kullanılır unutmayın). Son olarak biraz persiverance ile .... Benim gereksinimine cevap olan bir slighty modifiye sözdizimi, stumbled ... İşte öyle ... Eğer havn't zaten bir tane buldum

{Include_php file = "include / header.php"}

Başka çabuk tut. Burada basit ve CSS GÜÇ kullanarak güzel bir şey ... ama başlamak zor kavrayabilme (ve kesinlikle ben değildim) idi. Dropshadow ekleme, Photoshop ANF Fireworks vb düzenleme araçları gibi bazı görüntü kullanarak, bir çoğumuz için kek bir peice olabilir
Ben CSS kullanarak gölge için tercih nedeni genellikle bir uygulama bir sayfa tasarımı / html oluştururken, gereksinimleri yineleme tutmak olmasıdır. Ben freinds listesinde veya bir resim galerisi gösteren olanlar gibi birçok görüntü ile var olan bir web sitesi olarak, ne demek, bunun için, işleyemeyiz zaten eklemek veya gölgeleri kaldırmak için boş olmuştu görüntüleri tüm yükünü zor olacak olsun.
Bu ekstra bölümler veya eklemek için htmls oluştururken biraz ileri görüşlü yapmış Eğer öyleyse, genellikle durum XSL, PHP bu simgeleri / küçük üreten bir döngü Mantık olması. JAVA veya başka herhangi bir programlama / betik dili, istediğiniz zaman ekleyebilirsiniz, sonra sadece gösteri ve sürekli değişen müşteri gereksinimleri uyarınca, CSS Display özelliğini kullanarak bu gölgeler gizleme meselesi ... Ben ileri düşünerek bu tür yapılan havn't Bu daha önce ... ama ahev şimdi başladı!

Aşağıdaki örnekte, orijinal resim gölge serbesttir ve dropshadows gerektiği gibi uygulanır! AYRICA, ben hakkında benim önceki Tut hileler (Well! bu muhtemelen Rehberler kısa çeşitli vardır, bu yüzden sadece onlara "Tut" çağırıyor haklıdır) kullanarak, biraz fazladan gitti CSS Klip özelliğini kullanarak göstermek için sadece

Orijinal Görüntü

CSS DropShadow Sonuçlar

Demo bilgileri | İndir Kaynak Kodlarını

Neden bunu anlamak istiyorum?? Humm ...!

CSS yazarların çoğu o CSS Klip özellik muhtemelen en un kullanılan CSS özelliklerini biri olduğu konusunda hemfikirdir. O da benim için çok doğruydu ve ben değiştirerek başlayana kadar, ihmal en mutlu oldu MooTools İKİ Tokmak (Pin) Slider Bileşeni (Range Gösterge ile) .

Kaydırıcıyı aralığı belirtmek için kırpılır backgroud görüntüleri (değişken genişlik bölünmeye karşı) kullanarak Slider bileşeni değiştirmek için bileşeni kullanıcıların birinden iyi bir öneri vardı. Böylece eğlenceli ama CSS Klip mülk suları (benim için tabii) un imtiyaz girmek için benim zamanım geldi.

Eh! ne kadar zor olabilir? Hiç benzemiyor ... EVET ve HAYIR. CSS Clip özelliği kullanmak için sözdizimi oldukça dik ama anlamı / usuage biraz croocked olduğunu. Benimki gibi bir hafıza ile, her şey benim Slider Senaryo üzerinde rework oturup ... kendimi benim komut oluşturduğunuz mantığı hatırlatmak için, bu CLIP özelliğinin kullanımını atıfta tokeep var .... Bu nedenle! gelecekte (ve ayrıca görünüyor olanların yararına CSS Klip Property tarafından boggled) hatırlamak için bir umut ile, kalem aşağı düşünülmektedir

CSS Klip ne yapar?

Klip CSS 2.1 görsel efektlerin modülü kısmıdır. Basitçe söylemek gerekirse, işini bu nedenle ek dosyaları (zaten Slider Bileşeni daha iyi kullanmak için bu özelliği koyduk oluşturmak zorunda kalmadan görüntüleri kırpma ve küçük oluşturmak, kırpılan bir nesnenin üzerine görünür bir pencere yerleştirmektir )

CSS Klip özelliğini kullanarak, rect şeklini kullanarak bir kırpma oluşturabilirsiniz. Rect kullanarak diğer birçok CSS Özellikleri (margin, padding vb) gibi gerektirir dört koordinatları Üst, Sağ, Alt, Sol (TRBL). Bu dört koordinatları (a bir süre atmak içine beyin gönderir) kullanarak, klip kırpma bölge nasıl hesapladığını bir yakından bakmak bu özelliğin croocked doğasını yansıtır. Şimdi şaşırtmak için alttan üstten başlar ve sağ sol başlar. . Sen bu söylediklerini bakın? .... Bu yüzden bu yazı ...

Bu küçük karmaşa kolaylıkla aşağıda CSS Klip / rect özelliği bu görsel açıklama ile yok olabilir!

CSS Klip Gereksinimleri

Biz başladık görevi (ve ayrıca geniş açılı görüntü) bir squarer görünen bir görüntü içine aşağıdaki Küçük resim derlemek için

Orijinal Thumbnal / Resim	Sqaure Thumbmail için Klip Gereksinimleri

CSS Klip Sonuçlar

Demo bilgileri | İndir Kaynak Kodlarını

Bu soru daha önce birkaç kez aklımdan geçti, daha önce de siteler üzerinde çalışırken, hangi site / WordPress PHP ve çevresinde bir acemi portal.Being bazı bölümlerinde bloglar veya içeriği yeni bir tür göstermek için WordPress kullanılmış, ben devam "Bu kek benim takıyorum değil" diye düşünerek, bu procastinating. Nihayet! çözüm için biraz etrafında diggin başladığında bu gereksinimi, burnuma kadar geldi.
Ben gerçekten ben aslında sadece PHP biraz ve WordPress API kullanarak, WordPress çalışan bölümün dışında başka sayfada başlıklarının bir listesini veya en son yazılan görüntülemek için olduğunu düşündüm daha kolay olduğunu bulmak için sürpriz oldu .

İşte yapmanız gereken şudur: -
Açıklama nedeniyle, sitenizin olduğunu varsayalım http://www.inchembur.com/ ve bu sitenin haber bölümüne sahip http://news.inchembur.com/ (WordPress çalıştığı). Şimdi gereksinimi en son yazılan göstermektir http://news.inchembur.com/ yani, ana sitenin ana sayfasında http://www.inchembur.com/index.php

Adım 1: index.php içinde aşağıdaki kod takıyorum ekleyin, WordPress API dosya ekleyin. Size yazılan görünmesini istediğiniz sayfanın üst ekleyebiliriz.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); WordPress Theme / / Disbable kullanımı
('/ var / news.inchembur.com / wp-blog-header.php') gerektirir; / / WordPress API Dahil
; // Get Latest Post query_posts ('showposts = 1'); / / Son mesaj alın
?>

Include yukarıdaki takıyorum, biz sadece tek ve en son mesaj alıyorsanız. Eğer denemek isterseniz daha fazla varyasyon kazmak için çekinmeyin query_posts() belgeler .

Adım 2: Şimdi, en son WordPress yazı göstermek istiyorum İndeksi / Ana sayfa bölümünde http://news.inchembur.com , aşağıdaki kodu kullanabilirsiniz. Demek reklamınız styling bölümleri, açıklık ve tasarım ihtiyaçlarına göre sınıflar için çekinmeyin gerek yok.

Adım 3: Hiçbir Adım 3 yoktur ... o Thats ... bitirdiniz!

Son mesajı karşıt olarak nasıl Belirli bir yazı / sayfa gösterir: -
Bu kolayca argümanları değiştirerek önemleri olabilir query_posts() sayfa numarası veya sayfa sülük dahil etmek

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = ilgili');

ya sen, gönderilen mesajların sayısını kontrol edebilirsiniz:
) ; query_posts (showposts = 3);

Bazen pageweight tutmak için ... biz parçalara Betiklerimizin bölünmüş ... gerektiğinde bu javascript parçaları olarak yüklenir ve olabilir (bir olay veya vb bir bağlantıyı veya düğmeyi tıklayın.)

Yükleniyor Javascriptlerinizi dinamik basit ve oldukça yalındır aşağıdaki gibidir ...

= “text/javascript” > <Script type = "text / javascript">
fonksiyonu loadNewScript (kaynak) {
var s = document.createElement ('script');
s.setAttribute ('tip', 'text / javascript');
s.setAttribute ('src', kaynak);
document.body.appendChild (s);
}
</ Script>

ve vücudun herhangi bir yerinde aşağıdaki çağrı bağlantısı olabilir veya belgenin kendisi bu script "onLoad" olabilir ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Yük Dinamik script </ a>

veya

<body onload="loadNewScript('myDynamicScript.js');">

Eğer css kişi iseniz, çapraz tarayıcı çalışma düzenleri almak ağrı bilemez. IE8 henüz bize geliştiriciler için işleri başka bir anahtar konumundadır. Anywaz! Senin mükemmel çalışıyor IE7 CSS (ve öncesi) ve Firefox aniden IE8 Aksilik başladı dün yaptığım gibi sizi, bu konuda üzerine vurduğunuzda, bu YTL ... Bu güzel an için benim sorunları çözmeye gibiydi ....

Meta beyanı kullanarak, biz IE8 kullanmak istiyorum rendering motoru belirtebilirsiniz. Yani IE8 IE7 gibi render zorlamak için ... belgenizin başı içine aşağıdaki Meta Tag ekleyin: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Varsayılan olarak IE Meta olacaktır: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
Hangi IE8 yeni standartlar modunu kullanarak sayfa render yapacak.

Gerekirse, bu dizimi aşağıda diğer tarayıcılar için barındırmak için kullanılabilir:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Doctypes Hakkında DAHA:

Henüz "Doctype" denilen hayvanın sıralama aşina IF ... Burada bazı hızlı okuma olduğunu
Doctypes nelerdir? TARAYICI tuhaflıklar & KESİN Mod nelerdir?
XSL DOCTYPE ayarlanması

Doctypes hakkında derinlemesine bir anlayış daha fazla bilgi için, bu bağlantıları ziyaret etmeyi deneyin ...
A List Apart: Sağ DOCTYPE ile Sitenizi Fix!
A List Apart: DOCTYPE Ötesinde: Web Standartları, İleri Uyumluluk ve IE8

Not: rağmen çoğumuz HTML / CSS insanların doğru DOCTYPE ayarlanması, bizim belgelerde DOCTYPE izleyen zamanlarda önemini ihmal edilmiş, en çapraz tarayıcı konulara cevap genellikle.

Bir CSS Reset / CSS çeşitli tarayıcılar arasında tutarlılık oluşturur belirli bir başlangıca eleman stilleri bir dizi yapacaklarmış edilir.

Hepimiz çapraz tarayıcı CSS Kullanıcı yazma kabuslar yoluyla olmuştur. Yani bizim CSS yazmaya başladığınızda, herhangi bir çapraz tarayıcı tutarsızlıkları / kaldırmak sıfırlamak için ilk sıfırlamak için bir uygulamadır. CSS sıfırlar, sen üzerinde bina başlatmak için temiz bir temel vererek, ile CSS başlaması CSS basit birkaç satır vardır.

Normalde kullanma eğiliminde CSS sıfırlar bu gibi görünüyor

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Tarayıcı yazı tipi boyutunu sıfırlayın
Ayrıca aşağıdaki satırı tarayıcı yazı tipi boyutunu uygulanmış reset dikkat ...

html {font-size: 76%;}

Yukarıdaki CSS sıfırlar tarayıcı yazı tipi boyutunu 10 piksel, ve bu da göreceli yazı tipi boyutunu (imkanlar SES bir WAI uyum her önemli olan) çalışmayı kolaylaştırır
Örneğin, aşağıdaki tanımı, bir span içinde font-size 10 piksel ve paragarph 14 piksel olarak ayarlanır ayarlanır ...

span {font-size: 1em;}
p {font-size: 1.4em;}