Att bygga webbplatser på dagens webb kräver en djup förståelse för CSS (Cascading Style Sheets). Det här är anvisningarna som du ger en webbplats för att bestämma hur det ska layoutas i webbläsarfönstret. Du tillämpar en serie "stilar" i ditt HTML-dokument som kommer att skapa utseendet på din webbsida.
Det finns många sätt att tillämpa ovan nämnda stilar på ett dokument, men oftast vill du bara använda en stil några av elementen i ett dokument, men inte alla instanser av det elementet. Du kanske också vill skapa en stil som du kan ansöka om flera element i ett dokument, utan att behöva upprepa stilregeln för varje enskild instans. För att uppnå dessa önskade stilar använder du klass- och ID-HTML-attributen. Dessa attribut är globala attribut som kan tillämpas på nästan alla HTML-taggar. Det betyder att om du utformar divisioner, stycken, länkar, listor eller någon av de andra bitarna av HTML i ditt dokument kan du vända dig till klass- och ID-attribut som hjälper dig att uppnå denna uppgift!
Class Selectors
Klassväljaren låter dig ställa in flera stilar till samma element eller tagg i ett dokument. Du kanske till exempel vill ha vissa delar av din text tillkallad i en annan färg än resten av texten i dokumentet. Dessa markerade avsnitt kan vara en "alert" som du ställer in på sidan. Du kan tilldela dina avsnitt med klasser så här:
p {färg: # 0000ff; } p.alert {färg: # ff0000; } Dessa stilar skulle ställa in färgen på Allt stycken till blå (# 0000ff), men alla stycken med en klassattribut av "alert" skulle istället vara formgivna i rött (# ff0000). Detta beror på att klassattributet har en högre specificitet än den första CSS-regeln, som endast använder en taggväljare. När du arbetar med CSS, kommer en mer specifik regel att åsidosätta en mindre specifik. Så i det här exemplet anger den mer generella regeln färgen på alla stycken, men den andra, mer specifika regeln än överstiger den inställningen endast i vissa stycken. Så här kan det här användas i vissa HTML-markup: Denna paragraf visas i blått, vilket är standard för sidan.
Denna punkt skulle också vara blå.
Och denna punkt skulle visas i rött eftersom klassattributet skulle skriva över den vanliga blåfärgen från elementväljaren styling.
I det exemplet skulle stilen för "p.alert" bara gälla styckelement som använder den "alert" -klassen. Om du vill använda den klassen över flera HTML-element, skulle du helt enkelt ta bort HTML-elementet från början av stilanropet (var noga med att lämna perioden ( .) på plats), så här: .alert {bakgrundsfärg: # ff0000;} Denna klass är nu tillgänglig för varje element som behöver det. Varje del av din HTML som har ett klassattributvärde för "alert" kommer nu att få denna stil. I HTML-koden har vi både ett stycke och en rubrik nivå 2 som använder "alert" -klassen. Båda dessa skulle ha en bakgrundsfärg av rött baserat på CSS som vi just visat.
Denna punkt skulle skrivas i rött.
På webbplatser idag används klassattribut ofta på de flesta element eftersom de är enklare att arbeta med från ett specifikt perspektiv som ID-er. Du hittar de senaste HTML-sidorna som ska fyllas med klassattribut, av vilka flera upprepas flera gånger i ett dokument och andra som bara kan visas en gång. ID-väljaren tillåter dig att ge ett namn till en viss stil utan att associera den med en tagg eller annat HTML-element. Säg att du hade en uppdelning i din HTML-uppställning som innehåller information om en händelse. Du kan ge den här divisionen ett ID-attribut för "händelse", och om du sålde att skissera den uppdelningen med en 1-pixel bred svart ram skriver du en ID-kod så här: #event {border: 1px solid # 000; } Utmaningen med ID-selektorer är att de inte kan upprepas i ett HTML-dokument. De måste vara unika (du kan använda samma ID på flera sidor på din webbplats, men bara en gång i varje enskilt HTML-dokument). Så om du hade 3 händelser som alla behövde denna gräns, skulle du behöva ge dem ID-attribut av "händelse1", "händelse2" och "händelse3" och utforma var och en av dem. Det skulle därför vara mycket lättare att använda ovannämnda klassattribut av "händelse" och utforma dem alla på en gång. En annan utmaning med ID-attribut är att de har en högre specificitet än klassattributen. Detta innebär att om du behöver ha CSS som överträder en tidigare etablerad stil kan det vara svårt att göra det om du förlitat dig för mycket på ID-skivor. Det är av den anledningen att många webbutvecklare har flyttat sig från att använda ID-er i deras markup, även om de bara avser att använda det värdet en gång och istället vända sig till de mindre specifika klassattributen för nästan alla stilar. Det enda område där ID-attribut sätts in spel är när du vill skapa en sida som har anknytningar på sidan. Till exempel, om du har en parallax stil webbplats som innehåller allt innehåll på en enda sida med länkar som "hoppa" till olika delar av den sidan. Detta görs med hjälp av ID-attribut och textlänkar som använder dessa ankarlänkar. Du skulle helt enkelt lägga till värdet på det attributet, föregås av symbolen "#", till länken "href", så här: Detta är länken När du klickat eller rörde, hoppa den här länken till den del av sidan som har detta ID-attribut.Om inget element på sidan använder det här ID-värdet, skulle länken inte göra någonting. Kom ihåg att om du vill skapa länk på sidan på en webbplats krävs att du använder ID-attribut, men du kan fortfarande gå till klasser för generell CSS-styling. Så här markerar vi sidor idag - vi använder klassväljare så mycket som möjligt och vänder bara till ID när vi behöver attributet att inte bara fungera som en krok för CSS men också som en länk på sidan.Och den här h2 skulle också vara röd.
ID-selektorer
Komplikationer av ID-attribut
