Sfaturi, trucuri și tehnici de css aspect și html

Această pictogramă Editare CSS 2, deși articolul nu este un cuvânt despre CSS Edit 2

Pentru început, câteva sugestii provocatoare:

1. Este timpul pentru a opri sprijinirea Internet Explorer 6

Majoritatea consideră CSS3 doar ca o oportunitate de a face colțurile rotunjite și se adaugă o umbră. Dar, de fapt, mult mai multe posibilități: fonturi care pot fi descărcate, outline-, o transformare, aspect flexibile caseta, aspect mai multe coloane, texturi circuite APROSAM mass-media și multe alte lucruri foarte utile.

CSS3 Deși încă în dezvoltare, cele mai moderne browsere suporta deja capacități de bază, de multe ori cu prefixe (de exemplu: -moz-border-radius și -webkit-border-radius pentru Firefox și Safari / Chrome, respectiv).
Nu uitați că, potrivit statisticilor majoritatea utilizatorilor încă mai folosesc browsere care nu acceptă CSS3 (toate versiunile de Internet Explorer). Dar, pentru a începe să utilizeze în valoare de CSS3 acum.

3. Reset CSS (CSS Reset)

Cauza așa-numita descărcarea CSS a fost că afișarea elementelor nu este standardizată, și în diferite browsere (sau chiar în același browser pe sisteme diferite) pot fi diferite. CSS Reset seteaza valorile parametrilor pentru toate elementele din același stat. În consecință, care obține un control mai bun asupra stilurilor și este mult mai puțin a unei probleme de compatibilitate cross-browser-ul, și, destul de ciudat, cantitatea de cod este redus. Am folosit CSS restarterul ultimele trei proiecte și planuri de a utiliza în continuare.

După cum sa dovedit, am folosit pentru a utiliza resetarea CSS, dar a fost foarte simplu și numai pentru indentare:

Acum, metoda folosită de mine este mult mai dificil și mai mult volum, puteți vedea în wiki meu pe pagina cod CSS Style. Da, acest lucru este cel mai faimos CSS Reset, propusă de experți bine-cunoscut în CSS Eric Mayer.

Cu toate acestea există nici un CSS-cadre, dar eu sunt mulțumit de tehnicile mele de aspect prezent și să-mi încă o dată pentru a face cu ei. Poate o lună sau două, am timp pentru a încerca, și eu sunt într-un alt articol, voi spune cum a fost rece și confortabil. Vă recomandăm insistent incepand cu cadrele de învățare CSS.

4. Metoda de așa-numita „curățare flux“

Recipientul exterior (blocul în care sunt celelalte blocuri) este complet „amortizare“ nested blocuri plutitoare, folosesc următoarea metodă:

moduri învechite de „curățare“:
Stil de preaplin. ascunse; container (pentru IE trebuie să adăugați înălțimea de 1%.). C preaplin trebuie să fie atent, deoarece va ascunde toate elementele care nu sunt introduse într-un bloc pentru care este setat.
Cea mai veche, și nu un mod foarte frumos - la capătul recipientului exterior se adaugă

sau

5. Atunci când este necesar să se lipi un „subsol“ în partea de jos a paginii

HTML ar fi:

Stiluri pentru „subsolul“ de 40 de pixeli în înălțime:

Aici proprietate font-weight din implicit a elementului p este normal. culoare și culoarea textului a fost deja stabilit pentru organism la nivel mondial. și moștenită de către toate sub-elemente.

16. Utilizarea CSS-Sprites

CSS-sprite - o imagine formată dintr-un număr de imagini care folosesc background-position pot fi atribuite diferitelor elemente.
Utilizarea sprite reduce numărul de cereri și mărește viteza de încărcare de pagini. Sprites - un lucru foarte util, demn de un articol separat. Eu scriu că nu vor, pentru că, la cererea în Google «CSS Sprites“ apare o mulțime de articole detaliate.

17. Încercați să utilizați dimensiuni relative de font în em și%

Acum am folosi întotdeauna următoarea metodă pentru a specifica dimensiunea fontului: corpul
Elementele rămase de dimensiune sau procente setul sau em-uri. În acest caz, font-size. 130% este egal cu 13 pixeli. 7em - respectiv, 7 pixeli.
Același lucru se aplică marjelor, în cazul în care nu este necesar pentru fiecare pixel aspect de potrivire și typesetting. Apoi, prin creșterea scara de marginile paginii va crește, împreună cu fonturi.

18. Nu este necesar să se scrie în unitățile de stil la zero valori

sunt necesare unitati pentru lungimi, cu excepția în două cazuri: linia de înălțime și zero. Ei bine, totul este clar cu zero - zero, este zero, nu există nici un punct în scris, după ce unitatea de măsură. O linie de înălțime pentru orice fără semn va fi perceput ca un multiplicator de dimensiunea fontului. De exemplu, o valoare de 1.5 va stabili o dată și jumătate distanță.

Observați modul în care site-ul arată și dacă toate link-urile sunt de lucru cu script-uri dezactivate dacă există text alb pe un fundal alb, din cauza imagini deconectate.

20. Depanarea

instrument de depanare elementară:

29. Elaborarea unui set de instrumente de așa-numitele

Toolbox - o colecție de stiluri utilizate în mod obișnuit. De exemplu, un set de instrumente de CSS-trucuri. Fiecare are propria lui.

31. Este necesar să se facă mai ușor codul

De multe ori, puteți face o divom în loc de două, trei sau mai multe atașat. De multe ori există un număr foarte mare de divuri imbricate care au fost făcute „doar în cazul“, dar apoi nu sunt utilizate.

33. Aflați un cod străin

Acest studiu, și nu copia mindlessly, fără a lua măcar încercarea de a înțelege.
5 ani în urmă am învățat site-uri CSS cod mozilla.org (și încă mai sunt mulți alții care nu-mi amintesc) și în jos, foarte mult el a părut să-mi izyashnym și-a îngrămădit. Foarte mult pentru mine acolo la îndemână în viitor.

34. Abonează-te la RSS blog-uri populare de pe dezvoltare web

35. colectează șabloane de cod

36. Aflați jQuery.

37. Utilizarea vorstku semantice

38. Nu te standarde prea alungare

În cazul în care opiniile diferă de multe ori, eu sunt de partea celor care spun că validatorul principal - un browser. Validarea pentru plăcuța de identificare «Valid XHTML # 038; CSS »- o pierdere de timp, și validatorii greșit. Standardele ar trebui să știe și să încerce să le urmeze, dar fără fanatism.

39. Citiți despre SEO-optimizare

Fiecare coder ar trebui să știe cum să optimizați site-uri.

40. Uita-te pentru proiectant

Egal după toate - dar ne impunem! De fapt, desigur, o glumă, dar adevărul în ea încă mai este.
De fapt, hai sfatul tuturor celor care au nevoie - un adevărat profesionist este întotdeauna schimbul de cunoștințele sale cu ceilalți.

41. Link-uri

World Wide Web Consortium (W3C) - au fost fac on-line. Sooooo multe informații utile (dar pe un burghez). Acolo puteți găsi validator.
Browser Compatibilitate Chart.
Habrahabr. Ei bine, dacă încă nu știu despre acest site ...

Mulțumesc. Eforturile tale nu au fost în zadar.