Lær å lage hjemmeside – Leksjon 4

Litt videre CSS

Siden forrige leksjon var så tørr og kjedelig, tenkte jeg at vi skulle ta for oss litt morsommere ting denne uka. Vi skal se på litt forskjellig bruk av farger, størrelser, bilder, og hvordan disse kan endre seg når man for eksempel holder musepekeren over et objekt. 

Vi begynner med å sette opp litt forskjellige knapper vi skal style. Følg instruksjonene fra forrige leksjon (her) om å lage ny mappe med nye filer (index.html og style.css). Pass på å opprette en ny mappe til dette prosjektet! Kall for eksempel mappen “styletesting” hvis du ikke kommer på noe eget navn. Kopier og lim inn denne teksten i et nytt HTML-ark:

<!DOCTYPE html>
<html>
<head>
    <title>Stiltesting</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600,300' rel='stylesheet' type='text/css'>
</head>
<body>
    <a class="button button1" href="#">Knapp 1</a>
    <a class="button button2" href="#">Knapp 2</a>
    <a class="button button3" href="#">Knapp 3</a>
    <a class="button button4" href="#">Knapp 4</a>
</body>
</html>

Her ser vi eksempel på bruk av class-attributten. Den brukes for å sette en klasse på en tag. Klassen gjør av vi kan style denne tagen spesifikt. Man kan ha mange klasser ved å bare legge navnene etter hverandre med mellomrom slik jeg har gjort. Her kan man se at alle a-tagene har klassen “button”. I tillegg har hver enkelt tag en til klasse som er unik for hver enkelt knapp (“button1”, “button2” osv). I tillegg har a-tagen en attributt som er href. Det er her lenken til knappen skal ligge. Nå er det bare en hashtag. Det gjør at når man trykker på den, så skjer det ikke noe veldig spennende, annet enn at url’en legger på en # bakerst, og det gir ingen utslag. 

Lagre dokumentet og åpne siden i nettleseren. Nå skal resultatet se slik ut: 

 

Altså er de ikke veldig spennende enda. 

 

Margins, paddings og border

Noen veldig grunnleggende stylinger er padding og margins. Disse brukes hele tiden, men likevel er det mange som blander dem, selv etter å ha kodet med CSS i mange år. Begge brukes nemlig til å legge til luft på hver sin måte.

Opprett et style.css-ark, eller åpne det du har om du alt har opprettet det. Legg så til denne koden øverst: 

.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
}

Legg merke til at jeg nå ikke lenger styler a-tagen i seg selv. Jeg styler klassen jeg har satt på a-tagen. Dette gjør jeg ved å sette et punktum og skrive klassenavnet etter. 

Ellers er egentlig dette veldig greit: 

  • Padding lager luft fra skriften og ut til rammen rundt elementet. Dette gjør den selv om du ikke har noen ramme, for det er alltid en “usynlig” ramme rundt alle elementer. Du kan også si at paddingen er lufta på innsiden av en boks eller en knapp.
    Her er paddingen satt til 10px opp og ned, og 20 px til høyre og venstre. Du kan sette padding til alle retninger. Skriver du “padding: 10px” vil det bli 10px luft til alle kanter. Skriver du “padding: 1px 2px 3px 4px” vil det bli 1px opp, 2px til høyre, 3px ned og 4 px sil høyre.
  • Border er rammen rundt elementet, i dette tilfelle knappen. Den settes med tykkelse først (her 1px), utseende (her solid) og farge (her black). 
  • Margin er luften som går utenfor elementet. Altså luft til andre elementer rundt objektet. Den kan settes på samme måte som padding. Her har jeg valgt at det skal være 20px avstand til alle kanter rundt elementet. 

Her har jeg prøvd å illustrere:

Legg deretter til disse linjene: 

.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
    display: inline-block;
    text-decoration: none;
    color: black;

    font-family: Raleway,sans-serif;

}

Forklaring på stylingene: 

  • Vanligvis ligger a-tager på en linje i teksten, altså det er tekst som følger teksten “inline”. Du kan se for deg når du lager en link i ditt eget blogginnlegg, en mail eller i word. Dette gjør at vi ikke kan sette margin på denne uten at det blir rart og ser feil ut, fordi den skal oppføre seg som et vanlig tekst-element. 
    Vi kunne her ha satt “display: block”. Når noe er satt som block (slik som h1, h2 og h3 er) vil den ta hele bredden av siden med mindre noe annet er spesifisert, og altså være som en boks. 
    Her gjør vi en mellomting. Vi setter “display: inline-block”. Det betyr at vi ønsker at elementene skal være satt inline, men som blokker. Da legger de seg på rekke med teksten, men man kan fortsatt legge på stylinger som margin på dem. 
  • “Text-decoration: none” fjerner understreken som naturlig kommer under en a-tag. 
  • “color: black” setter tekstfargen til svart. 
  • “font-family: Raleway,sans-serif” setter skrifttypen til Raleway. 

 

Forskjellige knapper

Nå har vi fått på plass de generelle stilene. Dette har nå gitt alle a-tager som opprettes med klassen “button” dette utseende: 

Altså bitte litt mer spennende enn før. Men fortsatt litt kjedelig! Vi styler den første knappen. Lim inn denne teksten i CSS-arket: 

.button1
{
    background-color: #6c757d;
    border: 1px solid #5a6268;
    color: #ffffff;
    border-radius: 2px;
}

Noe som er nytt her er at fargene er skrevet i hex. Det vil si at de er en tallkombinasjon med # foran seg. Googler man “Colorpicker” får man opp en pen fargevelger. Velg da en farge, kopier tallet som står etter # og lim inn der du vil bruke en farge. 

En annen ny ting jeg har lagt til er “border-radius: 2px”. Dette gjør at hjørnene på kantene blir avrundet med 2 piksler. 

Nå stylet vi én spesifikk knapp. Dette gjorde vi ved å bruke knapp 1 sin andre klasse, altså ordet som var skrevet etter “button”. 

Vi kan style resten slik: 

.button2
{
    background-color: lightpink;
    border: 4px solid lightpink;
    border-radius: 20px;
}

.button3
{
    border: 2px solid #e88f8f;
    color: #e88f8f;
}

.button4
{
    background-color: #f8f8f8;
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #444
}

 

Her har jeg brukt forskjellig styling på alle knappene, med bare noen få linjer kode. Les nøye gjennom all koden for å forstå hva den gjør. Dette blir resultatet: 

 

Hover

Nå skal vi gjøre noe som er gøy! Vi skal bestemme hva som skal skje når vi holder musepekeren over knappene. Vi skal bruke noe som heter et psuedo-element. Enkelt og greit “hover”. 

Først legger vi på en linje kode i .button-stylingen: 

.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
    display: inline-block;
    text-decoration: none;
    color: black;
    font-family: Raleway,sans-serif;
    transition: 0.5s;
}

 

Transition gjør at hover-effekten vil bruke 0,5 sekund. Dette skaper en kul effekt. 

Hover brukes ved å sette “:hover” etter klassenavnet på elementet man skal style. Kopier og lim inn denne teksten nederst i CSS-arket nå: 

 

.button1:hover
{
    background-color: #5a6268;
    box-shadow: 0px 0px 5px #5a6268;
}

.button2:hover
{
    border-color: #ffd5db;
    box-shadow: 0px 0px 8px lightpink;
}

.button3:hover
{
    background-color: #e88f8f;
    color: #ffffff;
}

.button4:hover
{
    background-color: #eee;
}

 

De nye stylingene her er border-color og box-shadow. Border-color er bare fargen på borderen. Man må altså ikke deklarere alt med borderen ved å ha “border: tykkelse, type, farge”. Man gå rett til “border-color”, slik som her. 
Box-shadow lager skygge på boksen. Den settes med “box-shadow: pixler til høyre, pixler ned, hvor langt ut den skal gå, farge”. Ønsker du at skyggen skal gå oppover, må du bruke negative pixler der du legger inn pixler ned. 

Lagre nå og se hvor forskjellige hover-effektene er!

 

Bilder

Som siste del av leksjonen må jeg vise hvordan man legger inn et bilde på hjemmesiden.

Da bruker du en html-tag som heter <img>. For at denne skal bli et bilde, må du legge inn en “src”-attributt. Du kan legge inn bilder som ligger i samme mappestruktur (altså lokalt på din datamaskin) eller fra internett. Det gjør du slik: 

1. Høyretrykk på bildet du ønsker og velg “Kopier bildeadresse”:

2: Lim inn bildeadressen som src:

 

img-tagen er rar på den måten at den ikke trengs å lukkes, slik de andre tagene må. 

For å endre størrelse på bildet, kan du legge inn dette i CSS’en:

img
{
    width: 500px;
    display: block;
}

 

Når jeg justerte på bredden, fulgte høyden etter, slik at bildet ble riktig skalert. I tillegg la jeg inn en “display: block” for å få bildet til å ligge på en egen linje. Nå er det “holdt av” plass til bildet på hele bredden av nettsiden. 

 

Det var litt mer CSS og litt nye tags. Håper du følger med neste uke og, da tenkte jeg å gå gjennom litt farger og skrifttyper!

Hvis du vil se all min kode for å sammenligen og se hvordan resultatet med hovereffekter ble, kan du trykke her

 

Alle leksjoner: 

 

#programming #html #css #webutvikling #web #leksjon “opplæring #webpublisering #hjemmeside #koding 

4 thoughts on “Lær å lage hjemmeside – Leksjon 4

  1. Er SÅ imponert over hva du kan, Elise👍og ikke minst gleden og iveren over kunnskapen din!

  2. Wow, så mye du kan om koding! Tror jeg må sjekke ut de andre innleggene dine, har tenkt til å mekke nytt bloggdesign snart, hehe 😀

  3. Lisabeth: Gjør det 😀 Det er jo jobben min, så skulle bare mangle at jeg kunne litt! Skal gå grundigere til verks senere og, for dette kommer til å bli et laangt kurs, haha!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top