Denne artikel frembringer et interessant og et vigtigt emne kendt som Vælgerne og følger den op med en understøttende praktisk demonstration. Følgende punkter vil blive dækket i denne artikel,
- Styling af HTML-elementer
- CSS-vælgere
- CSS Id-vælger
- CSS-klassevælger
- CSS Universal Selector
- CSS Group Selectors
Så lad os komme i gang dengang,
Styling af HTML-elementer
Lad os forstå, hvad CSS er, før vi kommer til CSS-vælgere. Hvis HTML skal betragtes som et skelet, er CSS (Cascading Style Sheets) som musklerne og huden. Hjernen er JavaScript. Så for en webside er CSS-stilarter i det væsentlige layout og design. Lige fra placeringen af billederne og teksten til skriftstørrelsen og baggrundsfarven styrer CSS, hvordan HTML-elementerne ser ud i en browser.
Du kan forstå CSS bedre, hvis du har en god forståelse af, hvad CSS-vælgere er. Disse vælgere giver dig mulighed for at målrette mod specifikke HTML-elementer, så du kan anvende den rigtige stil på dem.
Lad os forstå, hvordan vi kan vælge HTML-elementer,
Hvordan vælges elementer?
Sig, du vil have en bestemt overskrift til at være forskellig fra resten af indholdet på en webside. Nu, ved hjælp af CSS-vælgere, kan du målrette det HTML-element for at style det forskelligt. CSS-vælgere hjælper med at definere de elementer, som et bestemt sæt CSS-regler gælder for. Der er forskellige typer CSS-vælgere, der giver dig mulighed for nøjagtigt at vælge de elementer, du vil style. Du kan give hele websiden en generel styling og derefter arbejde dig for at style andre elementer på siden.
Selektorer er en del af en CSS-regel, og disse vælgere kommer lige før erklæringen om CSS-blokke. For en bedre forståelse kan du henvise til billedet nedenfor.
Fortsætter med CSS Selectors-artiklen
forår mvc tutorial for begyndere
CSS-vælgere
Denne vælger giver dig mulighed for at vælge et HTML-element efter dets navn.
Overvej koden nedenfor:
p {tekstjustering: centerfarve: magenta}Denne stil vil blive anvendt på hvert afsnit.
Stk. 1
Stk. 2
Denne kode giver dig følgende output:
Denne stil vil blive anvendt på hvert afsnit
Stk. 1
Stk. 2
I ovenstående kode er HTML-elementerne centreret og har farven 'magenta'.
Fortsætter med CSS Selectors-artiklen
CSS Id-vælger
Ved at vælge id-attributten for et HTML-element kan du vælge det specifikke element. Da id'et er unikt for en side, kan du vælge det rigtige element ved hjælp af id-attributten.
Du kan vælge HTML-elementet ved hjælp af '#' efterfulgt af id'et for det element. For eksempel vælger '#firstnavn' det element, hvor id'et er 'fornavn'.
Overvej følgende kode:
# para1 {text-align: center color: orange}Hej Verden
Dette afsnit påvirkes ikke.
Outputtet for ovenstående kode er:
Hej Verden
Dette afsnit påvirkes ikke.
Som du kan se i ovenstående output, ved at inkludere id = ”para1 ″, var vi i stand til at ændre farven på dette element til orange. Det andet element, der ikke har dette, forbliver upåvirket.
Fortsætter med CSS Selectors-artiklen
CSS-klassevælger
Ved hjælp af klassevælgeren kan du vælge HTML-elementer, der har en bestemt klasseattribut. Du kan definere vælgeren ved hjælp af et punktum (full-stop-symbol) efterfulgt af klassens navn. F.eks. Vælger .intro de elementer, hvor klassen er “intro”. En ting at huske på er, at du aldrig kan starte et klassenavn med et tal.
kald ved henvisning c ++
Overvej følgende kode:
.center {text-align: center color: pink}Denne overskrift er lyserød og centreret.
Dette afsnit er lyserødt og centreret.
Output af ovenstående kode er:
Denne overskrift er lyserød og centreret.
Dette afsnit er lyserødt og centreret.
Du kan bruge CSS-klassevælgere til et bestemt element. Hvis du kun vil have et bestemt element, der skal designes, kan du bruge elementnavnet sammen med klassevælgeren.
Overvej f.eks. Følgende kode:
p.center {text-align: center color: pink}Denne overskrift er ikke berørt
Dette afsnit er lyserødt og centreret.
Output af ovenstående kode er:
Denne overskrift er ikke berørt
Dette afsnit er lyserødt og centreret.
Som du kan se i output påvirkes overskriften h2 ikke af stilen. Da vi har specificeret “p.center”, påvirkes kun afsnittet af stilen.
Fortsætter med denne CSS Selectors-artikel,
CSS Universal Selector
Denne type vælger kan betragtes som et jokertegn, der vælger alle elementerne på siden. Det vælger alle elementerne på siden, og det specificeres af “*”.
Overvej f.eks. Nedenstående kode:
* {farve: mørkegrøn skriftstørrelse: 30 pixel}Dette er en test (mindre skrifttype)
Dette er et afsnit.
Outputtet for ovenstående kode er:
Hej Verden
Dette er en test (mindre skrifttype)
Dette er et afsnit.
Som du kan se i output, har alle de elementer, der er defineret ved hjælp af gruppevælgeren, den samme stildefinition - de er centreret og skrifttypefarven er cyan.
Dette bringer os til slutningen af denne artikel.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet i artiklen, og vi vender tilbage til dig.