Sådan bruges ID-vælgeren i CSS

Kan 15, 2024

I de sidste par tutorials diskuterede vi to ud af de tre typer CSS-regler. Den første type er HTML-vælgeren, der er baseret på og kontrollerer stilen for det matchende HTML-tag. Den anden type er klassevælgeren, der fungerer som en generisk stil, der kan anvendes på ethvert element på websiden.

Nu er det tid til at diskutere den tredje type CSS-regel, der kaldes ID-vælgeren. Som med klassevælgeren, kan ID-vælgeren anvendes til ethvert element på websiden. Det er dog meningen, at det kun skal bruges én gang på en side. Dette gør ID-vælgeren meget nyttig til dynamisk HTML og JavaScript. Teoretisk set, hvis du bruger ID-vælgeren mere end én gang på en side, skal de efterfølgende ignoreres af webbrowseren. Dette er dog ikke altid tilfældet. Det er meget vanskeligt at stole på webbrowseres forudsigelighed. Når du vælger at bruge ID-vælgeren, skal du derfor kun bruge den én gang. Lad os se på et eksempel.

Grundlæggende kode

. . .

Eksempel

. . .

ID-vælger

Inde i tags vil du bemærke, at ID-vælgeren begynder med hash-symbolet (#), og at det følges med det navn, du tildeler til ID-vælgeren. Som med klassevælgeren kan du bruge ethvert navn, du ønsker, men det er bedst, hvis navnet angiver, hvad ID-vælgeren vil blive brugt til. I eksemplet bruger vi det til at ID en speciel tekstsektion.

{egenskab: værdi;}

Også inde i tags følges ID-vælgeren af et eller flere ejendomsværdipar, der er placeret mellem krøllede parenteser. Disse egenskabsværdipar indstiller typografiens egenskaber. I eksemplet har afsnittet med special_text ID-vælgeren rødfarvet tekst.

. . .

Når du bruger ID-vælgeren i websiden, bruger du id-attributten i det åbne HTML-tag. Værdien for id-attributten er det unikke navn, der er givet til ID-vælgeren, i dette tilfælde "special_text". (id = "value") Dette er, hvordan vælgeren "forbinder" stilen til det ene HTML-tag, som du ønsker at anvende stilen på. I eksemplet ovenfor placeres ID-vælgeren kun inden i en

tag på websiden. Eventuelle andre HTML-tags på websiden skal ikke indeholde ID-vælgeren inde i åbningskoden.

Video Instruktioner: How to create tabe in html using notepad (Kan 2024).

Sådan bruges ID-vælgeren i CSS, HTML, typer CSS-regler, hvordan man bruger ID-vælgeren, CSS ID-vælgeren

Forrige Artikel

Næste Artikel

Relaterede Artikler

computere

Storybook-appanmeldelsessteder

Kan 2024

Kvalitet ikke mængde! Anmod ikke om en gennemgang af dit barns app fra hvert anmeldelsewebsted. Ikke alle websteder er interesseret i børns apps. Din gennemgangsanmodning vil gå tabt i mængden....

computere

Planner-klistermærker i Procreate - dagtags

Kan 2024

Lad os fortsætte med at arbejde på Day Covers-klistermærker i Procreate. Vi har startet et nyt lærred og malet en akvarelvask over lærredet til vores første af syv dagescover. Nu kan vi tilføje...