Opbygning af websteder på dagens web kræver en dyb forståelse af CSS (Cascading Style Sheets). Dette er vejledningen, som du giver et websted for at bestemme, hvordan det vil layoute i browservinduet. Du anvender en række "stilarter" til dit HTML-dokument, som vil skabe udseendet på din webside.
Der er mange måder at anvende de ovennævnte stilarter på tværs af et dokument, men du vil ofte kun bruge en stil nogle af elementerne i et dokument, men ikke alle forekomster af det element. Du vil måske også oprette en stil, som du kan anvende til flere elementer i et dokument uden at gentage stilreglen for hver enkelt forekomst. For at opnå disse ønskede stilarter vil du bruge klasse- og id-HTML-attributter. Disse attributter er globale attributter, der kan anvendes på næsten alle HTML-mærker. Det betyder, at uanset om du formaterer divisioner, afsnit, links, lister eller nogen af de andre stykker af HTML i dit dokument, kan du henvende dig til klasse- og id-attributter for at hjælpe dig med at nå denne opgave!
Class Selectors
Klassevælgeren giver dig mulighed for at indstille flere stilarter til det samme element eller tag i et dokument. For eksempel vil du måske have visse dele af din tekst fremkaldt i en anden farve fra resten af teksten i dokumentet. Disse fremhævede sektioner kan være en "advarsel", som du indstiller på siden. Du kan tildele dine afsnit med klasser som denne:
p {farve: # 0000ff; } p.alert {farve: # ff0000; } Disse stilarter vil sætte farven på alle afsnit til blå (# 0000ff), men ethvert afsnit med en klasseattribut af "alarm" vil i stedet være formet i rødt (# ff0000). Dette skyldes, at klassetildelingen har en højere specificitet end den første CSS-regel, som kun bruger en tagvælger. Når du arbejder med CSS, tilsidesætter en mere specifik regel en mindre specifik. Så i dette eksempel sætter den mere generelle regel farven på alle afsnit, men den anden mere specifikke regel end tilsidesætter denne indstilling kun i nogle afsnit. Sådan kan du bruge dette i nogle HTML-markeringer: Dette afsnit vil blive vist i blåt, hvilket er standard for siden.
Dette afsnit vil også være i blåt.
Og dette afsnit vil blive vist i rødt, da klassen attributten vil overskrive den standard blå farve fra elementvelger styling.
I dette eksempel ville stilen til "p.alert" kun gælde for stykkeelementer, der bruger denne "alarm" -klasse. Hvis du ønskede at bruge denne klasse på tværs af flere HTML-elementer, ville du blot fjerne HTML-elementet fra begyndelsen af stilopkaldet (bare sørg for at forlade perioden ( .) på plads), sådan: .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 af "alarm", får nu denne stil. I HTML-koden har vi både et afsnit og et overskriftsniveau 2, der bruger "alert" -klassen. Begge disse ville have en baggrundsfarve af rød baseret på CSS, vi netop viste.
Dette afsnit vil blive skrevet i rødt.
På hjemmesider i dag bruges klassegenskaber ofte på de fleste elementer, fordi de er lettere at arbejde med fra et specifikt perspektiv, at id'er er. Du finder de nyeste HTML-sider, der skal udfyldes med klasseattributter, hvoraf nogle gentages flere gange i et dokument og andre, der kun kan vises en gang. ID-vælgeren giver dig mulighed for at give et navn til en bestemt stil uden at forbinde det med et tag eller et andet HTML-element. Sig, at du havde en opdeling i din HTML-markup, der indeholder oplysninger om en begivenhed. Du kunne give denne division en id-attribut for "event", og så hvis du ønskede at skitsere den division med en 1 pixel bred sort kant, skal du skrive en id-kode som denne: #event {border: 1px solid # 000; } Udfordringen med ID selectors er, at de ikke kan gentages i et HTML-dokument. De skal være unikke (du kan bruge det samme id på flere sider på dit websted, men kun én gang i hvert enkelt HTML-dokument). Så hvis du havde 3 begivenheder, som alle havde brug for denne grænse, skulle du give dem ID attributter af "event1", "event2" og "event3" og stil hver af dem. Det ville derfor være meget nemmere at bruge ovennævnte klasseattribut for "begivenhed" og stil dem alle på én gang. En anden udfordring med ID-attributter er, at de har en højere specificitet end klassegenskaber. Dette betyder, at hvis du har brug for at have CSS, der tilsidesætter en tidligere etableret stil, kan det være svært at gøre det, hvis du har stolet for meget på ID'er. Det er derfor, at mange webudviklere har flyttet væk fra at bruge ID'er i deres markering, selvom de kun har til hensigt at bruge den værdi en gang og i stedet har vendt sig til de mindre specifikke klassetegn for næsten alle stilarter. Det ene område, hvor id-attributter kommer i spil, er, når du vil oprette en side, der har ankerlinks på siden. For eksempel, hvis du har en parallax stil hjemmeside, der indeholder alt indhold på en enkelt side med links, der "hoppe" til forskellige dele af den pågældende side. Dette gøres ved hjælp af id attributter og tekst links, der bruger disse anker links. Du vil blot tilføje værdien af attributten, foran med "#" -symbolet, til linket "href" på linket, sådan: Dette er linket Når du klikker eller rører, vil dette link hoppe 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. Husk, at hvis du vil oprette link på et websted på siden, skal du bruge ID-attributter, men du kan stadig vende tilbage til klasser til generelle CSS-stilingsformål. Sådan markerer vi sider i dag - vi bruger klassevalgere så meget som muligt og vendes kun til ID'er, når vi har brug for attributten til at fungere ikke kun som en krog til CSS, men også som en link på siden.Og denne h2 ville også være rød.
ID selektorer
Komplikationer af id attributter
