En introduktion till Cascading Style Sheets (CSS)

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. Stilmallen 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 det rekommenderade tillvägagångssättet, finns det tillfällen då de två återstående metoderna för implementering kan vara mer praktiska.

I den här självstudieartikeln lär du 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 idealiska metoden för implementering när avsikten är att bara inkludera en eller två stilpreferenser på en webbsida, tillsammans med några andra nischfall. Inline CSS-metoden använder stil nyckelord tillsammans med en CSS-egenskap för att uppnå ett specifikt resultat.

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

Använda Inline CSS Exempel

<h1 style="color: red;">Main Heading</h1>

Kodraden ovan kommer att visa texten “Huvudrubrik” belagd i den röda färgen. Detta är förmodligen 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 belägga alla h2 element på en webbsida med färgen gul. Du måste använda CSS stil nyckelord, tillsammans med Färg egenskap och dess värde (gul) 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

<style>
h2{
color: yellow;
}
</style>

Placera koden ovan i taggen för din HTML-fil kommer att säkerställa att alla h2 elementen i den filen är belagda med gult. Intern CSS är separerad 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 den mest rekommenderade metoden? Dela upp problemen. Med extern CSS är din CSS-kod helt separerad 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

<link rel="stylesheet" href="https://ipotek.net/en-introduktion-till-cascading-style-sheets-css/css_file_name">

Infoga kodraden ovan i taggen för din HTML-fil kommer att underlätta stylingen av din webbsida med 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 tillägget .css).

Med din CSS-fil länkad till ditt HTML-dokument kan du nu börja skriva CSS-kod i din CSS-fil. Vid det här laget är den enda skillnaden mellan det interna CSS-exemplet ovan och den externa CSS-en stil märka. Därför kommer att infoga följande kod i en CSS-fil att ge samma resultat som det interna CSS-exemplet ovan.

h2{
color: yellow;
}

Utforska CSS grundläggande struktur

Den grundläggande CSS-deklarationen innehåller sju väsentliga element, som du kan se i 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 en väljare, vilket innebär att alla länkar på en webbsida kommer att beläggas med rött. Syftet med väljaren är i huvudsak att identifiera elementet/elementen som ska utformas.

Deklarationens start och slut

Deklarationens början och slut är viktiga eftersom de omsluter alla 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 ett öppet lockigt stag ska det finnas ett motsvarande stängt lockigt stag, 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 veta mer, kolla in vår omfattande lista över CSS-egenskaper och deras användning.

Fastighets-/värdeavskiljaren

Även om det kan verka litet och obetydligt, är egenskap/värde-separatorn lika viktig som alla andra element i CSS-strukturen. Om det någonsin finns en instans där detta element glöms bort, kommer inte hela CSS-deklarationen att köras.

Värdet

CSS-egenskapsvärdet representerar den exakta stilen som du vill tillämpa på en viss egenskap. Vilka 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 betyder 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 (Hue, Saturation, Lightness) eller ett RGB-värde (Röd, Grön, Blå).

Deklarationsavskiljaren

Deklarationsavgränsaren anger att du är i slutet av en specifik stildeklaration. I strukturen ovan finns det bara en deklarationsavgränsare, men det kan finnas fler. Allt beror på antalet CSS-egenskaper du tänker använda på en specifik klass, id, eller element.

Vad är id och klasser?

ids och klasser spelar en grundläggande roll i CSS-stylingprocessen. Som HTML-element, CSS ids och klasser används som väljare i en CSS-deklaration. Dock, klasser och ids 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 selector i en CSS-fil, åsidosätter deklarationen som lades till sist de som fanns där tidigare.

Men om detta h2 element 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 dess väljare, stilpreferensen 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, ids börja med ett nummertecken och klasserna börjar med punkt. Den viktigaste skillnaden mellan en id och a klass är det en id är unik, medan en klass kan dupliceras. Till exempel en samling liknande

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contianer">
<div class="siteInfor" id="Welcome">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>
<div class="siteInfor" id="About">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>
<div class="content" id="article-1">
<h2>Title</h2>
<p>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?
</p>
</div>





	



	



	



	



<div class="content" id="article-2">
<h2>Title</h2>
<p>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?
</p>
</div>
</div>
</body>
</html>

#About, .content{
color: white;
background-color: darkcyan;
}

#Welcome p span{
color: red;
}

/* This is how you write a single line comment in CSS */

/*
This is how you write
a multi-line comment
in CSS
*/