home > articole > css-7-sfaturi-pentru-ati-usura-viata.php

CSS - 7 Sfaturi pentru ati usura viata

Articol adaugat pe data de 12 Septembrie 2010 de Mihail Alin

In acest articol va voi prezenta cativa pasi care ar putea sa va "usureze" viata in momentul codarii in CSS

resurse web
Autor :   Mihail Alin

Fiecare persoana care se considera web-designer, intr-un anumit moment va fi "obligat" sa foloseasca CSS.M-am decis sa va indic cativa pasi pentru a putea lucra mai repede cu CSS-ul dar si pentru a evita erori foarte des intalnite in ziua de azi.

1. Foloseste "RESET"

Dupa cum am spus, de foarte multe ori, Reset elimina valorile elementelor de pe pagina care sunt aplicate prin "default" de catre navigatoare.Cum ar fi : heights,font sizes, margins, headings, paddings, etc..Reset te ajuta sa detii controlul asupra design-ului.


MeyerWeb este un Reset foarte popular

2. Organizeaza-ti foaia de stiluri

Imi aduc aminte cum eram la inceput!! Scriam regulile pentru header de exemplu, pe urma pentru footer si tot asa, le incurcam atat de mult incat iroseam mai mult timp cautand o regula pentru anumit element decat avansam cu codul.
Este foarte importanta o asezare corecta a regulilor pentru a le putea indentifica mai usor. Cel mai simplu si logic este sa incepi cu o structura Sus-Jos.Ah da, nu uitati, comentati fiecare sectiune a codului.

/******** header ************/

stilurile aici 

/****** continut ********/

stilurile aici 

/***** etc. ******/

3. Nu pierde timpul, combina elementele

Sa spunem de exemplu ca folosesti tag-ul <h1> si <h2> pe pagina.In loc sa scrii de doua ori acelasi cod pentru amandoua tag-uri,mai bine scrii odata pentru amandoua.Cum ? Este foarte simplu :


h1,h2 { 
font-family: tahoma; 
color:#096;
}

4. Prima data HTML-ul

Dupa cum probabil ati observat prin alte tutoriale facute de mine, am specificat ca cel mai bine este sa scrii codul HTML pentru toate pagina si pe urma sa continui cu prezentarea(CSS).

5. Foloseste clase multiple

Cateodata probabil o sa doresti sa adaugi mai multe clase unui element, nici o problema, se poate realiza foarte usor.Sa spunem ca avem un DIV "content" care ai vrea sa il faci sa pluteasca pe partea din dreapta, dar deja ai o clasa care ar putea realiza acest lucru(.dreapta),poti folosi si aceasta clasa impreuna cu clasa "content".

<div class="content dreapta"></div>

6. Prescurteaza codul

#header{
padding-top:10px;
padding-left:8px;
padding-bottom:9px;
}

/*** este un pic cam mult cod,nu? Nu ar arata mai bine asa ? */

#header{
padding:10px 0px 9px 8px;// sus, dreapta, jos si stanga respectiv.
}

7. "Margin:0 auto" centrare

Sa spunem ca am terminat design-ul pentru o pagina, acum vreau sa il centrez pe mijlocul ferestrei. Foarte simplu :) invelim tot design-ul intr-un DIV dupa care :

#container{
width:950px;
margin:0 auto;
}

Nu uitati, o latime trebuie specificata pentru a putea centra.
Practic cu margin:0 auto; spunem navigatoarelor ca marginile TOP si BOTTOM vor avea valoare 0 , pe cand marginile LEFT si RIGHT vor fi automate, adica vor avea valori IDENTICE, fapt ceea ce centreaza elementul, sau in cazul nostru, toata pagina.



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul: