Opbygning af velformulerede websteder på dagens internet kræver en dyb forståelse af Cascading Style Sheets. Anvend en række CSS-stilarter på dit HTML-dokument for at informere udseendet på din webside.
Klasse- og ID-attributter
Designere skal undertiden kun anvende en stil på nogle af elementerne i et dokument, men ikke alle forekomster af elementet. For at opnå disse ønskede stilarter skal du bruge klasse og ID HTML-attributter. Disse attributter er globale attributter, der gælder for næsten alle HTML-tag- uanset om du styler divisioner, afsnit, links, lister eller nogen af de andre HTML-stykker i dit dokument, kan du henvende dig til klasse- og ID-attributter for at hjælpe dig med at udføre denne opgave!
Klassevælgere
Klassevælgeren indstiller flere stilarter til det samme element eller tag i et dokument. For eksempel, hvis du vil kalde visse sektioner i din tekst i en anden farve som en alarm, skal du tildele dine afsnit med klasser som denne:
p {farve: # 0000ff; }
p.alert {farve: # ff0000; }
Disse stilarter indstiller farven påalle afsnit til blå (# 0000ff), men ethvert afsnit med en klasseattribut på alert ville i stedet styles i rødt (# ff0000). Dette skyldes, at klasseattributten har en højere specificitet end den første CSS-regel, der kun bruger en tagvælger. Når du arbejder med CSS, vil en mere specifik regel tilsidesætte en mindre specifik regel. Så i dette eksempel indstiller den mere generelle regel farven på alle afsnit, men den anden mere specifikke regel end tilsidesætter kun denne indstilling i nogle afsnit.
Sådan kan dette bruges i nogle HTML-markeringer:
Dette afsnit vises i blåt, hvilket er standard for siden.
Dette afsnit ville også være i blåt.
Og dette afsnit vises i rødt, da klasseattributten overskriver den blå standardfarve fra elementvælgerens styling.
I dette eksempel er stilen af p.alert gælder kun afsnitelementer, der bruger det alert klasse. Hvis du vil bruge denne klasse på tværs af flere HTML-elementer, skal du fjerne HTML-elementet fra starten af stilopkaldet på denne måde:
.alert {baggrundsfarve: # ff0000;}
Denne klasse er nu tilgængelig for ethvert element, der har brug for det. Ethvert stykke af din HTML, der har en klasseattributværdi på alert vil nu få denne stil. I HTML nedenfor har vi både et afsnit og en overskrift på niveau to, der bruger alert klasse. Begge viser en rød baggrundsfarve:
Dette afsnit ville være skrevet med rødt.
På websteder i dag bruges klasseattributter ofte på de fleste elementer, fordi de er lettere at arbejde med ud fra et specificitetsperspektiv end id'er er. Du finder de fleste aktuelle HTML-sider, der skal udfyldes med klasseattributter, hvoraf nogle gentages ofte i et dokument, og andre måske kun vises en gang.
ID-vælgere
ID'et vælger navngiver en bestemt stil uden at knytte den til et tag eller andet HTML-element.
Antag en opdeling i din HTML-markering, der indeholder oplysninger om en begivenhed. Du kan give denne division en ID-attribut af begivenhed, og skitsér derefter divisionen med en sort ramme på 1 pixel:
#event {border: 1px solid # 000; }
Udfordringen med ID-vælgere er, at de ikke kan gentages i et HTML-dokument. De skal være unikke (du kan bruge det samme id på flere sider af dit websted, men kun en gang i hvert enkelt HTML-dokument). Så for tre begivenheder, som alle har brug for denne grænse, skal du identificere ID-attributter for begivenhed1, begivenhed2og begivenhed3 og stil hver af dem. Det ville derfor være meget lettere at bruge den førnævnte klasseattribut af begivenhed og stil dem alle på én gang.
Komplikationer af ID-attributter
En anden udfordring med ID-attributter er, at de har en højere specificitet end klasseattributter. For at tilsidesætte en tidligere etableret stil kan det være vanskeligt at gøre det, hvis du har stolet for stærkt på ID'er. Mange webudviklere er flyttet væk fra ved hjælp af id'er i deres markering, selvom de kun har til hensigt at bruge denne værdi en gang, og i stedet har vendt sig til de mindre specifikke klasseattributter for næsten alle stilarter.
Det ene område, hvor id-attributter kommer til at spille, er når du vil oprette en side, der har ankerlink på siden. Overvej f.eks. Et websted med parallax-stil, der indeholder alt indholdet på en enkelt side med links, der "springer" til forskellige dele af siden. ID-attributter og tekstlinks bruger disse ankerlink. Tilføj værdien af denne attribut, efterfulgt af # symbol, til href attribut for linket, som dette:
Dette er linket
Når der klikkes på eller berøres, springer dette link til den del af siden, der har denne ID-attribut. Hvis intet element på siden bruger denne ID-værdi, ville linket ikke gøre noget.
For at oprette link på siden på et websted kræves brug af ID-attributter, men du kan stadig henvende dig til klasser til generelle CSS-stylingsformål. Sådan markerer designere sider i dag - de bruger klasseudvælgere så meget som muligt og henvender sig kun til id'er, når de har brug for attributten til ikke kun at fungere som en krog til CSS, men også som et link på siden.