Gå til innhold

Webkafeen


Anbefalte innlegg

Videoannonse
Annonse

Fant et eksempel på google om at det kan brukes flere klasser også. Er det like riktig? 

 

Der skilte de klassene ved å gjøre følgende "triks":

 

.bold {font-weight: bold;}

.red { color: red}

<p class="bold red ">Denne teksten skal bli både rød og fet</p>

Endret av Kim T
Lenke til kommentar
Fant et eksempel på google om at det kan brukes flere klasser også. Er det like riktig? 

 

Der skilte de klassene ved å gjøre følgende "triks":

 

.bold {font-weight: bold;}

.red { color: red}

<p class="bold red ">Denne teksten skal bli både rød og fet</p>

Alt er riktig her bortsett fra at man gjerne ikke bruker klassenavn som "bold" og "red"

Lenke til kommentar

Dette er ikke triks, det er en helt normal og akseptert måte å gjøre det på. Men multiple classes fungerer ikke helt som det skal i IE6/IE5 (ikke overrasket nei). Men problemene kan omgås.

 

Det er faktisk også lurt, fordi du kan til en mer effektiv css kode. Om du f.eks har et design der du bruker bokser med ulik bredde, ulik farger på linjer og bakgrunn etc kan du da f.eks kode som følger:

 

<div class="large red box">some content</div>

 

CSS-en vil være f.eks slik

 

.large {
  width: 600px;
}
.red {
  border-color: red;
  background-color: some color;
  color: white;
}
.box {
  padding: 15px;
  border-style: solid;
  border-width: 1px;
}

 

Man kan også code som dette i CSS, div.large.red.

 

Med bare noen få elementer vil det være like greitt å bare lage en klasse for hver, men har man f.eks 4 størrelser og 4 fargevarianter, noe som gir relativt mange varianter, dvs man må skrive CSS for 4 versjoner på hver størrelse, dvs 16 tilsammen. Da blir det å bruke multiple classes som oftest en mer rasjonell måte.

 

Sjekker du kildekoden på ALA, vil du se at de bruker multiple classes, f.eks <div class="illustration right half">

Lenke til kommentar

takk for denne informasjonen. Hmm CSS filen blir mye mindre ved å gjøre det slik da. :D Da kan jo dette bli skikkelig gøy. Bare lurte på om det validerte noe jeg regner med siden det er så vanlig. 

 

IE later 7 er noe jeg har gitt nesten faen i på den siden jeg utvikler nå.  :whistle: For det er nemlig min personlige side og jeg vil ikke sy puter under armene på IE 6/5 folkene. Det er på tide å gå fremover i verden. 

 

Kim...

Lenke til kommentar

'IE later 7'..? Jaja.

 

Bolson: Det er ikke problematisk i IE6 å tildele flere klassenavn i HTML. Det er først når du kombinerer disse i CSS, som du gir eksempel på lenger ned i innlegget ditt, at IE6 melder pass. Hvordan IE5 takler dette vet jeg ikke.

 

Jeg bruker for så vidt denne praksisen overalt. Når det gjelder ID + class, har jeg ofte strebet for å sentralisere kode i det siste, eksempelvis samle CSS for normal tekststiling på ett sted. Da kan jeg for eksempel wrappe innhold med en <div id="special" class="generic"> (hvor special varierer) og overstyre de elementene jeg ønsker med den unike ID-en elementet har i tillegg.

 

Når det gjelder flere klasser, bruker jeg det mest i utlisting av elementer. Ofte når man floater elementer, setter man margin-right for å separere elementene. Ofte har man også et avgrenset område i bredden å holde seg innenfor. Det er bare mellom hver boks en vil ha luft, derfor får kanskje disse boksene slike klassenavn; <div class="product right">. Her settes alle stiler på .product, med unntak av at jeg nullstiller margin-right.right.

Endret av Haraldson
Lenke til kommentar
Er det galt i å diskutere om Postens nye logo ser ut som en pokemonball? Sikkert flere som har lyst til å si hva de mener.

Nå var det ikke det jeg henviste til, men mer det at man med fordel kan unngå diskusjoner i denne retningen;

Den røde er great-ball mens den blå er ultra-ball eller Team Aquas-ball. =)

(som et eksempel, det var flere å ta av)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...