Webbteknik 1

Laboration 3D

Selektorer och stil för länkar

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.

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.

  • 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

Klar

Detta var den sista delen av laboration 3. Titta nu på veckans exempel.