Correct gebruik van CSS-ID's en classes kan bespaart u tijd bij het handhaven van je stylesheets, sparen uw tijd van de gebruikers wanneer zij uw slankere webpagina's downloaden, en u helpen schrijven stijlen efficiënt.
Wat die u nodig hebt
- Een basiskennis van HTML
- Een basiskennis van CSS
- Niets nieuws nodig is in deze sectie.
Namen toewijzen
Er zijn een paar id's die zeer vaak op webpagina's, voor bijvoorbeeld, container (of wrapper), header gebruikt worden, inhoud, zijbalk, voettekst. Dit zijn grote voorbeelden van CSS-ID's, omdat de namen die worden gebruikt vanzelfsprekend zijn. Ze beschrijven het doel van de div-element of het element die zij identificeren.
Zowel de IDs en de klassen moeten worden voornamen spreekt voor zich. De truc is om te kiezen van een naam die spreekt voor zich na verloop van tijd worden zal.
Stel bijvoorbeeld dat u een pagina-element dat wordt uitgelegd van de dag aanbiedingen hebben. Wilt u het rode maken. U kan ofwel noemt het "special" of u zou kunnen noemen het "rode".
De naam "special" zou een betere keuze. Na verloop van tijd uw kleurenschema kan veranderen en een naam zoals "rood" zou verwarrend, maar een naam zoals "speciale" zou nog helpen u herkennen van het doel van de klasse of ID.
Zorg ervoor dat de namen die u nog iets zal betekenen wanneer u wilt een opmaakmodel dat u nog niet voor zes maanden of een jaar aangeraakt herzien. Die zullen goede keuzes.
Wanneer gebruikt u klasse of id.
Een ID kan alleen worden gebruikt als eenmaal per pagina, bijvoorbeeld, kan alleen er een div-element op een pagina met behulp van de ID-inhoud. Maar een klasse kan vele malen worden gebruikt op een pagina. Bijvoorbeeld, hebt u verschillende afbeeldingen op een pagina die gebruikmaken van een klasse met de naam "leftfloat", of misschien "rightfloat."
Op basis van de gegevens in stap 1, zou je denken dat moet u een heleboel klassen en slechts een paar IDs. Eigenlijk, het tegendeel is waar. Voor slankere aantekeningen die u wilt gebruiken klassen zo spaarzaam mogelijk. Met behulp van een groot aantal klassen zelfs heeft een naam, zoals het was een ziekte of iets. Het heet classitis.
Klassen zijn soms noodzakelijk. Maar soms geven een element een ID en vervolgens met behulp van een afstammeling selector naar doel de kinderen van dat element maakt veel minder code dan een klasse toewijzen aan elk onderliggend element zou.
Bijvoorbeeld, hebt u bepaalde hyperlinks in een lijst. U kan de stijl van de koppelingen door een klasse toewijzen aan elke interne koppeling in de lijst. Of u kon een ID toewijzen aan de lijst container (het UL of OL-element) en schrijven een regel met een afstammeling selector. Stel dat je een UL een ID zoals "subnav." Hier is een afstammeling selector die stijl zou het een link zonder een klasse toe te voegen aan de markering.
subnav ul een: link {hier regel}Wanneer iets steeds weer op een pagina op plaatsen waar een afstammeling selector zal niet werken gebeurt, dan is een klasse is heel fijn om te gebruiken. Ik noemde al het voorbeeld van het gebruik van een klasse te zweven een afbeelding naar links of naar rechts overal op een pagina.
Stel dat u hebt meerdere alinea's voor elk item dat u van uw catalogus beschrijven, maar u wilt een van de leden om een of andere manier anders. Als het was de inleidende alinea kon u deze toewijzen aan een klasse met de naam 'intro'. Als het een gebruiker getuigenissen geven lid was, kon u het toewijzen aan een klasse met de naam "getuigenis." U kunt vervolgens een stijl voor de klasse .intro of de klasse .testimonial die deze bepaalde paragrafen zou onderscheiden.
- Klasse en ID namen kunnen ofwel worden geschreven in kleine letters (bijvoorbeeld #subnav) of in camel geval (bijvoorbeeld #subNav). Als u kiest voor camel geval, moet u in de HTML-opmaak correct typen, of een browser niet herkennen van uw CSS-regel.
- Er kunnen geen spaties in een klasse of een ID-naam. Het is OK om een onderstrepingsteken gebruiken in plaats van een ruimte.
