Links and Buttons

Question 1

Hvordan legger du til understreking i CSS?

Answer 1

text-decoration: underline

Question 2

Hva er prinsipper for link-styling?

Answer 2

• Linkenes utseende bør ikke brukes på noe annet enn linker
• Linkene bør enkelt kunne skilles fra teksten rundt seg.
• Linken bør beskrive hva den går til.

Question 3

hvordan vil title-attributtet oppføre seg på en link?

Answer 3

På de fleste nettlesere, vil den vise teksten når man går med musa over linken

Question 4

hvordan spesifisere type link ved mouseover?

Answer 4

a:hover {

}

Question 5

hvordan endre til musepeker ved mouseover?

Answer 5

a:hover {
cursor:pointer;
}

Question 6

hvilke fire tilstander har en link?

Answer 6

normal, hover (aktiv), klikket og besøkt

:link, :hover, :active, :visited

Question 7

hva er rekkefølgen på pseudo-selektorene for en link?

Answer 7

link, visited, hover, active

Question 8

hvis du har klassen “question-link”, hvordan skal du forme hvordan farge den viser på hva du har besøkt?

Answer 8

.question-link:visited {

}

Question 9

Hva er skeuomorfisme?

Answer 9

Et UI-element som imiterer noe som eksisterer på ordentlig. F.eks. en fysisk knapp.

Question 10

Hvilke CSS-attributter må minst til for å få til skeuomorfisme?

Answer 10

text-shadow: 0 -2px fargekode;
box-shadow: ....
border-radius: 5px;
margin
padding

Question 11

Hva bør skje når man klikker på en skeuomorfisk knapp?

Answer 11

Skyggen (box-shadow) fjernes. margin-top reduseres med 5px.

Question 12

hvordan fungerer box-shadow: 0px 4px; ?

Answer 12

legger til 0px skygge som offset x (til høyre side), og 4px skygge under knappen

Question 13

Hva er affordances?

Answer 13

måter et objekt kan brukes på? En stol kan ofte brukes for å sitte på. Den kan også brukes for å kastes, selv om dette kanskje ikke er tiltenkt. Begge handlinger er “affordances”.

Question 14

Hva er signifiers?

Answer 14

Signalisering om at man har en affordance. F.eks. et håndtak på en kaffekopp kan signalisere at man kan holde den for å drikke av den. Selv om man ikke nødvendigvis holder koppen med håndtaket.

Question 15

Hva er eksempel på signifier i en nettleser?

Answer 15

At man får forskjellig musepekeren når man tar den over en link.

Question 16

Hvordan fungerer CSS-transition?

Answer 16

F.eks. hvis du vil at noe skal gjøres glidende mellom vanlig link og hover, så spesifiserer du f.eks. “transition: margin 1s”

Question 17

Gi et eksempel på CSS-transisjoner

Answer 17

.activity:hover {

background-color: #fff;

color: #5495ff;
transition: color .1s ease-in, background-color .1s ease-in;

}

Question 18

Hva er primær navigasjon?

Answer 18

de viktigste knappene og linkene

Question 19

hva er sekundær navigasjon?

Answer 19

Linkene som handler om hvordan man endte opp på den gitte siden. Et vanlig eksempel på sekundær navigasjon er breadcrumb

Question 20

Hvorfor heter det “breadcrumb”?

Answer 20

På grunn av historien om Hans og Grete hvor de la igjen brødsmuler på veien for å finne veien tilbake igjen

Question 21

hva er fordeler ved å bruke brødsmuler?

Answer 21

fordeler ved breadcrumbs:

• Selv om man går inn på en tilfeldig side, vet man hvor man er
• Brødsmulene sier noe om hvilke kategoriseringer som finnes på siden
• Man kan enkelt hoppe tilbake

Question 22

hvordan er en brødsmule normalt strukturert?

Answer 22

som en li/ul med display-property: inline

Question 23

Hva gjør følgende selektor

.breadcrumb li+li::before {
content: “/”;
}

Answer 23

lager skråstreker for en breadcrumb-klasse!

“before” sier at vi skal legge innhold før et valgt element

“li+li” sier at den velger to li-elementer som er ved siden av hverandre

Question 24

hvordan ser komplett CSS for breadcrumb ut?

Answer 24

.breadcrumb > li {

display: inline;

}

.breadcrumb li+li::before {

padding: 10px;
content: ">";

}

.breadcrumb a {
text-decoration: none;

}

.breadcrumb a:hover {
color: red;

}

Question 25

Hva ble lagt til av funksjonalitet for breadcrumb?

Answer 25

• Hver side fikk samme ul/li-liste hvor ul var klassen breadcrumb
• Sider man var på ble uthevet
• linken til sider man allerede er på, går til href=”#”

Question 26

hvordan ser CSS-selektoren ut når den kombinerer elementer for å lage breadcrumb?

Answer 26

.breadcrumb li+li::before

Question 27

Hvordan lager vi breadcrumb som ser ut som pil med CSS?

Answer 27

/* Lag en tykk grense. Gjør venstre grense gjennomsiktig */

.breadcrumb li a::before, .breadcrumb li a::after {
  content: "";
  position: absolute;
  border-color: darkcyan;
  border-style: solid;
  border-width: 15px 5px;
}

.breadcrumb li a::before {
left: -10px;
border-left-color: transparent;
}

Question 28

Hvilke tre typer brødsmule har man?

Answer 28

lokasjon, attributt og sti (location, border, path)

Det er vanlig å skille disse med styling (forskjellige farger, uthevelse, etc..). Separator mellom sti/lokasjon, men ikke mellom attributt

Question 29

Hva er lokasjonsbaserte brødsmuler?

Answer 29

De sier hvor du befinner deg på siden. f.eks. shopping-mote-sko

Question 30

Hva er attributtbaserte brødsmuler?

Answer 30

De sier noe om attributtene du ser etter. Feks. brune sko.

Question 31

Hvordan ser selektoren som kombinerer li-elementer for brødsmuler ut hvis vi skal gjøre det for klassen “location” ?

Answer 31

.breadcrumb li.location+li.location::before {
color: gray;
content: “/”;
}

Question 32

Hvordan legge til en “x” for å lukke noe etter en tekst som ligger inne i a-elementet for klasssen “attribute”?

Answer 32

.attribute a::after {
  content: " x";
  font-size: 8px;
  vertical-align: super;
}

Question 33

Hva er fallgruver ved å bruke brødsmuler?

Answer 33

Brukere kan bli forvirret hvis det gjøres litt feil. De forventer at de oppfører seg på en helt bestemt måte.

Følg generelt prinsippet om å ikke bruke dem, med mindre siden har en komplisert navigasjonsstruktur

Question 34

hva er forskjellen på path og location based breadcrumb?

Answer 34

location based har “home” helt på starten