Webbteknik 1 - Laboration L3d

I den sista delen av denna laboration tittar vi närmare på stil för länkar. Vi kommer också in på användning av några pseudoklasser och pseudoelement i selektorerna.

5 min.

Förberedelser

Öppna mappen L3 i Visual Studio Code (VSC).
Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server
- Du ska arbeta vidare med den CSS-fil som du använde i föregående laboration.

Navigeringslänkarna

Skapa en regel för nav a med text-decoration: none; för att ta bort understrykningen.
Lägg in önskade färger på background-color och color.
Lägg också in margin-bottom: 10px; för att få ett litet avstånd mellan länkarna.
- Det blir dock inget avstånd, eftersom a-element normalt är inline. Då har inte margin och en del andra storleksförändringar någon effekt.
- Lägg till display: inline-block; så bör marginalen nu visas.
  - Med inline-block fungerar elementet som ett block, men det ligger inlagt som inline i det element där det ingår. Det blir alltså ett block som endast fyller en del av en rad istället för en hel rad.
Lägg även in padding: 6px; och width: 250px; så länkarna blir lika breda.
Lägg till en regel för nav li med display: inline; så hamnar länkarna intill varandra.
- Ändrar du till display: block; hamnar länkarna under varandra igen. Använd sedan block eller inline, beroende på vilket du föredrar. Det spelar ingen roll för de fortsatta övningarna.

Länkarnas olika tillstånd

Skapa en regel för nav a:link, nav a:visited och flytta background-color och color dit.
Skapa en regel för nav a:hover, nav a:active och lägg in background-color och color med andra färger.
Testa att föra muspekaren över länkarna i webbläsaren.

Länkar i main

Skapa en regel för main a:link, main a:visited och en annan regel för main a:hover, main a:active och inför valfri stil i dem, t.ex. endast color i den första regeln och både background-color och color i den andra.

Markering av länk samt prioriterad stil

I HTML-koden finns attributet class="thisPage" i en av navigeringslänkarna i varje HTML-fil.
- Detta ska användas för att markera länken för den sida man befinner sig på.
I CSS-koden skapar du en regel för .thisPage med en annan bakgrundsfärg.
- Denna färg ska gälla för länken på den sida som man befinner sig på, men den visas inte nu. Det beror på att du redan har en bakgrundsfärg på nav a:link, nav a:visited och den har företräde före det som väljs i en regel för endast en class, eftersom den specificerar elementet mer.
- Ändra selektorn till nav a.thisPage, så specificeras den regeln mer och färgen kommer visas för länken med denna class.
  - Eventuellt får du sedan justera till önskad färg, då du nu kan se den på sidan.

Mer om pseudoklasser och pseudoelement

Du har redan använt pseudoklasserna :link, :visited, :hover och :active.
Nu ska du använda ett pseudoelement, för att ändra stil på första bokstaven i h2-rubrikerna.
- Lägg till en regel för main h2::first-letter med font-size: 200%; och font-style: italic;

Validera

Validera style.css med validatorn på https://jigsaw.w3.org/css-validator/#validate_by_upload och rätta eventuella fel.

Klar

Detta var den sista delen av laboration L3. Titta nu på exemplet på sidan "Exempel" i navigeringen högst upp på sidan. Gå sedan vidare med att avsluta uppgift U1.