Hur man applicerar anpassade klassstilar i Cascading Style Sheets (CSS)

Klassstilar, som också kallas ibland anpassade klassstilar , anpassade stilar, eller < anpassade klasser i Cascading Style Sheets (CSS) är för de tillfällen då du vill skapa en speciell stil och sedan selektivt tillämpa den på ett obegränsat antal element eller objekt på en webbsida. Till exempel, i meningen "Vår dagliga erbjudanden nyhetsbrev ger dig de hetaste försäljningarna, kampanjer och specialerbjudanden i de mest populära butikerna i ett lättläst daglig e-postmeddelande" du kan skapa en anpassad klassstil för att ändra orden

Dagliga erbjudanden och använd sedan den stilen på de här orden i HTML.

När du skriver klassstilarna i CSS-filen, var noga med att inkludera en period (.) Direkt före väljarnamnet, som visas här:

. dailydeals

{font-family: Georgia, "Times New Roman", Times, serif; typsnittstorlek: 23px; font-weight: bold; färg: # 336699;} Periodens närvaro har två funktioner:

Det hjälper dig att snabbt identifiera klassstilarna från andra typer av stilar när du granskar din CSS-kod.

• Kanske viktigare, det informerar webbläsare om att stilen är en anpassad klass som selektivt kommer att tillämpas på innehåll på sidan.

• När du skapar en klassstil kan du namnge väljaren allt du vill, så länge det inte är namnet på en aktuell HTML-tagg.

Till exempel skulle det vara en riktigt dålig idé att skapa en klassstil som heter. kropp eller. s. Så, i enlighet med begreppet semantisk HTML, försök att namnge dina klassstilar efter den funktion de ska utföra, till exempel. markera eller. imageborder.

När du har skrivit ut stilreglerna i CSS för din klassstil kan du tillämpa stilen på något objekt i HTML-dokumentet genom att lägga till klassattributet till öppningsbehållarkoden för objektet eller innehållet är stilat:

class = "dailydeals" >> Vårt dagliga nyhetsbrev ger dig de hetaste försäljningarna, kampanjerna och specialerbjudandenna hos de mest populära butikerna i en lättläst daglig e-post.

När du anger klassstil i HTML-koden med klassattributet behöver inte perioden som krävs i CSS när du skapar stildefinitionen placeras framför stilnamnet mellan citattecken, som visas i föregående kod. Om du föredrar att klassstilen bara ska tillämpas på ett eller två ord eller en kort fras i stället för alla element i en behållarkod kan du selektivt tillämpa klassstilen på objektet med hjälp av taggen med Klassificering:

Vårt

"

dagstidningar  " >> Dagliga erbjudanden nyhetsbrev ger dig de hetaste försäljningarna, kampanjerna och specialerbjudandenna hos de mest populära butikerna i ett lättläst daglig e-post. Taggen är en inline-tagg som används för att applicera styling till element i flödet av dokumenttext. Den här taggen är i huvudsak en tom HTML-behållarkod som inte gör någonting förrän du berättar att det gör något genom att använda en attribut till den, till exempel att lägga till klass-, id- eller stilattribut till stilinnehåll. Illustrationen visar skillnaden mellan att lägga till en klassattribut till en -kod (topp) jämfört med att den läggs till i en tagg som omger specifikt innehåll (botten).