Dit artikel brengt een interessant en belangrijk onderwerp naar voren dat bekend staat als Selectors en volgt het op met een ondersteunende praktische demonstratie. De volgende tips komen in dit artikel aan bod:
- HTML-elementen opmaken
- CSS-kiezers
- CSS Id Selector
- CSS Class Selector
- CSS universele selector
- CSS-groepselectoren
Dus laten we beginnen,
HTML-elementen opmaken
Laten we eens kijken wat CSS is voordat we naar CSS-selectors gaan. Als HTML als een skelet moet worden beschouwd, dan is CSS (Cascading Style Sheets) net als de spieren en de huid. Het brein is JavaScript. Dus voor een webpagina zijn CSS-stijlen in wezen de lay-out en het ontwerp. Vanaf de positionering van de afbeeldingen en tekst tot de lettergrootte en achtergrondkleur bepaalt CSS hoe de HTML-elementen eruitzien in een browser.
U kunt CSS beter begrijpen als u goed begrijpt wat CSS-selectors zijn. Met deze selectors kunt u zich richten op specifieke HTML-elementen, zodat u er de juiste stijl op kunt toepassen.
Laten we eens kijken hoe we HTML-elementen kunnen selecteren,
Hoe elementen te selecteren?
Stel dat u wilt dat een bepaalde kop anders wordt opgemaakt dan de rest van de inhoud op een webpagina. Nu kunt u met CSS-selectors dat HTML-element targeten om het anders op te maken. CSS-selectors helpen bij het definiëren van de elementen waarvoor een bepaalde set CSS-regels van toepassing is. Er zijn verschillende soorten CSS-selectors waarmee u precies de elementen kunt kiezen die u wilt stylen. U kunt de hele webpagina een algemene stijl geven en vervolgens uw weg vinden om andere elementen van de pagina op te maken.
Selectors maken deel uit van een CSS-regel en deze selectors komen net voor de declaratie van CSS-blokken. Voor een beter begrip kunt u de onderstaande afbeelding raadplegen.
Verdergaan met het artikel CSS Selectors
CSS-kiezers
Met deze selector kunt u een HTML-element op naam selecteren.
Beschouw de onderstaande code:
p {text-align: centre color: magenta}Deze stijl wordt op elke alinea toegepast.
Paragraaf 1
Paragraaf 2
Deze code geeft je de volgende output:
Deze stijl wordt op elke alinea toegepast
Paragraaf 1
Paragraaf 2
In de bovenstaande code zijn de HTML-elementen gecentreerd en hebben ze de kleur 'magenta'.
Verdergaan met het artikel CSS Selectors
CSS Id Selector
Door het id-attribuut van een HTML-element te selecteren, kunt u dat specifieke element selecteren. Omdat de id uniek is voor een pagina, kunt u het juiste element selecteren door het kenmerk id te gebruiken.
U kunt het HTML-element selecteren met '#' gevolgd door de id van dat element. Bijvoorbeeld: '#firstname' selecteert het element waar de id 'firstname' is.
Beschouw de volgende code:
# para1 {text-align: center color: orange}Hallo Wereld
java datum ophalen uit string
Deze paragraaf wordt niet beïnvloed.
De output voor de bovenstaande code is:
Hallo Wereld
Deze paragraaf wordt niet beïnvloed.
Zoals je in de bovenstaande uitvoer kunt zien, konden we door id = ”para1 ″ op te nemen de kleur van dat element veranderen in oranje. Het andere element dat dit niet heeft, blijft onaangetast.
Verdergaan met het artikel CSS Selectors
CSS Class Selector
Met behulp van de klassekiezer kunt u HTML-elementen selecteren die een specifiek klassekenmerk hebben. U kunt de selector definiëren met een punt (puntsymbool) gevolgd door de klassenaam. .Intro selecteert bijvoorbeeld de elementen waar de klasse 'intro' is. Een ding om in gedachten te houden is dat je een klassenaam nooit met een nummer kunt beginnen.
Beschouw de volgende code:
.center {text-align: centre color: pink}Deze kop is roze en gecentreerd.
Deze alinea is roze en gecentreerd.
De output van de bovenstaande code is:
Deze kop is roze en gecentreerd.
Deze alinea is roze en gecentreerd.
U kunt CSS-class selectors gebruiken voor een specifiek element. Als u slechts één specifiek element wilt opmaken, kunt u de elementnaam samen met de klassenelector gebruiken.
Beschouw bijvoorbeeld de volgende code:
p.center {text-align: centre color: pink}Deze rubriek wordt niet beïnvloed
Deze alinea is roze en gecentreerd.
De output van de bovenstaande code is:
Deze rubriek wordt niet beïnvloed
Deze alinea is roze en gecentreerd.
Zoals u in de uitvoer kunt zien, wordt de kop h2 niet beïnvloed door de stijl. Aangezien we 'p.center' hebben gespecificeerd, wordt alleen de alinea beïnvloed door de stijl.
Verder gaan met dit CSS Selectors-artikel,
CSS universele selector
Dit type selector kan worden beschouwd als een jokerteken dat alle elementen op de pagina selecteert. Het selecteert alle elementen op de pagina en wordt gespecificeerd door '*'.
Java-programma om palindroom te controleren
Overweeg bijvoorbeeld de onderstaande code:
* {kleur: donkergroen font-size: 30px}Dit is een test (kleiner lettertype)
Dit is een alinea.
De output voor de bovenstaande code is:
Hallo Wereld
Dit is een test (kleiner lettertype)
Dit is een alinea.
Zoals u in de uitvoer kunt zien, hebben alle elementen die zijn gedefinieerd met behulp van de groepselector dezelfde stijldefinitie - ze zijn gecentreerd en de lettertypekleur is cyaan.
Dit brengt ons bij het einde van dit artikel.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om met back-end en front-end webtechnologieën te werken. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van het artikel en we nemen contact met u op.