Akronymet CSS står for "cascading style sheets". CSS brukes til å style nettsteder og applikasjoner som brukes på alle enheter. Stilarket brukes ofte sammen med HTML og et front-end programmeringsspråk som JavaScript.

CSS kan implementeres på en av tre måter - innebygd, internt eller eksternt. Selv om ekstern CSS er den anbefalte tilnærmingen, er det tilfeller der de to gjenværende implementeringsmetodene kan være mer praktiske.

I denne opplæringsartikkelen lærer du alt det grunnleggende om CSS for å begynne å bygge applikasjoner i dag.

Når du skal bruke de forskjellige CSS -implementeringsmetodene

Inline CSS er den ideelle implementeringsmetoden når hensikten er å bare inkludere en eller to stylingspreferanser på en webside, sammen med noen få andre nisjesaker. Den innebygde CSS -metoden bruker stil søkeord sammen med en CSS -egenskap for å oppnå et bestemt resultat.

Hvis du har tenkt å endre fargen på en enkelt overskrift til rød, kan inline CSS være et godt alternativ. En nisje -sak, som nevnt ovenfor, ville være når du oppretter HTML -oppsett som hovedsakelig består av tabeller (en utdatert praksis).

Bruke inline CSS -eksempel

Hovedoverskrift

Kodelinjen ovenfor viser teksten "Hovedoverskrift" belagt med fargen rød. Dette er muligens en av de eneste praktiske grunnene til å bruke inline CSS fordi det vanligvis bare er en h1 element på en gitt webside.

Hvis du har tenkt å belegge alt h2 elementer på en webside med fargen gul. Du må bruke CSS stil søkeord, sammen med farge eiendom og verdien (gul) på hvert element. En mer effektiv måte å utføre denne oppgaven på er imidlertid å bruke intern CSS.

Bruke intern CSS -eksempel

Plasser koden ovenfor i -koden til HTML -filen din vil sikre at alle h2 elementene i filen er belagt med gult. Intern CSS er atskilt fra HTML -koden, og dette gjør metoden mer effektiv fordi den letter målrettingen mot ulike elementgrupper.

Så hvorfor er den eksterne CSS -implementeringsmetoden fortsatt den mest anbefalte tilnærmingen? Separasjon av bekymringer. Med ekstern CSS er CSS -koden fullstendig atskilt fra HTML -koden, noe som sikrer skalerbarhet for store prosjekter og gjør testprosessen mer effektiv.

Bruke eksternt CSS -eksempel

Sette inn kodelinjen ovenfor i taggen til HTML -filen din vil lette utformingen av websiden din ved hjelp av den eksterne CSS -metoden. Det eneste aspektet av koden ovenfor som vil endres er verdien som er tilordnet href eiendom, som alltid skal være navnet på CSS -filen (inkludert .css -utvidelsen).

I slekt: Hva er Cascading Style Sheets og hva brukes CSS til? Med CSS -filen knyttet til HTML -dokumentet ditt, kan du nå begynne å skrive CSS -kode i CSS -filen. På dette tidspunktet er den eneste forskjellen mellom det interne CSS -eksemplet ovenfor og det eksterne CSS stil stikkord. Derfor vil innsetting av følgende kode i en CSS -fil gi samme resultat som det interne CSS -eksemplet ovenfor.

h2 {
farge: gul;
}

Utforske CSS grunnstruktur

Den grunnleggende CSS -erklæringen inneholder syv viktige elementer, som du kan se fra eksemplet nedenfor. De jobber alle sammen for å oppnå et bestemt sett med stylingspreferanser.

Velgeren

I en CSS -erklæring kan en velger enten være en id, a klasse, et element, eller i noen spesielle tilfeller, en pseudovelger. I CSS -strukturen over en elementet brukes som velger, noe som betyr at alle koblingene på en webside vil være belagt med rødt. Hovedsakelig er formålet med velgeren å identifisere elementene som skal styles.

Erklæring Start og slutt

Erklæringen start og slutt er viktig fordi de inneholder alle stylingspreferansene som gjelder for en bestemt velger. Begge elementene er representert med et par åpne og lukkede krøllbøyler. En god måte å huske å bruke en deklarasjonsstart eller erklæringsslutt, er å huske at hvis du har en åpen krøllbøyle, bør det være en tilsvarende lukket krøllbøyle, og omvendt.

Eiendommen

CSS -egenskapen i en deklarasjonsstruktur kan være hvilken som helst av over hundre forskjellige eiendomstyper. Egenskapstypen som brukes i CSS -strukturen ovenfor er farge og denne egenskapen er målrettet mot tekst på en webside. Hvis du vil lære mer, sjekk ut vår omfattende liste over CSS -egenskaper og deres bruk.

Eiendoms-/verdiseparatoren

Selv om det kan virke lite og ubetydelig, er egenskapen/verdiseparatoren like viktig som alle de andre elementene i CSS -strukturen. Hvis det noen gang er et tilfelle hvor dette elementet er glemt, vil ikke hele CSS -erklæringen utføres.

Verdien

Verdien i CSS -egenskapen representerer den nøyaktige stilen du vil bruke på en gitt eiendom. Verdiene som er tilgjengelige for bruk er avhengig av eiendomstypen. For eksempel er eiendommen som brukes i strukturen ovenfor farge, som betyr at det bare er én type verdi som kan brukes på denne egenskapen, et fargenavn. EN farge verdi kan presenteres i en av fire former: en ordverdi (som i eksemplet ovenfor), en heksadesimal verdi, en HSL -verdi (fargetone, metning, lyshet) eller en RGB -verdi (rød, grønn, blå).

Deklarasjonsseparatoren

Deklarasjonsseparatoren indikerer at du er på slutten av en spesifikk stylingserklæring. I strukturen ovenfor er det bare en deklarasjonsseparator, men det kan være flere. Det hele avhenger av antall CSS -eiendommer du har tenkt å bruke på en bestemt klasse, ideller element.

Hva er id og klasser?

ID -er og klasser spiller en grunnleggende rolle i CSS -stylingsprosessen. Som HTML -elementer, CSS ID -er og klasser brukes som velgere i en CSS -erklæring. Derimot, klasser og ID -er ha forrang fremfor et HTML -element.

Den generelle regelen i CSS er at den siste stilerklæringen du legger til i en fil, vil overstyre de som var der før. Derfor, hvis det er to erklæringer med en h2 velgeren i en CSS -fil, overstyrer erklæringen som ble lagt til sist de som var der før.

Imidlertid, hvis dette h2 elementet har en id som brukes som velger i en CSS -erklæring, uavhengig av posisjonen (før eller etter) til en CSS -erklæring som har h2 elementet som velgeren, stylingspreferansen i id erklæringen vil alltid gå foran elementet. Kort sagt, en id vil overstyre andre stilvelgere.

Det er viktig å huske at i en CSS -erklæring, ID -er begynn med et talltegn og timene begynner med et punktum. Den viktigste forskjellen mellom en id og a klasse er det en id er unik, mens a klasse kan dupliseres. For eksempel en samling lignende tagger kan gis det samme klasse Navn; imidlertid id av hver taggen må være unik.

Utforske de forskjellige typene velgere

Det er tre grunnleggende typer velgere - enkelt, flere og nestede. Så langt har denne artikkelen i stor grad dekket enkeltvelgere.

Når du bruker CSS, vil det være tilfeller når du vil ha forskjellige elementer på forskjellige posisjoner på a nettside for å ha en lignende stil som er forskjellig fra den generelle stilen som brukes på hele websiden. I disse tilfellene vil det være nyttig å vite hvordan du bruker flere velgere.

Grunnleggende HTML -maleksempel

Velkommen

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Om

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Tittel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?







Tittel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?

Hvis du ser nøye på HTML -filen ovenfor, ser du dynamikken som eksisterer mellom ID -er og klasser. Med henvisning til filen ovenfor, hvis du vil bruke samme stil på Om delen og artiklene på nettstedet bare, vil følgende CSS -kode oppnå dette.

Eksempel på bruk av flere velgere

#Om, .innhold {
farge: hvit;
bakgrunnsfarge: darkcyan;
}

Når du bruker flere velgere, bør du alltid skille hver velger med et komma. Eksemplet ovenfor har to velgere, en id og a klasse. Hvis komma som følger Omid mangler, vil ikke CSS -erklæringen utføres.

Når vi går tilbake til grunnleggende HTML -maleksempel ovenfor, er det to tagger til stede - den ene i velkomstdelen og den andre i delen om. Hvis målet ditt er å målrette bare mot en av disse tagger, bør en nestet velger være din gå-til-metode.

Bruke eksempler på nestede velgere

#Welcome p span {
fargen rød;
}

Den nestede velgeren ovenfor inneholder en id og to HTML -elementer. Som du kan se fra eksemplet ovenfor, gir en nestet velger deg muligheten til å målrette mot et bestemt element i en gruppe.

Derfor er det bare spenn seksjonen i tag av div med velkommen ID vil bli belagt med fargen rød.

Enten du bruker et stylingspråk som CSS eller et programmeringsspråk, bør du absolutt vite hvordan du skriver en kommentar. Kommentarer er viktige i prosjekter på bedriftsnivå der flere utviklere jobber sammen, og det er også nyttig når det gjelder utvikling i liten skala.

En CSS -kommentar inneholder to skråstreker, to stjerner og en kommentarseksjon.

/ * Slik skriver du en kommentar på en linje i CSS */

/*
Slik skriver du
en kommentar på flere linjer
i CSS
*/

Hva blir det neste?

Denne artikkelen gir deg grunnleggende komponenter i CSS. Du kan nå bruke en identifisere:

• Enhver av de tre CSS -implementeringsmetodene
• Alle elementene i en CSS -erklæring
• De tre grunnleggende typer velgere
• En CSS -kommentar

Likevel er dette bare begynnelsen. CSS har flere rammer som hjelper deg med å utvikle en bedre forståelse av språket. Den eneste utfordringen er å bestemme hvilken som er best for deg.

Tailwind CSS vs. Bootstrap: Hvilken er en bedre ramme?

Når du velger et CSS -rammeverk, er det viktig å finne det som oppfyller dine krav.

Les neste

Om forfatteren