Snabbtips Spara tid genom att använda flera klasser

En av de mest ansträngande aspekterna av webbutveckling skriver ut oändliga mängder CSS-styling för olika element - som bara skiljer sig något i stil från varandra. Det har tagit livet (eller vilja) av många en begåvad formgivare. Tja, varför ge varje element sin egen unika CSS-post, när du kan mixa matchning och lägga till återanvändbar CSS-styling till element med flera CSS-klasser?

Steg 1: Ställ in CSS

Låt oss börja med att identifiera och skriva ut några av våra vanligaste CSS-markup. Vi ställer in dem som enskilda stilar. De som vi har satt upp här är de mest grundläggande, men samma teknik kan tillämpas på även de coolaste CSS 3-egenskaperna.

 .primaryColor färg: blå;  .articleImage border: 1px solid # 292929; vaddering: 5px;  .standOut font-size: 22px;  .important font-weight: bold;  .floatRight float: right; 

Steg 2: Tillämpa klasserna i vårt dokument

• Denna text blir blå och fet

• Den här bilden kommer att svängas till höger, och kommer att ha lite vaddering och en kant.

• Denna text kommer att bli enorm

• Denna text blir blå, 22px stor och fet.

Varför det är användbart

Detta kan vara en stor hjälp, särskilt när du utformar layouter ... du kan använda en klass för att definiera storlek och bredd och en annan klass för att definiera positioneringen. Hoppas detta hjälpte!

Redaktörens anmärkning: Tänk på att i några av de äldre webbläsarna - vilket betyder äldre än IE 6 - kommer denna "multipelklass" -metod att misslyckas. Vad är dina tankar om detta tillvägagångssätt? P.S. Har du en mörkare snabbtips? Maila oss och vi pratar.