Förkortningen CSS står för "cascading style sheets". CSS används för att utforma webbplatser och applikationer som används på alla enheter. Stilarket används ofta tillsammans med HTML och ett front-end programmeringsspråk som JavaScript.

CSS kan implementeras på ett av tre sätt - inline, internt eller externt. Även om extern CSS är den rekommenderade metoden, finns det tillfällen då de två återstående metoderna för implementering kan vara mer praktiska.

I denna självstudie kommer du att lära dig alla grunderna i CSS för att börja bygga applikationer idag.

När ska man använda de olika CSS -implementeringsmetoderna

Inline CSS är den perfekta implementeringsmetoden när avsikten är att bara inkludera en eller två stylinginställningar på en webbsida, tillsammans med några andra nischfall. Den inline CSS -metoden använder stil sökord tillsammans med en CSS -egenskap för att uppnå ett specifikt resultat.

Om du tänker ändra färgen på en enda rubrik till röd, kan inline CSS vara ett bra alternativ. Ett nischfall, som nämnts ovan, skulle vara när du skapar HTML -layouter som främst består av tabeller (en föråldrad praxis).

Använda Inline CSS Exempel

Huvudrubrik

Kodraden ovan visar texten "Huvudrubrik" belagd med färgen röd. Detta är möjligen en av de enda praktiska anledningarna till att använda inline CSS eftersom det vanligtvis bara finns en h1 element på en given webbsida.

Om du tänker täcka allt h2 element på en webbsida med färgen gul. Du måste använda CSS stil nyckelord, tillsammans med Färg egendom och dess värde (gult) på varje element. Ett mer effektivt sätt att utföra denna uppgift är dock att använda intern CSS.

Använda internt CSS -exempel

Placera koden ovan i taggen i din HTML -fil kommer att säkerställa att alla h2 element i den filen är belagda med gult. Intern CSS separeras från HTML -koden, och detta gör metoden mer effektiv eftersom den underlättar inriktningen på olika elementgrupper.

Så varför är den externa CSS -implementeringsmetoden fortfarande det mest rekommenderade tillvägagångssättet? Dela upp problemen. Med extern CSS är din CSS -kod helt åtskild från din HTML -kod, vilket säkerställer skalbarhet för stora projekt och gör testprocessen mer effektiv.

Använda Extern CSS Exempel

Infoga kodraden ovan i taggen för din HTML -fil underlättar utformningen av din webbsida med hjälp av den externa CSS -metoden. Den enda aspekten av koden ovan som kommer att ändras är värdet som tilldelas href egenskap, som alltid ska vara namnet på CSS -filen (inklusive .css -tillägget).

Relaterad: Vad är Cascading Style Sheets och vad används CSS till? Med din CSS -fil kopplad till ditt HTML -dokument kan du nu börja skriva CSS -kod i din CSS -fil. Vid denna tidpunkt är den enda skillnaden mellan det interna CSS -exemplet ovan och det externa CSS: et stil märka. Därför ger det samma resultat att infoga följande kod i en CSS -fil som det interna CSS -exemplet ovan.

h2 {
färg: gul;
}

Utforskar CSS Basic Structure

Den grundläggande CSS -deklarationen innehåller sju väsentliga element, som du kan se från exemplet nedan. De arbetar alla tillsammans för att uppnå en specifik uppsättning stylingpreferenser.

Väljaren

I en CSS -deklaration kan en väljare antingen vara en id, a klass, ett element, eller i vissa speciella fall, en pseudoväljare. I CSS -strukturen ovanför a element används som väljare, vilket innebär att alla länkar på en webbsida kommer att vara rödfärgade. I huvudsak är väljarens syfte att identifiera det eller de element som ska utformas.

Deklaration Start och slut

Deklarationens start och slut är viktiga eftersom de innehåller alla de stylingpreferenser som gäller för en specifik väljare. Båda elementen representeras av ett par öppna och slutna lockiga hängslen. Ett bra sätt att komma ihåg att använda en deklarationsstart eller deklarationsslut är att komma ihåg att om du har en öppen lockhållare bör det finnas en motsvarande stängd lockhållare och vice versa.

Egendomen

CSS -egenskapen i en deklarationsstruktur kan vara vilken som helst av över hundra olika egenskapstyper. Egenskapstypen som används i CSS -strukturen ovan är Färg och den här egenskapen är inriktad på text på en webbsida. Om du vill lära dig mer, kolla in vår omfattande lista över CSS -egenskaper och deras användning.

Fastighets-/värdeseparatorn

Även om det kan verka litet och obetydligt, är egenskapen/värdeseparatorn lika viktig som alla andra element i CSS -strukturen. Om det någonsin finns ett fall där det här elementet är glömt, kommer inte hela CSS -deklarationen att exekveras.

Värdet

Egenskapsvärdet CSS representerar den exakta stil som du vill tillämpa på en viss egendom. De värden som är tillgängliga för användning beror på egenskapstypen. Till exempel är egenskapen som används i strukturen ovan Färg, vilket innebär att det bara finns en typ av värde som kan tillämpas på den här egenskapen, ett färgnamn. A Färg värde kan presenteras i en av fyra former: ett ordvärde (som i exemplet ovan), ett hexadecimalt värde, ett HSL -värde (nyans, mättnad, ljushet) eller ett RGB -värde (rött, grönt, blått).

Deklarationsseparatorn

Deklarationsavgränsaren indikerar att du är i slutet av en specifik stylingdeklaration. I strukturen ovan finns det bara en deklarationsseparator, men det kan finnas fler. Allt beror på antalet CSS -egenskaper du tänker använda på en specifik klass, ideller element.

Vad är id och klasser?

id och klasser spela en grundläggande roll i CSS -stylingsprocessen. Precis som HTML -element, CSS id och klasser används som väljare i en CSS -deklaration. Dock, klasser och id ha företräde framför ett HTML -element.

Den allmänna regeln i CSS är att den sista stildeklarationen du lägger till i en fil kommer att åsidosätta de som fanns där tidigare. Därför, om det finns två deklarationer med en h2 väljare i en CSS -fil, åsidosätter deklarationen som lagts till sist de som fanns där tidigare.

Men om detta h2 elementet har en id som används som väljare i en CSS -deklaration, oavsett dess position (före eller efter) till en CSS -deklaration som har h2 element som väljare, stylingpreferensen i id deklarationen kommer alltid att ha företräde framför elementet. Kort sagt, en id kommer att åsidosätta andra stilväljare.

Det är viktigt att komma ihåg att i en CSS -deklaration, id börja med ett siffertecken och klasserna börjar med ett punkt. Den mest signifikanta skillnaden mellan en id och a klass är det en id är unik, medan a klass kan dupliceras. Till exempel en samling liknande taggar kan ges samma klass namn; dock id av varje taggen måste vara unik.

Utforska de olika typerna av väljare

Det finns tre grundläggande typer av väljare - enkla, flera och kapslade. Hittills har denna artikel omfattat enstaka väljare.

När du använder CSS kommer det att finnas tillfällen när du vill ha olika element på olika positioner på a webbsida för att ha en liknande stil som skiljer sig från den allmänna stilen som tillämpas på hela webbsidan. I dessa fall kan det vara bra att veta hur man använder flera väljare.

Grundläggande HTML -mallsexempel

Välkommen

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!







Handla 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? På 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? På 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?

Om du tittar noga på HTML -filen ovan ser du dynamiken som finns mellan id och klasser. Med hänvisning till filen ovan, om du vill tillämpa samma stil på handla om och endast artiklarna på webbsidan, kommer följande CSS -kod att uppnå detta.

Använda exempel på flera väljare

#Om, .content {
färg vit;
bakgrundsfärg: darkcyan;
}

När du använder flera väljare bör du alltid separera varje väljare med ett kommatecken. Exemplet ovan har två väljare, en id och a klass. Om kommatecken som följer handla omid saknas, kommer CSS -deklarationen inte att verkställas.

Om vi ​​går tillbaka till Basic HTML -mallexemplet ovan, det finns två taggar som finns - den ena i välkomstavsnittet och den andra i avsnittet om. Om ditt mål är att bara rikta in dig på en av dessa taggar, bör en kapslad väljare vara din go-to-metod.

Använda kapslade väljare Exempel

#Välkommen p span {
färgen röd;
}

Den kapslade väljaren ovan innehåller en id och två HTML -element. Som du kan se från exemplet ovan ger en kapslad väljare dig möjlighet att rikta in ett specifikt element inom en grupp.

Därför är det bara spänna avsnitt i tagg på div med välkommen id kommer att beläggas med färgen röd.

Oavsett om du använder ett stylingspråk som CSS eller ett programmeringsspråk, borde du absolut veta hur du skriver en kommentar. Kommentarer är viktiga i projekt på företagsnivå där flera utvecklare samarbetar, och det är också användbart när man gör småskalig utveckling.

En CSS -kommentar innehåller två snedstreck, två asterisker och en kommentarsektion.

/ * Så här skriver du en enda radskommentar i CSS */

/*
Så här skriver du
en kommentar med flera rader
i CSS
*/

Vad kommer härnäst?

Denna artikel ger dig grundläggande komponenter i CSS. Du kan nu använda en identifiera:

• Vilken som helst av de tre CSS -implementeringsmetoderna
• Alla element i en CSS -deklaration
• De tre grundläggande typerna av väljare
• En CSS -kommentar

Ändå är detta bara början. CSS har flera ramar som hjälper dig att utveckla en bättre förståelse av språket. Den enda utmaningen är att bestämma vilken som är bäst för dig.

Tailwind CSS vs. Bootstrap: Vilken är en bättre ram?

När du väljer ett CSS -ramverk är det viktigt att hitta det som uppfyller dina krav.

Läs Nästa

Om författaren