Forelesning 3: Mer CSS

David Massey
david.massey@jbi.hio.no
Uke 3, 2010

Repetisjon HTML: Elementer og attributter

Byggesteinene i XHTML-dokumenter er elementer
- Alle elementnavn skrives med små bokstaver
- Eksempel: <h1>Overskrift</h1>
  - Dette elementet heter h1
  - Elementets innhold er Overskrift
  - Start-tagg: <h1>
  - Slutt-tagg: </h1>
  - Alle elementer må åpnes med en start-tagg og lukkes med en slutt-tagg
De fleste XHTML-elementer kan ha ett eller flere attributter
- Eksempel: <a href="http://www.hio.no/">Lenke til HiO</a>
  - Attributter er par av navn og verdi
  - Verdien skrives med anførselstegn rundt

Repetisjon CSS: Selektører og deklarasjoner

Et sett av regler for hvordan elementer i XHTML-dokumentet skal «dekoreres»
Generell form: selektør { deklarasjon; ... }
- Deklarasjon: egenskap: verdi
Eksempel: h1 { color: red; }
- Alle h1-elementer vises med rød skrift

CSS-egenskaper vi har lært

Skrift:
- font-family: Skrifttype
- font-size: Skriftstørrelse
- font-weight: Normal eller fet skrift
- font-style: Normal eller kursiv skrift
Farger:
- color: Forgrunns- eller skriftfarge
- background-color: Bakgrunnsfarge

Luft og rammer: Boksmodellen i CSS

Illustrasjon av boksmodellen
i CSS

Både padding, margin og border kan reguleres med CSS

Mer luft mellom skrift og kanter

h1 { padding: 0.4em; }
- Her sier vi at det skal være luft på 0,4 em mellom elementinnholdet og boksen rundt langs alle fire kanter
- For å differensiere kan vi bruke egenskapene for retning i stedet:
  - padding-left
  - padding-top
  - padding-right
  - padding-bottom

Resultat i nettleseren

Eksempel på bruk av
padding-egenskapen

Endring av padding på h1-elementet: CSS-filen

Ramme

h1 { border: black solid thin; }
- Lager en svart heltrukken tynn linje rundt elementets innhold og padding
  - Første verdien er farge
  - Andre verdi er linjetype. Aktuelle verdier er none, dotted, dashed, solid, double, groove, ridge, inset og outset
  - Tredje verdi er tykkelsen på linjen. Følgende verdier er tillatt: thin, medium og thick
- Også her kan rammen differensieres i de ulike retningene:
  - border-left
  - border-top
  - border-right
  - border-bottom

Resultat i nettleseren

Eksempel på bruk av
border-egenskapen

Legg til ramme rundt h1-elementet: CSS-filen

Marger

Vi vil bli kvitt margen mellom overskriften og avsnittet
h1 { margin-bottom: 0; }
- Setter bunnmargen til h1-elementet til 0
Resultat:

Hvorfor ble ikke luften borte?

p-elementet har en toppmarg
Kvitter oss med denne ved å lage en ny regel for p-elementet:
p { margin-top: 0; }
- Setter toppmargen for p-elementet til 0

Resultat i nettleseren

Eksempel på bruk av
margin-egenskapen

Fjerne luft mellom h1- og p-elementet: CSS-filen

Felles regler for flere elementer

Bruk en selektør som lister opp elementene med komma mellom
Eksempel: h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
- Resultat: Alle seks overskriftstyper blir skrevet med hvit tekst på rød bakgrunn

Flere regler for samme element

Flere regler for samme element slås sammen til én
Eksempel: h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
h1 { font-size: 1.4em; }
- Resultat: Hovedoverskrifter (h1 blir vist med hvit skrift på rød bakgrunn (første regel) og med en skriftstørrelse som er 1,4 ganger skriften i body-elementet (andre regel)

Nummererte lister og CSS

Endre nummereringsmåte i nummererte lister: list-style-type
- Settes på ol-elementet
- Eksempel: ol { list-style-type: upper-roman; }
- Aktuelle verdier: decimal, lower-alpha, upper-alpha, lower-roman og upper-roman

Punktlister og CSS

Endre punktlister
- Settes på ul-elementet
- Eksempel: ul { list-style-type: square; }
- Aktuelle verdier: disc, circle og square
- Sette inn bilde i stedet for vanlig markør: list-style-image
- Eksempel: ul { list-style-image: url("../bilder/glis.gif"); }

Endret liste i nettleseren

Punktliste med flere nivåer, endret utseende

CSS-fil for endring av lister

Pause

Understreking

Med CSS kan man understreke et element med egenskapen text-decoration
Eksempel
- h1 { text-decoration: underline; }
- Understreker hovedoverskrifter

Resultat

Endre lenkeutseende

Standardutseende:
- Ikke besøkte: Blå understreket
- Besøkte: Lilla understreket
Kan justeres ved å bruke spesielle psevdoklasser som selektører
- a:link : ikke besøkte lenker
- a:visited : besøkte lenker
- a:hover : lenker når musepekeren er over dem (det engelske ordet hover betyr sveve over) når musepekeren er over den

Lenkeutseende: Eksempel

CSS-regler:

a:link { color: green; text-decoration: underline; }
a:visited { color: olive; text-decoration: none; }
a:hover {color: red; text-decoration: underline; }

Eksempel: Her er en lenke til nett-tidsskriftet A List Apart

Plassering av bilder

Forrige gang lærte vi å sette inn bilder:

<p><img src="../bilder/tim_berners_lee.jpeg" alt="Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW" /> Her er tekst. Her er tekst. Her er tekst. Her er tekst...</p>

Resultat i nettleseren

Vanlig plassering av bilder

Float

For å la bildet «flyte» til venstre for teksten som kommer etterpå, kan vi bruke CSS-egenskapen float.

Eksempel: img { float: left; }

Resultat i nettleseren

Venstreplassering med float

Mer luft til høyre for bildet

Vi kan sette høyremarg for bildet:

img { float: left; margin-right: 0.5em; }

Resultat

Venstreplassering med float og luft

Bilde til høyre?

Dette får vi til ved å la bildet flyte til høyre i stedet (med litt luft til venstre):

img { float: right; margin-left: 0.5em;}

Resultat i nettleseren

Høyreplassering med float

id-attributtet

Vi har sett at id-attributtet kan brukes til å lage bokmerker:
- <p id="ref1">Sitatet er hentet fra Snorre Sturlasons bok "Heimskringla".</p>
Vi kan referere til bokmerket i samme dokument:
- <p>(...) Der satt han godt til for å forsvare landet mot danene og også til å gjøre angrep mot Danmark.<a href="#ref1"><sup>1</sup></a>.</p>
Spesielt for id-attributtet
- Verdien, dvs. navnet på bokmerket, må være unikt i dokumentet
- Det kan brukes på alle XHTML-elementer

id-attributtet som CSS-selektør

id-attributtet kan også brukes som selektør i CSS-regler
- På denne måten kan vi endre utseende på ett spesielt XHTML-element
Selektøren skrives slik: #navn
- ... som ved referering i XHTML
Eksempel:
#ref1 { color: white; background-color: green; }
- Viser XHTML-elementet med id-verdien ref1 som hvit skrift på grønn bakgrunn
- Gjelder uansett hvilket XHTML-element id-attributtet er brukt på

Klasser

Tidligere har vi sett hvordan vi kunne fjerne luft mellom h1-elementet og første avsnitt
- h1 { margin-bottom: 0; }
  p { margin-top: 0; }
Løsningen hadde et problem: Toppmargen ville bli null for alle avsnitt
Hvordan kan vi uttrykke at det bare er visse avsnitt som skal ha toppmarg 0?
- Det er ikke lurt å bruke id-attributtet, for da peker vi bare ut én forekomst
- Løsningen er å bruke klasser

Attributtet class

På samme måte som id, kan alle XHTML-elementer ta attributtet class
Eksempel:
<p class="ingress">Dette er tekst i ingressen, dvs. det innledende avsnittet i kapitlet.<p>
Hvorfor bruke klasser?
- Grupperer tekstblokker i XHTML-dokumenter som har fellestrekk
- Blir «håndtak» i XHTML-dokumentet som vi kan feste stiler på

class-attributtet som CSS-selektør

class-attributtet kan brukes som selektør i CSS-regler
- På denne måten kan vi endre utseende på en gruppe tekstblokker som tilhører samme klasse
Selektøren skrives slik: .klassenavn
Eksempel:
.ingress { margin-top: 0; font-weight: bold; }
- Viser alle avsnitt som tilhører klassen ingress med fet skrift og uten toppmarg

Resultat i nettleseren

Klasse som selektør

Selektører i kontekst

Vi har gått gjennom flere typer selektører:
- Element: h1 { color: red; }
- Liste av elementer: h1, h2, h3 { color: red; }
- id-attributter (bokmerker): #ref1 { color: green; }
- Klasser: .ingress { margin-top: 0; font-weight: bold; }
- Psevdoklasser for lenker: a:link { text-decoration: none; }
Vi kan også velge ut elementer i en spesiell kontekst
- Eksempel: ul li { color: green; }
  - Betyr at listeelementene i punktlister får grønn skrift
  - ... men ikke i nummererte lister!

Pause

Øvelser

Jobb videre med oppgaver fra uke 2
Endre marger på siden vha CSS
Lag en liste og endre utseende vha CSS
Hvordan kan jeg legg inn '<david>' slik at det vises i siden? Tips - entiteter
Husk å validere

2. Kopierer følgende XHTML-side til Textpad eller Notisblokk, og lagrer den på din public_html. Siden innholder en del feil. Rett feilene slik at siden kan valideres uten feilmelding.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <h1>Vevpublisering</h1>
</head>
<body>
    <title>En liten innføring i vevpublisering</title>
    <p><ahref="http://validator.w3.org/">W3C validator<a> kan brukes
    for å sjekke sider.</p>
    <P>Rett denne siden slik at det valideres.</P>
    <p>I faget har vi lært om:</p>
    <ul>
       <li>Elementer</li>
       <li>Attributter</li>
       <li>CSS</li>
       <li>Bilder</li>
    <p>Her er et bilde av <strong>Tim Berners-Lee</p></strong>
    <p>
    <img src="http://www.jbi.hio.no/bibin/KoG1vev/bilder/tim_berners_lee.jpeg">
</body>
</html>

3. Endre siden fra forrige uke:

Endre utseende på lenken
Bruk float for å endre plassering av bildet
Siden skal innholder flere avsnitter. Endre ett av avsnittet ved hjelp av class
Bruk flere av CSS-reglene som finnes i forelesningsnotatene