Hvordan lage ID-stiler i Cascading Style Sheets (CSS) - Dummies

En ID-stil er en slags hybrid Cascading Style Sheet (CSS) stilregel som kombinerer visse elementer av både tilpasset klasse og tagdefiner stiler. Med en ID-stil blir deklarasjonene som er definert i den stilen, automatisk brukt på et objekt på siden som har et id-attributt som samsvarer med idnavnet i ID-stilen.

Hvis du vil stile et objekt med et id-attributt, må du først opprette en velg som inneholder tallsymbolet (#) etterfulgt av idnavnet, for eksempel #sidebar, og legg så mange erklæringer til ønsket stil, som i følgende eksempel:

#sidebar {border: 1px dashed # cad0d6; margin: 0px 1px 0px 0px; polstring: 10px;}

Når du har opprettet stilen din i CSS, legger du til id-attributtet og stilnavnet til åpningstegnet til objektet eller annen HTML-container-tag som bruker stilen, som i. Etiketten er en blokkbeholder. Vanligvis inneholder blokknivåetiketter inlineelementer og andre blokkeringselementer.

For å illustrere denne ideen ytterligere, anta at du har et lag på siden din (ved hjelp av taggen) som inneholder en overskrift som sier "Popcorn Makers" og under det en liste over fem forskjellige merker av popcorn beslutningstakere for salg.

Når du gir laget et ID-attributt for popcornmakere, bruker du syntaks ID = "popcornmakere" og lager en stil med syntaks #popcornmakers, blir denne ID-stilen automatisk brukt på laget.

Her er et eksempel på hvordan denne ID-stilen er skrevet i CSS:

#popcornmakers {font-family: Georgia, "Times New Roman", Times, serif; bakgrunnsfarge: #FFC; grense: 1px solid # 039; posisjon: absolutt; bredde: 330px; høyde: 180px; z-indeks: 1; venstre: 50px; topp: 50px; padding: 10px;}

Og her er hva HTML-oppslaget ser ut:

id = "popcornmakers" >> Popcorn Makers
Presto Hot Air Popcorn Maker

Klassisk Popcorn Popper < Retro popcorn maker
West Bend Housewares Popcorn Maker
Cuisinart EasyPop Popcorn Maker
På samme måte som den omdefinerte selgeren, som automatisk endrer hvordan innhold som er omgitt av en bestemt kode, når som helst et stilnavn bruker # id-syntaks, brukes stildefinisjonen automatisk til objektet med tilhørende id-attributt.