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 amedtext-decoration: none;för att ta bort understrykningen. - Lägg in önskade färger på
background-colorochcolor. - 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 ärinline. 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-blockfungerar elementet som ettblock, men det ligger inlagt sominlinei det element där det ingår. Det blir alltså ettblocksom endast fyller en del av en rad istället för en hel rad.
- Med
- Det blir dock inget avstånd, eftersom
- Lägg även in
padding: 6px;ochwidth: 250px;så länkarna blir lika breda. - Lägg till en regel för
nav limeddisplay: 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.
- Ändrar du till
Länkarnas olika tillstånd
- Skapa en regel för
nav a:link, nav a:visitedoch flyttabackground-colorochcolordit. - Skapa en regel för
nav a:hover, nav a:activeoch lägg inbackground-colorochcolormed 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:visitedoch en annan regel förmain a:hover, main a:activeoch inför valfri stil i dem, t.ex. endastcolori den första regeln och bådebackground-colorochcolori 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
.thisPagemed 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:visitedoch 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.
- 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å
Mer om pseudoklasser och pseudoelement
- Du har redan använt pseudoklasserna
:link,:visited,:hoveroch: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-lettermedfont-size: 200%;ochfont-style: italic;
- Lägg till en regel för
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.