Övning – Formatera HTML med CSS

10 minuter

Med sammanhängande formatmallar (CSS) kan du ange hur sidan ska se ut. Den grundläggande idén är att definiera vilken stil som ska användas för de element som du använder på DINA HTML-sidor. Medan HTML-elementen definierar ditt innehåll definierar CSS-format hur det här innehållet ser ut.

Du kan till exempel använda rundade hörn eller ge en toningsbakgrund till ett element, eller så kan du använda CSS för att ange hur hyperlänkar ser ut och svarar när du interagerar med dem. Du kan också utföra avancerade sidlayouter och animeringseffekter.

Du kan använda formatmallar för specifika element, alla element av en viss typ eller använda klasser för att formatera många olika element.

I den här övningen använder du CSS-format på HTML-sidelement och lägger till lite CSS-kod för att definiera dina ljusa och mörka teman. Sedan kontrollerar du resultatet i webbläsarens utvecklarverktyg.

Extern CSS

I föregående lektion om HTML länkade du till en extern CSS-fil från HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

En fördel med extern CSS är att flera HTML-sidor kan länka till samma CSS-fil. Om du gör en ändring i CSS uppdateras din formatering för varje sida. När du använder en HTML-fil för sidinnehållet, en CSS-fil för formatering och en JavaScript-fil för interaktion, kallas det separation of concerns.

Som tidigare beskrivits kan du också skriva CSS direkt i HTML, vilket kallas intern CSS. Även för en grundläggande webbplats finns det så många CSS-regler att HTML-sidan kan bli rörig snabbt. Med fler än en sida skulle samma CSS ofta upprepas och vara svårt att hantera.

CSS-regler

CSS-regler är hur du tillämpar formatmallar på HTML-element. CSS-regler har en väljare som används för att uttrycka elementet (eller elementen) som formatmallarna ska tillämpas på.

Öppna filen i main.css Visual Studio Code och ange följande:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Det här kodfragmentet innehåller två regler. Varje regel har:

En väljare. body och ul är väljare för de två reglerna och används för att välja vilka element som formatmallarna ska tillämpas på.
En inledande klammerparentes ({).
En lista med formatdeklarationer som avgör hur de valda elementen ska se ut.
En avslutande klammerparentes (}).

Väljaren ul väljer <ul> till exempel HTML-elementet på sidan för att tillämpa formatmallar på den. Deklarationen är font-family: helvetica, och avgör vilken formatmall som ska vara. Egenskapsnamnet är font-familyoch värdet är helvetica.

Som du ser härnäst kan du definiera dina egna anpassade namn för element.

Väljare

Med ID - och klassväljare kan du använda formatmallar för anpassade attributnamn i HTML-koden. Du använder ett ID för att formatera ett element, medan du använder klasser för att formatera flera element.

Kopiera följande kod och lägg till den i CSS-filen. Klistra in den efter den avslutande klammerparentesen för väljaren ul som du lade till tidigare.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
Föregående kod innehåller tre CSS-regler, där de två sista reglerna använder anpassade attribut för att välja element: .list och #msg.
- .list är en klassväljare. Varje HTML-element som innehåller en class attributuppsättning för att list hämta de formatmallar som definieras i den här väljaren.
- #msg är en ID-väljare. HTML-elementet som har sitt id attribut inställt på msg hämtar de formatmallar som definieras i den här väljaren.
De namn som du använder för dina väljare kan vara godtyckliga, så länge de matchar det du har definierat i HTML-koden.
Spara ditt arbete genom att välja Control+S i Windows eller Command+S på macOS.

Visa i webbläsare

Om du vill förhandsgranska med Visual Studio Code högerklickar du på filen i Utforskaren index.html och väljer sedan Öppna i standardwebbläsaren.

Viktigt!

Även om du precis redigerade main.css filen bör du välja index.html filen för att förhandsgranska ändringarna.

Webbsidan öppnas i standardwebbläsaren.

Är teckensnittsformaten det du förväntade dig att se? Det är intressant hur format som tillämpas <body> på ärvs för elementet <h1> . Vi har inte definierat något för <h1>, men det fick fortfarande teckensnittet som definierades på <body>. Den här arvsmekanismen från överordnade element till deras underordnade element är en av de viktigaste aspekterna av CSS. Elementen <li> har dock ett annat teckensnitt. Formatet för elementen <li> åsidosätter formatuppsättningen för <body> eftersom elementet <li> är en underordnad <ul> element, som du har definierat ett format för.

När du använder Öppna i standardwebbläsaren i Visual Studio Code öppnas en ny flik i webbläsaren varje gång. Om du vill undvika att öppna en ny flik kan du läsa in fliken som redan innehåller webbplatsen i stället.

Om du vill läsa in fliken igen trycker du på F5, som är kortkommandot för uppdatering, eller trycker på Ctrl+R i Windows eller Linux och Command+R på en Mac.

Lägg till ett ljust tema

Lägg sedan till stöd för ett färgtema för din webbplats. Börja med att definiera ett ljust tema med hjälp av hexfärgkoder.

I CSS-filen (main.css) lägger du till följande kod i slutet av filen.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
I det här exemplet #000000 anger du svart för teckenfärgen och #00FF00 anger grönt för bakgrundsfärgen.
I HTML-filen (index.html) uppdaterar du elementet <body> med klassnamnet light-theme. Nu tillämpar klassväljaren för ljust tema formatmallarna korrekt.
```
<body class="light-theme">
```

Visa i webbläsare

Om du vill förhandsgranska med Visual Studio Code högerklickar du på index.htmloch väljer sedan Öppna i standardwebbläsaren eller läser in föregående flik igen genom att trycka på F5.

Observera att ljustemat med en grön bakgrund visas.

Visa tillämpad CSS

Öppna Utvecklarverktyg i webbläsarvyn.

Högerklicka på sidan och välj Inspektera eller välj genvägen F12 eller Ctrl+Skift+I.
Välj fliken Element och välj fliken Format på fliken Element (den bör redan vara markerad som standard).
Hovra över de olika HTML-elementen och lägg märke till hur utvecklarverktygen visar vilka formatmallar som tillämpas på dem på fliken Format .
Välj elementet <body> . Observera den light-theme tillämpade.
Välj det osorterade listelementet <ul> . Observera det anpassade formatet font-family: helvetica;, som åsidosätter formatet för elementet <body> .

Mer information om hur du visar CSS-formatmallar i Utvecklarverktyg finns i artikeln Kom igång med att visa och ändra CSS .

Lägg till ett mörkt tema

För det mörka temat konfigurerar du infrastrukturen inför nästa lektion, där du aktiverar temaväxling på webbsidan.

Om du vill lägga till stöd för ett mörkt tema i din CSS använder du följande steg.

I CSS-filen (main.css) lägger du till några konstanter i sidroten i början av filen.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
Väljaren :root representerar elementet <html> på HTML-sidan. För den här typen av uppgift är bästa praxis att definiera en uppsättning globala CSS-variabler i en CSS-regel med väljaren :root . I det här exemplet har du definierat tre färgvariabler. Nu kan du använda dessa variabler i andra CSS-regler.
I slutet av CSS-filen ersätter du light-theme regeln med följande kod för att uppdatera den och lägga till väljaren dark-theme .
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
I föregående kod definierade du två nya variabler och bgfontColor, som anger en bakgrunds- och teckensnittsfärg. Dessa variabler använder nyckelordet var för att ange sina egenskapsvärden till de variabler som tidigare angetts i väljaren :root .
Ersätt sedan den aktuella body väljaren med följande kod i CSS-filen.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
I det här exemplet använder du väljaren body för att ange background egenskaperna och color och eftersom elementen som visas på webbsidan alla finns i elementet <body> ärver de färgerna som anges på <body>.
I CSS-filen tar du bort reglerna med väljare och #msgul så att de också ärver samma teckensnitt från <body>.

Kom ihåg att spara filen genom att välja Control+S eller Command+S.

Din CSS-fil (main.css) bör nu se ut så här:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

Om du vill visa det mörka temat öppnar du filen index.html och redigerar standardtemat manuellt i klassattributet <body> till mörkt tema (dark-theme). Spara filen och ladda in sidan igen i webbläsaren.
Redigera klassattributet <body> för att växla tillbaka standardvärdet till ljust tema.

I nästa lektion använder du JavaScript för att tillhandahålla interaktivitet och stödja byte av teman.

Använda GitHub Copilot för att lägga till ett tema

Du kan använda GitHub Copilot i din IDE för att generera CSS för att lägga till ett nytt tema. Du kan anpassa uppmaningen för att ange egenskaper för att definiera formatmallarna för HTML-element enligt dina behov.

Följande text visar en exempelfråga för Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot drivs av AI, så överraskningar och misstag är möjliga. Mer information finns i Vanliga frågor och svar om Copilot.

Läs mer om GitHub Copilot i Visual Studio Code.

Feedback

Var den här sidan till hjälp?