Denne artikkelen bringer frem et interessant og viktig tema kjent som Selectors og følger den opp med en støttende praktisk demonstrasjon. Følgende tips vil bli dekket i denne artikkelen,
- Styling HTML Elements
- CSS-velgere
- CSS Id Selector
- CSS klasse velger
- CSS Universal Selector
- CSS Group Selectors
Så la oss komme i gang da,
Styling HTML Elements
La oss forstå hva CSS er før vi kommer til CSS-velgerne. Hvis HTML skal betraktes som et skjelett, er CSS (Cascading Style Sheets) som musklene og huden. Hjernen er JavaScript. Så for en webside er CSS-stiler egentlig utforming og design. Helt fra posisjonering av bilder og tekst til skriftstørrelse og bakgrunnsfarge, styrer CSS hvordan HTML-elementene ser ut i en nettleser.
Du kan forstå CSS bedre, hvis du har god forståelse for hva CSS-velgerne er. Disse velgerne lar deg målrette mot bestemte HTML-elementer, slik at du kan bruke riktig stil på dem.
La oss forstå hvordan vi kan velge HTML-elementer,
Hvordan velge elementer?
Si at du vil at en bestemt overskrift skal utformes forskjellig fra resten av innholdet på en webside. Nå, ved hjelp av CSS-velgerne, kan du målrette det HTML-elementet for å utforme det annerledes. CSS-velgerne hjelper til med å definere elementene som et bestemt sett med CSS-regler gjelder for. Det finnes forskjellige typer CSS-velgere som lar deg nøyaktig velge elementene du vil style. Du kan gi hele websiden en generell styling, og deretter jobbe deg for å style andre elementer på siden.
java konvertere dobbelt til int
Velgerne er en del av en CSS-regel, og disse velgerne kommer like før erklæringen om CSS-blokker. For bedre forståelse kan du se på bildet nedenfor.
Gå videre med CSS Selectors-artikkelen
CSS-velgere
Denne velgeren lar deg velge et HTML-element etter navnet.
Tenk på koden nedenfor:
p {text-align: center color: magenta}Denne stilen vil bli brukt på hvert avsnitt.
Punkt 1
Avsnitt 2
Denne koden gir deg følgende utdata:
Denne stilen vil bli brukt på hvert avsnitt
Punkt 1
Avsnitt 2
I koden ovenfor har HTML-elementene blitt midtjustert og har fargen “magenta”.
Gå videre med CSS Selectors-artikkelen
CSS Id Selector
Ved å velge id-attributtet til et HTML-element, kan du velge det spesifikke elementet. Siden id-en er unik for en side, kan du velge riktig element ved å bruke id-attributtet.
Du kan velge HTML-elementet ved å bruke '#' etterfulgt av ID-en til det elementet. For eksempel velger '# fornavn' elementet der id-en er 'fornavn'.
Vurder følgende kode:
# para1 {text-align: center color: orange}Hei Verden
Dette avsnittet blir ikke berørt.
Utgangen for ovennevnte kode er:
Hei Verden
Dette avsnittet blir ikke berørt.
Som du kan se i utgangen ovenfor, ved å inkludere id = ”para1 ″, klarte vi å endre fargen på det elementet til oransje. Det andre elementet som ikke har dette forblir upåvirket.
Gå videre med CSS Selectors-artikkelen
CSS klasse velger
Ved hjelp av klassevelgeren kan du velge HTML-elementer som har et spesifikt klasseattributt. Du kan definere velgeren ved hjelp av et punktum (punktum) etterfulgt av kursnavnet. For eksempel velger .intro elementene der klassen er “intro”. En ting å huske på er at du aldri kan begynne et klassenavn med et tall.
Vurder følgende kode:
.center {text-align: center color: pink}Denne overskriften er rosa og midtjustert.
Dette avsnittet er rosa og midtjustert.
Resultatet av koden ovenfor er:
Denne overskriften er rosa og midtjustert.
Dette avsnittet er rosa og midtjustert.
hvordan sortere en matrise c ++
Du kan bruke CSS-klassevalg for et bestemt element. Hvis du bare vil at ett bestemt element skal utformes, kan du bruke elementnavnet sammen med klassevelgeren.
Tenk for eksempel på følgende kode:
p.center {text-align: center color: pink}Denne overskriften påvirkes ikke
Dette avsnittet er rosa og midtjustert.
Resultatet av koden ovenfor er:
Denne overskriften påvirkes ikke
Dette avsnittet er rosa og midtjustert.
Som du kan se i utgangen, påvirkes ikke overskriften h2 av stilen. Siden vi har spesifisert “p.center”, påvirkes bare avsnittet av stilen.
Fortsetter med denne CSS Selectors-artikkelen,
CSS Universal Selector
Denne typen velger kan betraktes som et jokertegn som velger alle elementene på siden. Den velger alle elementene på siden, og den er spesifisert av “*”.
Vurder for eksempel koden nedenfor:
* {farge: mørkegrønn skriftstørrelse: 30px}Dette er en test (mindre skrift)
Dette er et avsnitt.
Utgangen for ovennevnte kode er:
Hei Verden
Dette er en test (mindre skrift)
Dette er et avsnitt.
Som du kan se i utdataene, har alle elementene som er definert ved hjelp av gruppevelgeren samme stildefinisjon - de er midtjusterte og skriftfargen er cyan.
lage en rekke objekter java
Dette fører oss til slutten av denne artikkelen.
Sjekk ut vår som kommer med instruktørledet live-opplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet i artikkelen, så kommer vi tilbake til deg.