{"id":91885,"date":"2022-10-12T07:55:39","date_gmt":"2022-10-12T12:55:39","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/en-introduktion-till-cascading-style-sheets-css\/"},"modified":"2022-10-12T07:55:39","modified_gmt":"2022-10-12T12:55:39","slug":"en-introduktion-till-cascading-style-sheets-css","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/en-introduktion-till-cascading-style-sheets-css\/","title":{"rendered":"En introduktion till Cascading Style Sheets (CSS)"},"content":{"rendered":"
\n

F\u00f6rkortningen CSS st\u00e5r f\u00f6r \u201ccascading style sheets\u201d. CSS anv\u00e4nds f\u00f6r att utforma webbplatser och applikationer som anv\u00e4nds p\u00e5 alla enheter. Stilmallen anv\u00e4nds ofta tillsammans med HTML och ett front-end programmeringsspr\u00e5k som JavaScript.<\/p>\n

CSS kan implementeras p\u00e5 ett av tre s\u00e4tt \u2013 inline, internt eller externt. \u00c4ven om extern CSS \u00e4r det rekommenderade tillv\u00e4gag\u00e5ngss\u00e4ttet, finns det tillf\u00e4llen d\u00e5 de tv\u00e5 \u00e5terst\u00e5ende metoderna f\u00f6r implementering kan vara mer praktiska.<\/p>\n

I den h\u00e4r sj\u00e4lvstudieartikeln l\u00e4r du dig alla grunderna i CSS f\u00f6r att b\u00f6rja bygga applikationer idag.<\/p>\n

<\/span> N\u00e4r ska man anv\u00e4nda de olika CSS-implementeringsmetoderna<\/span><\/h2>\n

Inline CSS \u00e4r den idealiska metoden f\u00f6r implementering n\u00e4r avsikten \u00e4r att bara inkludera en eller tv\u00e5 stilpreferenser p\u00e5 en webbsida, tillsammans med n\u00e5gra andra nischfall. Inline CSS-metoden anv\u00e4nder stil <\/strong>nyckelord tillsammans med en CSS-egenskap f\u00f6r att uppn\u00e5 ett specifikt resultat.<\/p>\n

Om du t\u00e4nker \u00e4ndra f\u00e4rgen p\u00e5 en enskild rubrik till r\u00f6d kan inline CSS vara ett bra alternativ. Ett nischfall, som n\u00e4mnt ovan, skulle vara n\u00e4r man skapar HTML-layouter som i f\u00f6rsta hand best\u00e5r av tabeller (en f\u00f6r\u00e5ldrad praxis).<\/p>\n

<\/span>Anv\u00e4nda Inline CSS Exempel<\/span><\/h3>\n
<h1 style=\"color: red;\">Main Heading<\/h1><\/pre>\n
Kodraden ovan kommer att visa texten \u201cHuvudrubrik\u201d belagd i den r\u00f6da f\u00e4rgen.  Detta \u00e4r f\u00f6rmodligen en av de enda praktiska anledningarna till att anv\u00e4nda inline CSS eftersom det vanligtvis bara finns en h1<\/strong> element p\u00e5 en given webbsida.<\/p>\n
Om du t\u00e4nker bel\u00e4gga alla h2<\/strong> element p\u00e5 en webbsida med f\u00e4rgen gul.  Du m\u00e5ste anv\u00e4nda CSS stil<\/strong> nyckelord, tillsammans med F\u00e4rg<\/strong> egenskap och dess v\u00e4rde (gul) p\u00e5 varje element.  Ett mer effektivt s\u00e4tt att utf\u00f6ra denna uppgift \u00e4r dock att anv\u00e4nda intern CSS.<\/p>\n
<\/span>Anv\u00e4nda internt CSS-exempel<\/span><\/h3>\n
<style>h2{color: yellow;}<\/style><\/pre>\n
Placera koden ovan i <\/strong> taggen f\u00f6r din HTML-fil kommer att s\u00e4kerst\u00e4lla att alla h2<\/strong> elementen i den filen \u00e4r belagda med gult.  Intern CSS \u00e4r separerad fr\u00e5n HTML-koden, och detta g\u00f6r metoden mer effektiv eftersom den underl\u00e4ttar inriktningen p\u00e5 olika elementgrupper.<\/p>\n
S\u00e5 varf\u00f6r \u00e4r den externa CSS-implementeringsmetoden fortfarande den mest rekommenderade metoden?  Dela upp problemen.  Med extern CSS \u00e4r din CSS-kod helt separerad fr\u00e5n din HTML-kod, vilket s\u00e4kerst\u00e4ller skalbarhet f\u00f6r stora projekt och g\u00f6r testprocessen mer effektiv.<\/p>\n
<\/span>Anv\u00e4nda Extern CSS Exempel<\/span><\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/ipotek.net\/en-introduktion-till-cascading-style-sheets-css\/css_file_name\"><\/pre>\n
Infoga kodraden ovan i <\/strong> taggen f\u00f6r din HTML-fil kommer att underl\u00e4tta stylingen av din webbsida med den externa CSS-metoden.  Den enda aspekten av koden ovan som kommer att \u00e4ndras \u00e4r v\u00e4rdet som tilldelas href<\/strong> egenskap, som alltid ska vara namnet p\u00e5 CSS-filen (inklusive till\u00e4gget .css).<\/p>\n
  Med din CSS-fil l\u00e4nkad till ditt HTML-dokument kan du nu b\u00f6rja skriva CSS-kod i din CSS-fil.  Vid det h\u00e4r laget \u00e4r den enda skillnaden mellan det interna CSS-exemplet ovan och den externa CSS-en stil<\/strong> m\u00e4rka.  D\u00e4rf\u00f6r kommer att infoga f\u00f6ljande kod i en CSS-fil att ge samma resultat som det interna CSS-exemplet ovan.<\/p>\n
h2{color: yellow;}<\/pre>\n
<\/span>  Utforska CSS grundl\u00e4ggande struktur<\/span><\/h2>\n
Den grundl\u00e4ggande CSS-deklarationen inneh\u00e5ller sju v\u00e4sentliga element, som du kan se i exemplet nedan.  De arbetar alla tillsammans f\u00f6r att uppn\u00e5 en specifik upps\u00e4ttning stylingpreferenser.<\/p>\n
\n<\/figure>\n
<\/span>  V\u00e4ljaren<\/span><\/h2>\n
I en CSS-deklaration kan en v\u00e4ljare antingen vara en id<\/strong>, a klass<\/strong>, ett element, eller i vissa speciella fall, en pseudov\u00e4ljare.  I CSS-strukturen ovanf\u00f6r a<\/strong> element anv\u00e4nds som en v\u00e4ljare, vilket inneb\u00e4r att alla l\u00e4nkar p\u00e5 en webbsida kommer att bel\u00e4ggas med r\u00f6tt.  Syftet med v\u00e4ljaren \u00e4r i huvudsak att identifiera elementet\/elementen som ska utformas.<\/p>\n
<\/span>  Deklarationens start och slut<\/span><\/h2>\n
Deklarationens b\u00f6rjan och slut \u00e4r viktiga eftersom de omsluter alla stylingpreferenser som g\u00e4ller f\u00f6r en specifik v\u00e4ljare.  B\u00e5da elementen representeras av ett par \u00f6ppna och slutna lockiga h\u00e4ngslen.  Ett bra s\u00e4tt att komma ih\u00e5g att anv\u00e4nda en deklarationsstart eller deklarationsslut \u00e4r att komma ih\u00e5g att om du har ett \u00f6ppet lockigt stag ska det finnas ett motsvarande st\u00e4ngt lockigt stag, och vice versa.<\/p>\n
<\/span>  Egendomen<\/span><\/h2>\n
CSS-egenskapen i en deklarationsstruktur kan vara vilken som helst av \u00f6ver hundra olika egenskapstyper.  Egenskapstypen som anv\u00e4nds i CSS-strukturen ovan \u00e4r F\u00e4rg<\/strong> och den h\u00e4r egenskapen \u00e4r inriktad p\u00e5 text p\u00e5 en webbsida.  Om du vill veta mer, kolla in v\u00e5r omfattande lista \u00f6ver CSS-egenskaper och deras anv\u00e4ndning.<\/p>\n
<\/span>Fastighets-\/v\u00e4rdeavskiljaren<\/span><\/h3>\n
\u00c4ven om det kan verka litet och obetydligt, \u00e4r egenskap\/v\u00e4rde-separatorn lika viktig som alla andra element i CSS-strukturen.  Om det n\u00e5gonsin finns en instans d\u00e4r detta element gl\u00f6ms bort, kommer inte hela CSS-deklarationen att k\u00f6ras.<\/p>\n
<\/span>  V\u00e4rdet<\/span><\/h2>\n
CSS-egenskapsv\u00e4rdet representerar den exakta stilen som du vill till\u00e4mpa p\u00e5 en viss egenskap.  Vilka v\u00e4rden som \u00e4r tillg\u00e4ngliga f\u00f6r anv\u00e4ndning beror p\u00e5 egenskapstypen.  Till exempel \u00e4r egenskapen som anv\u00e4nds i strukturen ovan F\u00e4rg<\/strong>, vilket betyder att det bara finns en typ av v\u00e4rde som kan till\u00e4mpas p\u00e5 den h\u00e4r egenskapen, ett f\u00e4rgnamn.  A F\u00e4rg <\/strong>v\u00e4rde kan presenteras i en av fyra former: ett ordv\u00e4rde (som i exemplet ovan), ett hexadecimalt v\u00e4rde, ett HSL-v\u00e4rde (Hue, Saturation, Lightness) eller ett RGB-v\u00e4rde (R\u00f6d, Gr\u00f6n, Bl\u00e5).<\/p>\n
<\/span>  Deklarationsavskiljaren<\/span><\/h2>\n
Deklarationsavgr\u00e4nsaren anger att du \u00e4r i slutet av en specifik stildeklaration.  I strukturen ovan finns det bara en deklarationsavgr\u00e4nsare, men det kan finnas fler.  Allt beror p\u00e5 antalet CSS-egenskaper du t\u00e4nker anv\u00e4nda p\u00e5 en specifik klass<\/strong>, id<\/strong>, eller element.<\/p>\n
<\/span>  Vad \u00e4r id och klasser?<\/span><\/h2>\n
ids<\/strong> och klasser<\/strong> spelar en grundl\u00e4ggande roll i CSS-stylingprocessen.  Som HTML-element, CSS ids<\/strong> och klasser<\/strong> anv\u00e4nds som v\u00e4ljare i en CSS-deklaration.  Dock, klasser<\/strong> och ids<\/strong> ha f\u00f6retr\u00e4de framf\u00f6r ett HTML-element.<\/p>\n
Den allm\u00e4nna regeln i CSS \u00e4r att den sista stildeklarationen du l\u00e4gger till i en fil kommer att \u00e5sidos\u00e4tta de som fanns d\u00e4r tidigare.  D\u00e4rf\u00f6r, om det finns tv\u00e5 deklarationer med en h2<\/strong> selector i en CSS-fil, \u00e5sidos\u00e4tter deklarationen som lades till sist de som fanns d\u00e4r tidigare.<\/p>\n
Men om detta h2<\/strong> element har en id <\/strong>som anv\u00e4nds som v\u00e4ljare i en CSS-deklaration, oavsett dess position (f\u00f6re eller efter) till en CSS-deklaration som har h2<\/strong> element som dess v\u00e4ljare, stilpreferensen i id<\/strong> deklarationen kommer alltid att ha f\u00f6retr\u00e4de framf\u00f6r elementet.  Kort sagt, en id<\/strong> kommer att \u00e5sidos\u00e4tta andra stilv\u00e4ljare.<\/p>\n
Det \u00e4r viktigt att komma ih\u00e5g att i en CSS-deklaration, ids<\/strong> b\u00f6rja med ett nummertecken och klasserna b\u00f6rjar med punkt.  Den viktigaste skillnaden mellan en id<\/strong> och a klass<\/strong> \u00e4r det en id<\/strong> \u00e4r unik, medan en klass<\/strong> kan dupliceras.  Till exempel en samling liknande <\/p>\n
 taggar kan ges p\u00e5 samma s\u00e4tt klass<\/strong> namn;  dock id<\/strong> av varje <\/p>\n
 taggen m\u00e5ste vara unik.<\/p>\n
<\/span>  Utforska de olika typerna av v\u00e4ljare<\/span><\/h2>\n
Det finns tre grundl\u00e4ggande typer av v\u00e4ljare \u2013 enkla, flera och kapslade.  Hittills har den h\u00e4r artikeln i stor utstr\u00e4ckning t\u00e4ckt enskilda v\u00e4ljare.<\/p>\n
N\u00e4r du anv\u00e4nder CSS kommer det att finnas tillf\u00e4llen d\u00e5 du vill att olika element p\u00e5 olika positioner p\u00e5 en webbsida ska ha en liknande stil som skiljer sig fr\u00e5n den allm\u00e4nna stilen som till\u00e4mpas p\u00e5 hela webbsidan.  I dessa fall kan det vara bra att veta hur man anv\u00e4nder flera v\u00e4ljare.<\/p>\n
<\/span>Exempel p\u00e5 grundl\u00e4ggande HTML-mall<\/span><\/h3>\n
<!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 voluptatesdignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! <\/span> Architectotempora 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 voluptatesdignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! <\/span> Architectotempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!<\/p><\/div><\/p>
<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 doloresimpedit 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 corruptimollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendiimpedit hic maxime? Eius modi optio ad, nisi tempora sapiente?<\/p><\/div><\/p>
<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 doloresimpedit 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 corruptimollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendiimpedit hic maxime? Eius modi optio ad, nisi tempora sapiente?<\/p><\/div><\/p>
<\/div><\/p>
<\/body><\/html><\/p><\/pre>\n
Om du tittar noga p\u00e5 HTML-filen ovan ser du dynamiken som finns mellan ids<\/strong> och klasser<\/strong>.  Med h\u00e4nvisning till filen ovan, om du vill till\u00e4mpa samma stil p\u00e5 handla om<\/strong> sektionen och endast artiklarna p\u00e5 webbsidan, kommer f\u00f6ljande CSS-kod att \u00e5stadkomma detta.<\/p>\n
<\/span>Anv\u00e4nda flera v\u00e4ljare Exempel<\/span><\/h3>\n
#About, .content{color: white;background-color: darkcyan;}<\/pre>\n
N\u00e4r du anv\u00e4nder flera v\u00e4ljare b\u00f6r du alltid separera varje v\u00e4ljare med ett kommatecken.  Exemplet ovan har tv\u00e5 v\u00e4ljare, en id <\/strong>och a klass<\/strong>.  Om kommatecken som f\u00f6ljer handla om<\/strong> id<\/strong> saknas kommer CSS-deklarationen inte att k\u00f6ras.<\/p>\n
Om vi \u200b\u200bg\u00e5r tillbaka till det grundl\u00e4ggande HTML-mallexemplet ovan, det finns tv\u00e5 <\/strong> taggar finns \u2013 en i v\u00e4lkomstsektionen och den andra i sektionen Om.  Om ditt m\u00e5l \u00e4r att rikta in dig p\u00e5 endast en av dessa <\/strong> taggar b\u00f6r en kapslad v\u00e4ljare vara din go-to-metod.<\/p>\n
<\/span>Anv\u00e4nda exempel p\u00e5 kapslade v\u00e4ljare<\/span><\/h3>\n
#Welcome p span{color: red;}<\/pre>\n
Den kapslade v\u00e4ljaren ovan inneh\u00e5ller en id<\/strong> och tv\u00e5 HTML-element.  Som du kan se fr\u00e5n exemplet ovan ger en kapslad v\u00e4ljare dig m\u00f6jligheten att rikta in dig p\u00e5 ett specifikt element inom en grupp.<\/p>\n
D\u00e4rf\u00f6r \u00e4r endast sp\u00e4nna<\/strong> avsnitt i <\/p>\n
 taggen av div<\/strong> med v\u00e4lkommen id<\/strong> kommer att bel\u00e4ggas i f\u00e4rgen r\u00f6d.<\/p>\n
Oavsett om du anv\u00e4nder ett stilspr\u00e5k som CSS eller ett programmeringsspr\u00e5k b\u00f6r du absolut veta hur man skriver en kommentar.  Kommentarer \u00e4r viktiga i projekt p\u00e5 f\u00f6retagsniv\u00e5 d\u00e4r flera utvecklare arbetar tillsammans, och det \u00e4r ocks\u00e5 anv\u00e4ndbart n\u00e4r man g\u00f6r sm\u00e5skalig utveckling.<\/p>\n
En CSS-kommentar inneh\u00e5ller tv\u00e5 snedstreck, tv\u00e5 asterisker och en kommentarsektion.<\/p>\n
\/* This is how you write a single line comment in CSS *\/<\/pre>\n
\/*This is how you writea multi-line commentin CSS*\/<\/pre>\n
<\/span>  Vad kommer h\u00e4rn\u00e4st?<\/span><\/h2>\n
Den h\u00e4r artikeln ger dig de grundl\u00e4ggande komponenterna i CSS.  Du kan nu anv\u00e4nda en identifiering:<\/p>\n
  Vilken som helst av de tre CSS-implementeringsmetoderna Alla element i en CSS-deklaration De tre grundl\u00e4ggande typerna av v\u00e4ljare En CSS-kommentar  <\/p>\n
\u00c4nd\u00e5 \u00e4r detta bara b\u00f6rjan.  CSS har flera ramverk som hj\u00e4lper dig att utveckla en b\u00e4ttre f\u00f6rst\u00e5else av spr\u00e5ket.  Den enda utmaningen \u00e4r att best\u00e4mma vilken som \u00e4r b\u00e4st f\u00f6r dig.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Kadeisha Kean (39 artiklar publicerade)
<\/strong><\/p>\n
Kadeisha Kean \u00e4r en full-stack mjukvaruutvecklare och teknisk\/teknikskribent.  Hon har den distinkta f\u00f6rm\u00e5gan att f\u00f6renkla n\u00e5gra av de mest komplexa tekniska koncepten;  producera material som l\u00e4tt kan f\u00f6rst\u00e5s av alla nyb\u00f6rjare.  Hon brinner f\u00f6r att skriva, utveckla intressant programvara och att resa runt i v\u00e4rlden (genom dokument\u00e4rer).<\/p>\n
                            Mer fr\u00e5n Kadeisha Kean<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n
                        <\/strong><\/div>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n