Øvelse – style din HTML med CSS

10 minutter

Overlappende typografiark (CSS) giver dig mulighed for at angive, hvordan siden skal se ud. Den grundlæggende idé er at definere, hvad typografien skal være for de elementer, du bruger på dine HTML-sider. Mens HTML-elementerne definerer dit indhold, definerer CSS-typografier, hvordan dette indhold ser ud.

Du kan f.eks. anvende afrundede hjørner eller give en gradueringsbaggrund til et element, eller du kan bruge CSS til at angive, hvordan links skal se ud og reagere, når du interagerer med dem. Du kan også udføre avancerede sidelayout og animationseffekter.

Du kan anvende typografier på bestemte elementer, alle elementer af en bestemt type eller bruge klasser til at formatere mange forskellige elementer.

I denne øvelse skal du anvende CSS-typografier på HTML-sideelementer og tilføje noget CSS-kode for at definere dine lyse og mørke temaer. Derefter skal du kontrollere resultaterne i udviklerværktøjerne i din browser.

Ekstern CSS

I det forrige undermodul om HTML har du kædet til en ekstern CSS-fil fra 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 fordel ved eksterne CSS er, at flere HTML-sider kan linke til den samme CSS-fil. Hvis du foretager en ændring af CSS, opdateres din formatering for hver side. Når du bruger en HTML-fil til dit sideindhold, en CSS-fil til formatering og en JavaScript-fil til interaktion, kaldes det adskillelse af bekymringer.

Som beskrevet tidligere kan du også skrive CSS direkte i HTML, som kaldes interne CSS-. Selv for et grundlæggende websted er der så mange CSS-regler, at HTML-siden hurtigt kan blive rodet. Med mere end én side vil den samme CSS ofte blive gentaget og udfordrende at administrere.

CSS-regler

CSS-regler er den måde, du anvender typografier på HTML-elementer på. CSS-regler har en selektor, som bruges til at udtrykke det element (eller de elementer), som typografierne skal anvendes på.

Åbn filen main.css i Visual Studio Code, og angiv følgende:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Dette kodestykke indeholder to regler. Hver regel har:

En vælger. body og ul er vælgerne af de to regler og bruges til at vælge, hvilke elementer typografierne skal anvendes på.
Krøllet klammeparentes til åbning ({).
En liste over typografier erklæringer, der bestemmer, hvordan det eller de valgte elementer skal se ud.
En krøllet afsluttende klammeparentes (}).

Den ul vælger f.eks. <ul> HTML-element på siden for at anvende typografier på den. Erklæringen er font-family: helveticaog bestemmer, hvilken typografi der skal være. Navnet på egenskaben er font-family, og den værdi er helvetica.

Som du kan se næste, kan du definere dine egne brugerdefinerede navne for elementer.

Vælgere

id- og klasse selektorer giver dig mulighed for at anvende typografier på brugerdefinerede attributnavne i HTML-koden. Du bruger et id til at formatere ét element, mens du bruger klasser til at formatere flere elementer.

Kopiér følgende kode, og føj den til din CSS-fil. Indsæt den efter den krøllede slutparentes for den ul selektor, du har tilføjet tidligere.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
Den foregående kode indeholder tre CSS-regler, hvor de sidste to regler bruger brugerdefinerede attributter til at vælge elementer: .list og #msg.
- .list er en klassevælger. Hvert HTML-element, der indeholder en class attribut, der er angivet til list henter de typografier, der er defineret i denne selektor.
- #msg er en id-vælger. HTML-elementet, der har attributten id indstillet til msg henter de typografier, der er defineret i denne selektor.
De navne, du bruger til dine vælgere, kan være vilkårlige, så længe de stemmer overens med det, du har defineret i HTML-koden.
Gem dit arbejde ved at vælge Control+S på Windows eller Command+S på macOS.

Vis i browser

Hvis du vil have forhåndsvist ved hjælp af Visual Studio Code, skal du højreklikke på filen index.html i Stifinder og derefter vælge Åbn i standardbrowser.

Vigtig

Selvom du lige redigerede main.css-filen, skal du vælge den index.html fil for at få vist ændringerne.

Websiden åbnes i standardbrowseren.

Er typografierne, hvad du forventede at se? Det er interessant, hvordan typografier, der anvendes på <body>, nedarves på elementet <h1>. Vi har ikke defineret noget for <h1>, men den skrifttype, der blev defineret på <body>, blev stadig fundet. Denne nedarvningsmekanisme fra overordnede elementer til deres underordnede elementer er et af de vigtigste aspekter af CSS. De <li> elementer har dog en anden skrifttype. Typografien for de <li> elementer tilsidesætter den typografi, der er angivet for <body>, fordi det <li> element er underordnet det <ul> element, som du har defineret en typografi for.

Når du bruger Åbn i standardbrowser i Visual Studio Code, åbnes der hver gang en ny fane i browseren. Hvis du vil undgå at åbne en ny fane, kan du genindlæse den fane, der allerede indeholder dit websted, i stedet for.

Hvis du vil genindlæse fanen, skal du trykke på F5, som er tastaturgenvejen til opdatering, eller trykke på Ctrl+R- på Windows eller Linux og Command+R- på en Mac.

Tilføj et let tema

Tilføj derefter understøttelse af et farvetema for dit websted. Begynd med at definere et lysfarvet tema ved hjælp af hex-farvekoder.

Tilføj følgende kode i slutningen af filen i din CSS-fil (main.css).
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
I dette eksempel angiver #000000 sort for skriftfarven, og #00FF00 angiver grøn for baggrundsfarven.
Opdater index.html-elementet med klassenavnet <body>i HTML-filen (light-theme). Nu anvender klassevælgeren til lyst tema typografierne korrekt.
```
<body class="light-theme">
```

Vis i browser

Hvis du vil have vist et eksempel ved hjælp af Visual Studio Code, skal du højreklikke på index.htmlog derefter vælge Åbn i standardbrowser eller genindlæse den forrige fane ved at trykke på F5.

Bemærk, at det lyse tema med grøn baggrund vises.

Vis anvendt CSS

Åbn Udviklerværktøjer i browservisningen.

Højreklik på siden, og vælg Undersøg, eller vælg genvejen F12 eller Ctrl+Skift+I.
Vælg fanen Elementer, og vælg fanen Typografier på fanen Elementer (den skal allerede være valgt som standard).
Hold over de forskellige HTML-elementer, og når du vælger et par elementer, kan du se, hvordan udviklerværktøjerne viser, hvilke typografier der anvendes på dem under fanen Typografier.
Vælg elementet <body>. Bemærk, at light-theme er anvendt.
Vælg elementet usorteret liste <ul>. Bemærk den brugerdefinerede typografi font-family: helvetica;, som tilsidesætter typografien for det <body> element.

Hvis du vil vide mere om visning af CSS-typografier i Udviklerværktøjer, skal du se artiklen Kom i gang med at få vist og ændre CSS.

Tilføj et mørkt tema

I forbindelse med det mørke tema skal du konfigurere infrastrukturen som forberedelse til det næste undermodul, hvor du aktiverer temaskift på websiden.

Hvis du vil føje understøttelse af et mørkt tema til din CSS, skal du benytte følgende fremgangsmåde.

Føj nogle konstanter til sideroden i starten af filen i din CSS-fil (main.css).
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
Den :root vælger repræsenterer det <html> element på HTML-siden. For denne type opgave er bedste praksis at definere et sæt globale CSS-variabler i en CSS-regel med :root-vælgeren. I dette eksempel har du defineret tre farvevariabler. Nu kan du bruge disse variabler i andre CSS-regler.
I slutningen af CSS-filen skal du erstatte light-theme-reglen med følgende kode for at opdatere den og tilføje dark-theme-vælgeren.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
I den foregående kode har du defineret to nye variabler, bg og fontColor, som angiver en baggrund og skriftfarve. Disse variabler bruger nøgleordet var til at angive deres egenskabsværdier til de variabler, der tidligere er angivet i :root-vælgeren.
Derefter skal du i din CSS-fil erstatte den aktuelle body vælger med følgende kode.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
I dette eksempel skal du bruge body-vælgeren til at angive egenskaberne for background og color, og da de elementer, der er synlige på websiden, alle er inden for det <body> element, arver de de farver, der er angivet på <body>.
Fjern reglerne med #msg og ul selektorer i CSS-filen, så de også arver den samme skrifttype fra <body>.

Husk at gemme filen ved at vælge Control+S eller Command+S.

Din CSS-fil (main.css) bør nu se ud som i dette eksempel:

: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);
}

Hvis du vil have vist det mørke tema, skal du åbne filen index.html og manuelt redigere standardtemaet i klasseattributten <body> til mørkt tema (dark-theme). Gem filen, og genindlæs siden i browseren.
Rediger klasseattributten <body> for at skifte standardtemaet tilbage til lyst tema.

I det næste undermodul bruger du JavaScript til at levere interaktivitet og understøtte skift af temaer.

Brug GitHub Copilot til at tilføje et tema

Du kan bruge GitHub Copilot i din IDE til at generere CSS for at tilføje et nyt tema. Du kan tilpasse prompten for at angive egenskaber for at definere typografierne for HTML-elementer i henhold til dine krav.

I følgende tekst vises en eksempelprompt for 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 er drevet af AI, så overraskelser og fejl er mulige. Du kan få flere oplysninger under Ofte stillede spørgsmål om copilot .

Få mere at vide om GitHub Copilot i Visual Studio Code.

Feedback

Var denne side nyttig?