Att bygga välformerade webbplatser på dagens webb kräver en djup förståelse för Cascading Style Sheets. Tillämpa en serie CSS-stilar i ditt HTML-dokument för att informera utseendet på din webbsida.
Klass- och ID-attribut
Formgivare måste ibland bara tillämpa en stil vissa av elementen i ett dokument, men inte alla förekomster av det elementet. För att uppnå dessa önskade stilar, använd klass och ID HTML-attribut. Dessa attribut är globala attribut som är tillämpliga på nästan alla HTML-tagg—Oavsett om du utformar avdelningar, stycken, länkar, listor eller någon av de andra HTML-bitarna i ditt dokument kan du vända dig till klass- och ID-attribut för att hjälpa dig att utföra denna uppgift!
Klassväljare
Klassväljaren ställer in flera stilar till samma element eller tagg i ett dokument. Om du till exempel vill kalla fram vissa delar av din text i en annan färg som en varning, tilldela dina stycken klasser så här:
p {färg: # 0000ff; }
p.alert {color: # ff0000; }
Dessa stilar skulle sätta färgen på
Allt stycken till blått (# 0000ff), men varje stycke med klassattributet varna skulle istället stylas i rött (# ff0000). Detta beror på att attributet class har 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 regel. Så i det här exemplet anger den mer generella regeln färgen på alla stycken, men den andra, mer specifika regeln än åsidosätter den inställningen endast i vissa stycken.Så här kan detta användas i vissa HTML-markeringar:
Detta stycke visas i blått, vilket är standard för sidan.
Denna punkt skulle också vara i blått.
Och det här stycket visas i rött eftersom klassattributet skulle skriva över den blå standardfärgen från elementväljarstylingen.
I det exemplet är stilen för p.alert endast gäller styckeelement som använder det varna klass. För att använda den klassen i flera HTML-element, ta bort HTML-elementet från början av stilanropet, så här:
.varning {bakgrundsfärg: # ff0000;}
Den här klassen är nu tillgänglig för alla element som behöver den. Alla delar av din HTML som har ett klassattributvärde på varna kommer nu att få den här stilen. I HTML-koden nedan har vi både ett stycke och en nivå två-rubrik som använder varna klass. Båda visar en röd bakgrundsfärg:
Detta stycke skulle skrivas i rött.
På webbplatser idag används klassattribut ofta på de flesta element eftersom de är lättare att arbeta med ur ett specificitetsperspektiv än ID är. Du hittar de flesta aktuella HTML-sidor som ska fyllas med klassattribut, varav några upprepas ofta i ett dokument och andra som bara kan visas en gång.
ID-väljare
ID väljare namnger en specifik stil utan att koppla den till en tagg eller annat HTML-element.
Antag en uppdelning i din HTML-markering som innehåller information om ett evenemang. Du kan ge denna division en ID-attribut av händelseoch skissera sedan den delningen med en svart pixel bred svart kant:
#event {border: 1px solid # 000; }
Utmaningen med ID-väljare ä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å för tre händelser som alla behöver denna gräns måste du identifiera ID-attribut för händelse1, händelse2och händelse3 och utforma var och en av dem. Det skulle därför vara mycket lättare att använda det ovan nämnda klassattributet för händelse och utforma dem alla på en gång.
Komplikationer av ID-attribut
En annan utmaning med ID-attribut är att de har högre specificitet än klassattribut. För att åsidosätta en tidigare etablerad stil kan det vara svårt att göra det om du har litat för hårt på ID. Många webbutvecklare har gått bort från använder ID i sin markering, även om de bara tänker använda det värdet en gång, och istället har vänt sig till de mindre specifika klassattributen för nästan alla stilar.
Det område där ID-attribut spelas in är när du vill skapa en sida som har ankarlänkar på sidan. Tänk till exempel på en parallax-webbplats som innehåller allt innehåll på en sida med länkar som "hoppar" till olika delar av den sidan. ID-attribut och textlänkar använder dessa ankarlänkar. Lägg till värdet för det attributet, föregås av # symbol, till href attribut för länken, så här:
Det här är länken
När du klickar på eller vidrör hoppar den här länken till den del av sidan som har detta ID-attribut. Om inget element på sidan använder detta ID-värde skulle länken inte göra någonting.
För att skapa länksidor på en webbplats måste ID-attribut användas, men du kan ändå vända dig till klasser för allmänna CSS-utformningsändamål. Så här designar markörer upp sidor idag - de använder klassväljare så mycket som möjligt och vänder sig bara till ID: n när de behöver attributet för att inte bara fungera som en krok för CSS utan också som en länk på sidan.