Sfat rapid Economisiți timp utilizând mai multe clase

Unul dintre aspectele cele mai extenuante ale dezvoltării web este scrierea unor cantități nesfârșite de stil CSS pentru diferite elemente - care diferă doar puțin în stil unul de celălalt. A luat viața (sau voința) a multora un designer talentat. Ei bine, de ce dați fiecărui element propriile sale intrări CSS unice, când puteți combina potrivirea și adăugați stilul CSS reutilizabil elementelor care utilizează mai multe clase CSS?

Pasul 1: Configurați CSS

Să începem cu identificarea și scrierea unora dintre cele mai comune marcări CSS. Le vom crea ca stiluri individuale. Cele pe care le-am stabilit aici sunt cele mai de bază, dar aceeași tehnică poate fi aplicată chiar și celor mai tari proprietăți CSS 3.

 .primarColor culoare: albastru;  .articleImage frontieră: 1px solid # 292929; padding: 5px;  .standOut font-size: 22px; . importanță font-weight: bold;  .floatRight float: right; 

Pasul 2: Aplicarea claselor în documentul nostru

  • Acest text va fi albastru și îndrăzneț

  • Această imagine va fi aruncată spre dreapta și va avea niște plăcuțe și o margine.

  • Acest text va fi uriaș

  • Acest text va fi albastru, cu dimensiunea de 22px și cu caractere aldine.

De ce este util

Acest lucru poate fi un ajutor masiv, mai ales când proiectați layouts ... puteți utiliza o clasă pentru a defini dimensiunea și lățimea și o altă clasă pentru a defini poziționarea. Sper că acest lucru a ajutat!

Nota editorului: Rețineți că, în unele browsere mai vechi - adică mai vechi decât IE 6 - această metodă "mai multe clase" va eșua. Care sunt gândurile tale în privința acestei abordări? P.S. Ai un sfat ucigaș rapid? Trimiteți-ne un e-mail și vom vorbi.

Cod