Akronymet CSS står for "cascading style sheets". CSS bruges til at style hjemmesider og applikationer, der bruges på alle enheder. Style-arket bruges ofte sammen med HTML og et front-end programmeringssprog som f.eks. JavaScript.

CSS kan implementeres på en af ​​tre måder - inline, internt eller eksternt. Selvom ekstern CSS er den anbefalede tilgang, er der tilfælde, hvor de to resterende implementeringsmetoder kan være mere praktiske.

I denne selvstudie lærer du alt det grundlæggende i CSS for at begynde at bygge applikationer i dag.

Hvornår skal man bruge de forskellige CSS -implementeringsmetoder

Inline CSS er den ideelle implementeringsmetode, når hensigten kun er at inkludere en eller to stylingpræferencer på en webside sammen med et par andre nichecases. Den inline CSS -metode udnytter stil søgeord sammen med en CSS -ejendom for at opnå et specifikt resultat.

Hvis du har tænkt dig at ændre farven på en enkelt overskrift til rød, kan inline CSS være en god mulighed. En niche -sag, som nævnt ovenfor, ville være, når du opretter HTML -layouts, der primært består af tabeller (en forældet praksis).

Brug af inline CSS -eksempel

Hovedoverskrift

Kodelinjen ovenfor viser teksten "Hovedoverskrift" belagt med farven rød. Dette er muligvis en af ​​de eneste praktiske grunde til at bruge inline CSS, fordi der normalt kun er en h1 element på en given webside.

Hvis du har tænkt dig at dække alt h2 elementer på en webside med farven gul. Du bliver nødt til at bruge CSS stil nøgleord, sammen med farve egenskab og dens værdi (gul) på hvert element. En mere effektiv måde at udføre denne opgave på er imidlertid at bruge intern CSS.

Brug af internt CSS -eksempel

Placering af koden ovenfor i tag i din HTML -fil vil sikre, at alle h2 elementer i filen er belagt med gult. Intern CSS er adskilt fra HTML -koden, og det gør metoden mere effektiv, fordi den letter målretningen mod forskellige elementgrupper.

Så hvorfor er den eksterne CSS -implementeringsmetode stadig den mest anbefalede tilgang? Adskillelse af bekymringer. Med ekstern CSS er din CSS -kode fuldstændig adskilt fra din HTML -kode, hvilket sikrer skalerbarhed for store projekter og gør testprocessen mere effektiv.

Brug af eksternt CSS -eksempel

Indsætte kodelinjen ovenfor i tag i din HTML -fil vil lette stylingen af ​​din webside ved hjælp af den eksterne CSS -metode. Det eneste aspekt af koden ovenfor, der ændres, er den værdi, der er tildelt til href egenskab, som altid skal være navnet på CSS -filen (inklusive .css -udvidelsen).

Relaterede: Hvad er Cascading Style Sheets, og hvad bruges CSS til? Med din CSS -fil knyttet til dit HTML -dokument, kan du nu begynde at skrive CSS -kode i din CSS -fil. På dette tidspunkt er den eneste forskel mellem det interne CSS -eksempel ovenfor og det eksterne CSS stil tag. Derfor vil tilføjelse af følgende kode i en CSS -fil frembringe det samme resultat som det interne CSS -eksempel ovenfor.

h2 {
farve: gul;
}

Udforskning af CSS grundstruktur

Den grundlæggende CSS -erklæring indeholder syv væsentlige elementer, som du kan se fra eksemplet herunder. De arbejder alle sammen for at opnå et specifikt sæt stylingpræferencer.

Vælgeren

I en CSS -erklæring kan en vælger enten være en id, a klasse, et element eller i nogle særlige tilfælde en pseudovælger. I CSS -strukturen over -en element bruges som vælger, hvilket betyder, at alle links på en webside vil være belagt med rødt. Væsentligt er formålet med vælgeren at identificere det eller de elementer, der skal styles.

Erklæring Start og slut

Erklæringen start og slut er vigtig, fordi de vedlægger alle de stylingpræferencer, der gælder for en bestemt vælger. Begge elementer er repræsenteret af et par åbne og lukkede krøllede seler. En god måde at huske at bruge en deklarationsstart eller erklæringsafslutning er at huske, at hvis du har en åben krølleafstiver, skal der være en tilsvarende lukket krølleafstiver og omvendt.

Ejendommen

CSS -ejendommen i en deklarationsstruktur kan være en af ​​over hundrede forskellige ejendomstyper. Den egenskabstype, der bruges i CSS -strukturen ovenfor, er farve og denne egenskab er målrettet mod tekst på en webside. Hvis du vil vide mere, kan du tjekke vores omfattende liste over CSS -egenskaber og deres anvendelse.

Ejendoms-/værdiseparatoren

Selvom det kan virke lille og ubetydeligt, er egenskab/værdiseparatoren lige så vigtig som alle de andre elementer i CSS -strukturen. Hvis der nogensinde er et tilfælde, hvor dette element er glemt, vil hele CSS -erklæringen ikke blive udført.

Værdien

CSS -ejendomsværdien repræsenterer den nøjagtige stil, du gerne vil anvende på en given ejendom. De værdier, der er tilgængelige til brug, afhænger af egenskabstypen. Den egenskab, der bruges i strukturen ovenfor, er f.eks farve, hvilket betyder, at der kun er en type værdi, der kan anvendes på denne ejendom, et farvenavn. EN farve værdi kan præsenteres i en af ​​fire former: en ordværdi (som i eksemplet ovenfor), en hexadecimal værdi, en HSL (Hue, Saturation, Lightness) værdi eller en RGB (rød, grøn, blå) værdi.

Deklarationsseparatoren

Deklarationsseparatoren angiver, at du er ved afslutningen af ​​en specifik stylingerklæring. I strukturen ovenfor er der kun én deklarationsseparator, men der kan være flere. Det hele afhænger af antallet af CSS -ejendomme, du agter at bruge på en bestemt klasse, ideller element.

Hvad er id'er og klasser?

id'er og klasser spiller en grundlæggende rolle i CSS -stylingsprocessen. Ligesom HTML -elementer, CSS id'er og klasser bruges som selektorer i en CSS -erklæring. Imidlertid, klasser og id'er have forrang frem for et HTML -element.

Den generelle regel i CSS er, at den sidste stildeklaration, du tilføjede til en fil, tilsidesætter dem, der var der før. Derfor, hvis der er to erklæringer med en h2 vælger i en CSS -fil, tilsidesætter erklæringen, der blev tilføjet sidst, dem, der var der før.

Men hvis dette h2 element har en id der bruges som vælger i en CSS -erklæring, uanset dens position (før eller efter) til en CSS -erklæring, der har h2 element som dets vælger, stylingspræferencen i id erklæring vil altid have forrang for elementet. Kort sagt, en id vil tilsidesætte andre stilvælgere.

Det er vigtigt at huske, at i en CSS -erklæring, id'er begynde med et talstegn, og klasser begynder med et punktum. Den mest markante forskel mellem en id og a klasse er det en id er unik, mens a klasse kan kopieres. For eksempel en samling af lignende tags kan gives det samme klasse navn; dog id af hver tag skal være unikt.

Undersøgelse af de forskellige typer af vælgere

Der er tre grundlæggende typer af selektorer - single, multiple og nestede. Indtil videre har denne artikel i vid udstrækning dækket enkelte vælgere.

Når du bruger CSS, vil der være tilfælde, hvor du gerne vil have forskellige elementer på forskellige positioner på a webside for at have en lignende stil, der adskiller sig fra den generelle stil, der anvendes på hele websiden. I disse tilfælde vil det være nyttigt at vide, hvordan man bruger flere selektorer.

Grundlæggende HTML -skabeloneksempel

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!







Titel

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?







Titel

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øje på HTML -filen ovenfor, ser du den dynamik, der findes mellem id'er og klasser. Med henvisning til filen ovenfor, hvis du vil anvende den samme stil på om sektion og kun artiklerne på websiden, vil følgende CSS -kode opnå dette.

Brug af flere vælgere Eksempel

#Om, .indhold {
farve: hvid;
baggrundsfarve: darkcyan;
}

Når du bruger flere vælgere, skal du altid adskille hver vælger ved hjælp af et komma. Eksemplet ovenfor har to selektorer, en id og a klasse. Hvis det komma, der følger omid mangler, udføres CSS -erklæringen ikke.

Når vi går tilbage til det grundlæggende HTML -skabeloneksempel ovenfor, er der to tags til stede - den ene i velkomstafsnittet og den anden i afsnittet Om. Hvis dit mål kun er at målrette mod en af ​​disse tags, bør en indlejret vælger være din go-to-metode.

Brug af eksempler på indlejrede vælgere

#Welcome p span {
farve: rød;
}

Den indlejrede vælger ovenfor indeholder en id og to HTML -elementer. Som du kan se fra eksemplet ovenfor, giver en indlejret vælger dig mulighed for at målrette mod et specifikt element i en gruppe.

Derfor er det kun spændvidde sektion i tag på div med velkommen id vil blive belagt i farven rød.

Uanset om du bruger et stylingsprog som CSS eller et programmeringssprog, bør du absolut vide, hvordan du skriver en kommentar. Kommentarer er afgørende i projekter på virksomhedsniveau, hvor flere udviklere arbejder sammen, og det er også nyttigt, når der skal laves mindre udvikling.

En CSS -kommentar indeholder to skråstreger, to stjerner og en kommentarsektion.

/ * Sådan skriver du en enkelt linjekommentar i CSS */

/*
Sådan skriver du
en kommentar med flere linjer
i CSS
*/

Hvad er det næste?

Denne artikel giver dig grundlæggende komponenter i CSS. Du kan nu bruge en identifikation:

• Enhver af de tre CSS -implementeringsmetoder
• Alle elementer i en CSS -erklæring
• De tre grundlæggende typer af selektorer
• En CSS -kommentar

Alligevel er dette kun begyndelsen. CSS har flere rammer, der hjælper dig med at udvikle en bedre forståelse af sproget. Den eneste udfordring er at beslutte, hvilken der er bedst for dig.

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

Når du vælger en CSS -ramme, er det vigtigt at finde den, der opfylder dine krav.

Læs Næste

Om forfatteren