Skillnad mellan id och klass i CSS
Share
De huvudskillnad mellan id och klass i CSS är att id används för att applicera styling till ett unikt element medan klassen används för att applicera styling till flera element.
Det finns olika tekniker inom webbutveckling. De viktigaste språken för att utveckla webbplatser är HTML, CSS och JavaScript. HTML står för Hyper Text Markup Language. Det bidrar till att utveckla webbsidans struktur. JavaScript hjälper till att göra webbsidan mer dynamisk. CSS står för Cascading Style Sheets. Det bidrar till att lägga till stilar och göra webbsidorna mer presenterbara. CSS-reglerna gäller för HTML-elementen. CSS-selektorerna hjälper också till att hitta elementen och tillämpa önskad stil på HTML-taggarna. id och klass är två typer av väljare.
Viktiga områden som omfattas
1. Vad är CSS-reglerna
- Definition, exempel
2. Vad är id
- Definition, exempel
3. Vad är klassen
- Definition, exempel
4. Skillnad mellan id och klass
- Jämförelse av viktiga skillnader
Nyckelbegrepp
Klass, CSS Regler, ID
Vad är CSS-reglerna
CSS består av en uppsättning regler. Webbläsaren kan tolka dessa regler och tillämpa dem på de angivna elementen i dokumentet. En CSS-stilregel består av tre avsnitt. De är väljare, egendom och värde. Deklaration hänvisar till kombinationen av egendom och värde. De visas inuti ett par lockiga hängslen enligt följande.
selector property: value;
Väljare - Hjälper till att identifiera elementet för att tillämpa stilen
Fast egendom - Ett attribut. Alla HTML-attribut omvandlas till CSS-egenskaper. Några exempel är färg, textjustering, gräns osv.
Värde - Värdet är vad som tilldelas fastigheten. Till exempel kan blått tilldelas egenskapsfärgen.
Vad är id
Programmeraren kan definiera en stilregel baserad på elementets id. Alla element med samma ID kommer att appliceras med den definierade stilen. För att välja ett element med ett specifikt ID, ska det finnas en # (hash) symbol följd av elementets id.
Antag att HTML-filen innehåller ett uttalande enligt följande.
CSS-filen innehåller följande kodstycke.
# Header1
färgen blå;
När webbläsaren tolkar HTML-förklaringen kontrollerar den id av h1-elementet, vilket är header1 i CSS-filen. Sedan tillämpar den den definierade CSS-regeln på h1-elementet. Därför kommer texten Hello World att visas i färgblå.
Idet är unikt inom sidan. ID-väljaren används därför för ett unikt element.
Vad är klassen
På samma sätt som id kan programmeraren definiera stilreglerna baserade på elementets klass. Alla element med samma klass kommer att appliceras med en definierad stil. För att välja ett element med en specifik klass ska det finnas en. (period) symbol följt av klassens namn.
Antag att HTML-filen innehåller följande uttalanden.
CSS-filen innehåller följande kodstycke.
.header1
färgen blå;
När webbläsaren tolkar HTML-satsen kontrollerar den klassen av h1-elementet, vilket är header1 i CSS-filen. Sedan tillämpar den den definierade CSS-regeln på alla h1-element. Därför kommer texten Hello World 1 och Hello World 2 att visas i färgblå.
Det är möjligt att använda samma klass på flera element. Därför används klassväljaren för flera element.
Skillnad mellan id och klass i CSS
Definition
id är en väljare i CSS som formaterar elementet med en specificerad id medan klassen är en väljare i CSS som utformar de valda elementen med en angiven klass.
Syntax
ID-syntaxen är #id css declarations; . Klasssyntaxen är .class css declarations;
Användande
Vidare är användningen av id att tillämpa styling på ett specifikt element. Användningen av klassen är att tillämpa styling på flera element.
Slutsats
ID och klass är två väljare i CSS som tillåter att du använder stilering till HTML-elementen. Huvudskillnaden mellan id och klass i CSS är att id används för att applicera styling till ett unikt element medan klassen används för att applicera styling på flera element.
Referens:
1. "CSS Syntax och Selectors." W3Schools Online Web Tutorials, Tillgänglig här.
Image Courtesy:
1. "CSS.3" Av Nikotaf - Egent arbete (CC BY-SA 4.0) via Commons Wikimedia
