Fagstoff

CSS-velgere

I CSS lager vi regler for utseende som gjelder fonter, farger, oppsett og stiler brukt på nettsider. Hver CSS-regel identifiseres med en CSS-velger, som vi referer til i HTML-koden når vi ønsker å bruke en spesifikk regel.

Bærbar datamaskin, notisblokk og penn ligger på et bord. På skjermen kan man skimte CSS-kode. Foto.

Et eksempel på en CSS-velger kan du se på den første linja i koden under.

css

1h1{
2  font-family: Arial, sans-serif;
3  color: red;
4}

Denne kodesnutten kalles en CSS-regel, og det som står til venstre for tegnet {, er CSS-velgeren, altså i dette tilfellet h1. CSS-velgeren angir hvilke elementer på nettsiden denne CSS-regelen skal virke på. I dette eksempelet vil alle overskrifter merket med taggen <h1> få skrifttypen Arial og rød skriftfarge.

CSS-velgere

Det finnes tre hovedtyper CSS-velgere: type, class og id. Eksempelet over er en typevelger. Typevelgere velger elementer basert på HTML-taggen. Under ser du eksempler på CSS-regler med typevelgere.

css

1body{
2  font-family: Arial, Helvetica, sans-serif;
3  background-color: black;
4}
5
6header{
7  background-color: black;
8  color: white;
9  font-family: Arial black;
10  font-size: 40px;
11  text-align: center;
12  height: 90vh;
13}
14
15main{
16  width: 75%;
17  margin: auto;
18  background-color: white;
19}

body, header og main angir CSS-regler for elementer i HTML-dokumentet med taggene <body>, <header> og <main>.

Typevelgere, id-velgere og class-velgere gir større variasjon

Nettsidedesign på en datamaskin i vinklet perspektiv. Ulike gjenstander rundt datamaskinen, blant annet et fotoapparat, ei klokke, en snakkeboble, ei lyspære, en blyant. Grafisk illustrasjon.

Om vi bare skulle bruke typevelgere, ville det begrense veldig hva vi kunne gjøre med utseendet på nettsiden, for alle elementer av samme type vil bli helt like. Men av og til vil vi at elementer av samme type skal se forskjellige ut og plasseres ulikt på nettsiden. Da trenger vi å kunne skille ut enkelte elementer på andre måter enn bare ved navnet på HTML-taggen. Det kan vi gjøre med class- og id-velgere.

Class og id er attributter til HTML-tagger og angis derfor inne i en HTML-tag, for eksempel slik:

<p id=”ingress”> eller <img class=”miniatyrbilde” src=”bilde.jpg”>

Class og id

Forskjellen på class og id er at samme class kan brukes på flere elementer på samme nettside, men en id kan bare brukes en gang. Id brukes derfor på elementer som bare skal opptre en gang på nettsiden, som for eksempel hovedmeny, banner eller bunntekst, mens class brukes på elementer som gjentas, som bilder, knapper, lenker eller lister.

Class-velgere angis i CSS med et punktum foran navnet på klassen, slik:

css

1.miniatyrbilde{
2  width: 50px;
3  height: 50px;
4}

Id-velgere angis i CSS med firkant-tegn foran navnet på klassen, slik:

css

1#ingress{
2  font-size: 20px;
3  font-style: italic;
4}
5

Interne lenker med id

Et annet bruksområde for id-attributtet er interne lenker i et dokument. Med interne lenker kan du lenke til spesifikke deler på nettsiden. Dette brukes mye i moderne web-design, der det er vanlig at hele nettstedet er spredt utover ett langt HTML-dokument. Interne lenker bruker id-en til et element til å få nettleseren til å automatisk skrolle til det elementet. Dette kan sammenlignes med innholdsfortegnelsen i et Word- eller PDF-dokument.

Eksempel

<a href=”#about”>Om oss</a>

Denne lenken vil gjøre at nettleseren automatisk skroller til elementet med id=”about”, for eksempel <div id=”about”>.

<div>-elementet

<div> er et element som brukes mye i forbindelse med id- og klassevelgere. <div>-taggen gjør i utgangspunktet ingenting med innholdet, men brukes for å gruppere innhold eller til å hekte class eller id på innholdet, slik at man enkelt kan legge CSS-kode eller annen kode til elementet. Du kan legge et hvilket som helst innhold i et <div>-element. På grunn av dette er <div> en av de mest brukte HTML-taggene, og den brukes ofte i stedet for andre tagger som er mer spesifikke, som for eksempel <ul>, <p> eller <table>.

Eksempel

HTML

1<div class=”miniatyrbilde”>
2  <img src=”bilde.png”>
3  <div class=”bildetekst”>Et bilde</div>
4</div>

I eksempelet brukes den første <div>-en til å gruppere et bilde og en bildetekst, og den andre <div>-en brukes til å formatere bildeteksten med class-velger i CSS.

<span>

En annen tag som ligner på <div>, er <span>. Forskjellen er at <span> er såkalt inline, som betyr at den kan brukes til å markere enkeltord eller deler av ei linje uten at tekstflyten blir påvirket. <div> vil automatisk lage linjeskift før og etter elementet.

Introduksjon til HTML og CSS

CSS-velgere

Typevelgere, id-velgere og class-velgere gir større variasjon

Class og id

Interne lenker med id

Eksempel

Eksempel

<span>