HTML-kurs: CSS



Cascading Style Sheet, eller CSS, er et eget programmerings-språk som er et suplement til HTML. Ved hjelp av CSS kan man definere farger, posisjon, størrelse, og mye mer. Poenget er å ha all denne informasjonen samlet et sted – slik at hvis man forandrer den ene filen, vil dette gjelde for de andre filene (Cascading).

Å lagre en egen .css fil

For å lagre en fil som CSS-fil, må den ha fil-etternavnet .css . Den kan dermed refereres til i HTML slik:

<html>
 <head>
  <!-- META-tagger, JavaScript og Title-tagg -->
  <link rel="stylesheet" href="filen.css" type="text/css">
 </head>
 <body>
  <!-- All hoved-kodingen går her -->
 </body>
</html>

media-atributten

En virkelig kul mulighet med link-taggen er at man kan bruke media atributten:

  <link rel="stylesheet" href="filen_skjerm.css" type="text/css" '''media="screen"'''>
  <link rel="stylesheet" href="filen_print.css" type="text/css" '''media="print"'''>

Når du ser dokumentet på vanlig måte på skjermen, er det filen_skjerm.css som blir brukt. Når du skriver det ut, eller bruker utskrifts-forhåndsvisning, er det filen_print.css som blir brukt. På denne måten kan du lage utskriftsvennlige versjoner.

Syntaks

DOM-element {
    stil-element: verdi;
    [...];
}
DOM-element 
Hva CSSen som er mellom { og } skal gjelde for – kan være en HTML-tagg som <p> eller en class, eller en id.
stil-element 
Hva verdien gjelder for. Kan f. eks. være background-color for å angi at verdien skal være bakgrunnsfargen.
verdi 
I eksemplet ovenfor, er verdien bakgrunns-fargen som gjelder for DOM-elementet.

Eksempel

<!-- stil.html -->
<html>
 <head>
  <title>Eksempel på bruk av CSS</title>
  <link rel="stylesheet" href="stilen.css" type="text/css" media="screen">
 </head>

 <body>
  <h1 class="eksempel_klasse">Dette er et eksempel på bruk av CSS</h1>
   <p id="eksempel_id">
    ...og dette er noe tekst.
   </p>
   <hr>
   <div id="eksempel_id">
    ...enda litt mer testing...
   </div>
   <h1>Dette er en normal overskrift</h1>
   <p>
    ...og dette er normal tekst!
   </p>
 </body>
</html>

/* stilen.css */
#eksempel_id {
  background-color: yellow;
  color: red;
}

h1.eksempel_klasse {
  background-color: #000011;
}

h1 {
  color: gold;
}

p {
  color: #000000;
}

Eksemplet ovenfor demonstrerer bruken av CSS på tagger, classes og id’er.

CSS-stilelementer

I HTML kurs del 2 vil det som står nedenfor bli gjennomgått, men her kan du slå opp og se eksempler.

Nedenfor ser du malen som brukes:

[rediger]stil-element

Her står det en beskrivelse av stil-elementet.


Her står det hva den tilhørende verdien kan være.


Her står
det et eksempel
på CSS

som også blir forklart.


  • Og tilslutt
    • kommer det
    • en liste
    • hvor
    • det stilelementet du nettopp leste om er uthevet.

Farger og bakgrunn

[rediger]color

Angir tekstens farge. Det er ganske lurt å angi en farge som er lett leselig – du så i eksemplet (Kode 11.0)at WUHU var nesten uleselig.


Vanlige farge-koder – se her for detaljert skjema.


p {
color: yellow;
background-color: black;
}

vil gjøre om alle taggene P til noe kanarifansen vil juble over.


  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

background-color

Angir bakgrunnsfargen. Ønsker du å bestemme bakgrunnsfargen for hele dokumentet, setter du denne under body. Du kan også angi bakgrunnsfargen for hver tagg.


Vanlige farge-koder – se her for detaljert skjema.


body {
background-color: #00FF00;
}

setter bakgrunnsfargen til grønn.


  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

background-image

Med denne kan du angi et bakgrunnsbilde.


Verdien er url(«URL»). Se eksemplet.


body {
background-image: url("bilde.jpg");
}

vil sette bilde.jpg som bakgrunnsbilde.


  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

background-repeat

Denne bestemmer om bildet som er angitt i background-image skal gjentas hele veien.


  • repeat-x Bildet gjentas vannrett.
  • repeat-y Bildet gjentas loddrett.
  • repeat Bildet gjentas både loddrett og vannrett.
  • no-repeat Bildet gjentas ikke.

body {
background-image: url("bilde.jpg");
background-repeat: repeat-y;
}

vil gjenta bildet loddrett.


  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

background-attachment

Bestemmer om bakgrunnsbildet blir med når du scroller eller ikke.


  • scroll Bildet vil bli med når du scroller.
  • fixed Bildet står stille mens resten scrolles.

body {
background-image: url("bilde.jpg");
background-position: center center;
background-scroll: fixed;
}

vil sentrere bildet bilde.jpg, og bildet blir hvor det er – selv om du skulle scrolle.


  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

background-position

Bestemmer hvor bakgrunnsbildet skal plasseres.


Nøkkel:

background-position: lengde fra topp lengde fra venstre kant
  • cm, mm, em, px (pixler) – faste måle-enheter.
  • % – relative måleenheter. Når du angir prosent, regnes det som antall prosent av brukerens skjerm. Derfor er dette den mest brukervennlige enheten.
  • Ord: top, bottom, center, left og right.

body {
background-position: 80% center;
background-image: url("bilde.jpg");
}

vil plassere bildet bilde.jpg i midten, 80% til høyre.


  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

background [sammenskrivning]

En sammenskrivning er en blanding av en gruppe stil-elementer.


Nøkkel:

background: verdiene;

Følgende kode:

body {
background-position: 50% 50%;
background-repeat: repeat;
background-color: #000000;
background-image: url("bilde.jpg");
}

…kunne med fordel sammenskrives, med samme resultat, til:

body {
background: 50% 50% repeat #000000 url("bilde.jpg");
}

  • color
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

Font (skrift)

Med font-funksjonene kan du endre skrift-typen og størelsen m. mere.

Advarsel

Her har vi blandet sammen font og text. Definasjonen:

  • text funksjonene beskriver hvordan selve teksten er (innrykning, osv.)
  • font funksjonene beskriver skrift-typen.

Fordi disse to egentlig er to forsjellige grupper, er det også to forskjellige sammenskrivninger.


text-indent

På norsk betyr dette tekst-innrykkning.


Nøkkel:

text-indent: verdi;

Du kan bruke de vanlige «måle-«enhentene (XX%, XXpx, XXmm, osv…).


Følgende kode:

p {
text-indent: 10%;
}

vil flytte teksten 10% inn til høyre.


Tips: Her på wikien kan du bruke : på starten av en linje.

Eksempel

  • text
    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size

text-align

Med text-align kan man bestemme hvor teksten skal være.


Nøkkel:

text-align: verdi;

Som verdi kan man bruke left (venstre), center (i midten) og right (til høyre). Man har også mulighet til å bruke justify, som lager like marginer til venstre og høyre.


Følgende kode:

p {
text-align: right;
}

vil justere teksten til høyre.


  • text
    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size

text-decoration

Med text-decoration kan du sette linjer under, over og gjennom teksten.


Nøkkel:

text-decoration: verdi;

Man kan bruke overline, underline og line-through.


Følgende kode:

p {
text-decoration: line-through;
}

vil gjøre all teksten gjennomstreket.


  • text
    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size

text-transform

Med text-transform kan du f. eks. få alle ord i UPPERCASE. Dette helt uavhengig av hva som er skrevet i HTML.


Nøkkel:

text-transform: verdi;

Man kan bruke

  • capitalize: Første Bokstaver Blir Store.
  • lowercase: alle bokstaver blir små.
  • uppercase: ALLE BOKSTAVER BLIR STORE.
  • none: Teksten blir hva den er.

Følgende kode:

p {
text-transform: capitalize;
}

Vil Gjøre Alle Første Bokstaver Som Store – Passe Når Det Er Navn Som Vises.


  • text
    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size

letter-spacing

Med letter-spacing kan du angi avstanden mellom hver bokstav. Dette bestemmer ikke størrelsen på bokstavene, bare avstanden mellom dem.


Nøkkel:

letter-spacing: lengde-mål;

Lengemål kan være px, %, em osv…


Følgende kode:

p {
letter-spacing: 2px;
}

vil la det være en avstand på 2 piksler mellom bokstavene.


  • text
    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size

Det er ingen sammenskrivning for text-elementene.

font-family

Med font-family kan du bestemme hvilken skrift-type som skal brukes. Times New Roman er en skrifttype, Verdana er en annen, Arial er en annen.

Du lister opp skriftene i en komma-separert, prioritert rekkefølge. Hvis maskinen ikke har den første skriften, bruker den den neste.

Litt mer om skrifttyper

Det er ikke bare skrifttyper du kan skrive inn. Du kan også skrive inn skrifttype-familier. Skrift-familier kan best betegnes som en gruppe skrifttyper som ligner hverandre.

serif er skrifter som har «føtter» på endene. Denne egner seg best på utskrifter. Eksempler på skrifttyper (fonter) i denne gruppen er

  • Times New Roman
  • Garamond
  • Georgia

sans-serif er skrifter som ikke har føtter på endene. Disse egner seg best på skjerm. Eksempler på skrifttyper i denne gruppen er

  • Trebuchet
  • Arial
  • Verdana

monospace er spesiell fordi hver bokstav tar like mye plass. Denne egner seg derfor til å vise programkoder. Foreksempel tar i og æ like stor plass:
ææææææææ
iiiiiiii
Eksempler på skrifttyper i denne gruppen er

  • Courier
  • Courier New
  • Andele Mono

Nøkkel:

font-family: Skrifttyper, "separert med komma", "Hvis skriftnavnet har mellomrom må du ha den i hermetegn";

Skrift-navnene er de du finner i skriveprogram som OpenOffice.org. Du burde ha en vanlig skrift-type (som Arial) bakerst i lista, slik at ikke teksten vises som firkanter for de som ikke har skrifttypene installert.

Den fonten du helst vil at skal vises plasserer du først.


Følgende kode:

p {
 font-family: Verdana, "Times New Roman", Arial;
}

vil sette skrifttypen som Verdana. (Hvis Verdana ikke finnes, vil neste på lista brukes. Hvis ikke den kan brukes, vil Arial brukes. Den finnes på de fleste maskiner.)


  • text
    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size

Kommentarer

kommentarer

Forfatter: Tobinus

Del denne artikkelen på
468 ad
Start chat
1
Close chat
Hei! Takk for at du besøker oss! Trykk på knappen under for å starte en chat.

Start chat