Alt du trenger å vite om CSS-velgerne



Denne artikkelen bringer frem et interessant og viktig tema kjent som CSS Selectors og følger det opp med en støttende praktisk demonstrasjon.

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,

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.



Eksempel - CSS-velgere - EdurekaLa 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.