Sådan bruges CSS Klasser og id'er

October 13

Sådan bruges CSS Klasser og id'er


Korrekt brug af CSS-id'er og klasser kan spare dig tid i at bevare dine style sheets, gemme dine brugere tidspunkt, hvor de henter dine slankere websider, og hjælpe dig med at skrive stile effektivt.

Instruktioner

Tildeling navne

1 Der er et par id'er, der bruges meget almindeligt på websider, for eksempel beholder (eller wrapper), header, indhold, sidebar, footer. De er gode eksempler på CSS-id'er, fordi navne der er selvforklarende. De beskriver formålet med div eller element de identificerer.

2 Både id'er og klasser skal have selvforklarende navne. Tricket er at vælge et navn, der vil være selvforklarende over tid.

Antag for eksempel, at du har en side element, der forklarer dagens tilbud. Du beslutter at gøre det røde. Du kunne enten navngive det "særlige" eller du kan kalde den "røde".

Navnet "særlige" ville være et bedre valg. Over tid, kan din farveskema ændres og et navn som "rød" ville være forvirrende, men et navn som "særlig" vil stadig hjælpe dig med at genkende formålet med klasse eller id.

3 Sørg de navne, du vælger vil stadig betyde noget, når du har brug for at revidere et typografiark, du ikke har rørt i seks måneder eller et år. De vil være gode valg.

Hvornår skal man bruge Class eller id

4 En ID kan kun bruges én gang pr side, for eksempel, kan der kun være én div på en side ved hjælp af ID-indhold. Men en klasse kan bruges mange gange på en side. For eksempel kan du have flere billeder på en side, der bruger en klasse kaldet "leftfloat" eller måske "rightfloat."

5 På baggrund af oplysningerne i trin 1, kan du tror, ​​du skal bruge en masse klasser og kun et par id'er. Faktisk det modsatte er tilfældet. For slankere markup, du ønsker at bruge klasser sparsomt som muligt. Anvendelse af et stort antal klasser har endda et navn, ligesom det var en sygdom eller noget. Det hedder classitis.

6 Klasser er undertiden nødvendigt. Men nogle gange, hvilket giver et element et ID og derefter bruge en efterkommer selector at målrette børn af dette element skaber meget mindre kode end at tildele en klasse til hvert barn element ville.

7 For eksempel antage, at du har nogle hyperlinks i en liste. Du kunne style links ved at tildele en klasse til hver enkelt link på listen. Eller du kan tildele et id til listen container (UL eller OL element) og skrive en regel ved hjælp af en efterkommer selector. Antag, at du giver en UL et ID som "subnav." Her er en efterkommer selector der ville style et link uden at tilføje en klasse til opmærkningen.

subnav ul a: link {regel her}

8 Når noget sker igen og igen på en side på steder, hvor en efterkommer selector ikke vil arbejde, så en klasse er helt fint at bruge. Jeg allerede nævnt eksemplet med en klasse til at flyde et billede til venstre eller højre helst på en side.

Antag, at du har flere afsnit for hver vare, du beskriver fra dit katalog, men du vil have en af ​​de stykker til at være anderledes eller anden måde. Hvis det var det indledende afsnit, du kunne tildele den til en klasse kaldet "intro". Hvis det var et afsnit giver brugernes testimonials, kan du tildele den til en klasse kaldet "vidnesbyrd". Du kan derefter oprette en stil for klassen .intro eller klassen .testimonial der ville adskille disse særlige stykker.

TIPS

  • Class og id navne kan enten skrives alle med små bogstaver (f.eks #subnav) eller i camelcase (f.eks #subNav). Hvis du vælger at bruge camelcase, skal du sørge for du skriver det korrekt i HTML markup, eller en browser vil ikke genkende din CSS regel.
  • Der kan ikke være mellemrum i enten en klasse eller et ID navn. Det er OK at bruge en understregning i stedet for et mellemrum.

relaterede artikler