Html kurs igm

Forbered deg på fremtiden

  HTML 4 har flere tagger som er misslikt, det
vil si, de er i ferd med å forsvinne.
•  <FONT>, <BASEFONT>, <U>, <STRIKE>, <S>, <I>
og <CENTER>.
  Det er også stor mulighet for at <HTML>
gradvis vil bli helt erstattet med XML
(Extesible Markup Language).
  XML vil ikke i seg selv støtte
•  <I> og <CENTER>
  XML vil bli styrt av stilsett. Om ikke det vi
har i dag så et som ligner mye.

Hentet fra boken
Cascading Style Sheets
av Eric A Meyer

©IGM, Stig Aasen.

Linke ekterne CSS-dokumenter

  Dukan lenke eksterne stilsett med denne koden
innenfor head-taggen
•  <link href="css/basic.css" rel="stylesheet" type="text/css" />
  Ved bruk av av flere eksterne stilsett er det siste
stilsettet i koden som er det dominerende (det med
høyeste linjenummer i html)
  Lokalt stilsett overstyrere eksterne stilsett

©IGM, Stig Aasen.

@import direktiv

  Denne brukes innenfor STYLE tagg
•  <style type="text/css" media="screen">
@import url(nystil.css);
</style>
  Denne må ligge øverst i STYLE taggen om den
skal virke
  Du kan importere flere stilsett i samme dokument
  Kun Explorer 4.x/5.x og Opera 3.x støtter @import.
Navigator 4.x ignorerer denne metoden å legge inn
stiler i dokumentet
•  Derfor brukes denne ved enkelte anledninger til å korrigere for
feil i nettlesere.

©IGM, Stig Aasen.

Selector and Structure

  En stil har to deler
•  Selector (valget)
•  Declaration (egenskaper)
  Selector består av element, class eller id
  Declaration inneholder
•  Properties og value (egenskap og verdi)
•  Etter properties kommer alltid (:)
•  En declaration avsluttes med (;)
•  Det kan ligge en eller flere decorations mellom {}

©IGM, Stig Aasen.

Kommentarer

 CSS tillater kommentarer
/*Dette er min stil. Yes*/
 Du kan legge inn en kommentar etter hver
stil
h1 {color: grey;} /* denne kommentaren er over flere linjer, */
h2 {color: silver;} /* men så lenge den ligger ved siden av */
p {color: #FFF;} /* den aktuelle stilen, må hver linje */
em {color: blue;} /* brekkes om med kommentarsymboler */

 Du kan ikke gjøre det slik som dette
h1 {color: grey;} /* denne kommentaren er over flere linjer,
h2 {color: silver;} men så lenge den ikke har kommentar-
p {color: #FFF;} symboler for hver stil, vil de tre siste
em {color: blue;} stilene være en del av i kommetaren */

©IGM, Stig Aasen.

Inline Styles

<p style=”color: red;”>Denne er teksten blir rød med....</p>

  Disse inline-stilene er nye for HTML og er
fine på steder du bare skal ha inn noen få
stiler
  Vet konflikt er inline-stil nærmest og den
overstyrer

©IGM, Stig Aasen.

Enkel Selector

  body { color: black; }

h1 { color: purple; }

h3 { color: gray; }

strong { color: red; }

em { color: maroon; }

©IGM, Stig Aasen.

Gruppere Selectors

 Skal du ha lik informasjon i flere Selectors
h1 { color: gray; }

h2 { color: gray; }

h3 { color: gray; }

h4 { color: gray; }

h5 { color: gray; }

h6 { color: gray; }
 Da kan du gruppere
h1, h2, h3, h4, h5, h6 {color: gray; }

©IGM, Stig Aasen.

Eksempel på gruppe

h1, h2, h4 { color: blue; }

h3 { color: white; }

h2, h3 { background-color: red; }

©IGM, Stig Aasen.

Gruppere Declaration

 Du kan sette opp en header slik
h1 { font-size: 2em verdana; }

h1 { color: purple; }

h1 { background-color: aqua; }
 Det blir enklere slik
h1 { font-size: 2em; font-family: Verdana, sans-serif; color: purple; background-
color: aqua; }

 Det er viktig skille hver Declaration med
semikolon (;) fordi mellomrom mellom
declarations ikke leses i stilsettet

©IGM, Stig Aasen.

Gruppere Selectors og Declaration

h1, h2, h3, h4 { color: gray; background-color: white; text-align: center; padding:
0.2em; border-top: 1px solid black; border-bottom: 1px solid black; }

©IGM, Stig Aasen.

Class og ID Selectors

 Det finnes to andre selectors utenom
vanlige elements (tagger).
 Class og ID
•  Gir mulighet til å legge til stiler på en måte som er
uavhengig av element (tagg)
•  For legger du inn
a { color: maroon; }
•  Vet du det gjelder alle a tagger som ligger på siden

©IGM, Stig Aasen.

Class Selectors

  Attributtet
til HTML-taggen skrives
class=”classnavn”
  I CSS-reglen skrives Class Selector med .class
  Mest brukte måten å legge til CSS-regler uten å
bekymre seg om hvilke tagger som er involvert. Her
ser du HTML-koden
<p class="advarsel">Advarsel til deg som lager nettsider.</
p>
<p>Sidene kan vises ulikt på ulike nettlesere. <span
class="advarsel">Det er stor mulighet for feil</span> om du
ikke sjekker ofte mot de ulike nettleserne.</p>
  Legge CSS-regel til en Class
.advarsel { color: red; font-weight: bold; }

©IGM, Stig Aasen.

Resultat

.advarsel { color: red; font-weight: bold; }

<p class="advarsel">Advarsel til deg som lager
nettsider.</p>
<p>Sidene kan vises ulikt i ulike nettlesere. <span
class="advarsel">Det er stor mulighet for feil</span>
om du ikke sjekker ofte mot de ulike nettleserne.</p>

©IGM, Stig Aasen.

Taggen <span>

  Om du ønsker deler av teksten skal ha en CSS-regel kan du legge
<span> </span> rundt ønsket tekst. SPAN fungerer kun som bærer
av et attributt.
  <p>Denne teksten er styrt av CSS-regel satt i BODY. Men <span
class="kursivBold">kursive skal være bold</span> i dette avsnittet.</
p>

  CSS-reglen er slik:
body {color:blue}
.kursivBold {
font-style: italic;
font-weight: bold;
color:red
}

©IGM, Stig Aasen.

ID Selector

 Erpå mange måter lik Class, men det er
noen vesentlige forskjeller.
 Selector som merkes med # (hash) og i
HTML-tagg-attributtet med id=”id-navn”
 Du ikke skal bruke et ID-navn mer enn en
gang pr. HTML-side.
•  Flere nettelesere vil ikke analysere bruk av samme ID-
navn flere ganger som feil. De vil derfor vise dem rett,
men det er likevel ikke riktig bruk av ID.

©IGM, Stig Aasen.

Hvor brukes ID

  ID brukes ofte i bokser for definere innholdets egenart

www.fagerhoy-kulturverksted.no ©IGM, Stig Aasen.

Bruk av ID

  I dette eksemplet er ID lagt til en div-tagg

•  #meny { color: white; background-color: gray; width: 100px;
height: 200px; }

•  <div id="meny">
<strong>Denne blokken har ID (meny)<strong>
<p><a href=”side1.html">Side 1</a></p>
<p><a href=" side2.html" ">Side 2</a></p>
<p><a href=" side3.html" ">Side 3</a></p>
</div>

©IGM, Stig Aasen.

ID kan også legges til

 Tagg (element) som <p>, <em>, <h1>-6,
<strong> osv.
 Om sider lages med tabell hender det ofte
at det legges inn <div>-tagger i cellene.
 Husk! Trenger du gjentagelse av en
Selector på siden må det være Class

©IGM, Stig Aasen.

Bokser mot base
ID er lagt til div-tagger. ID- og Class-Selectors fungerer
også som variabler mot en base

©IGM, Stig Aasen.

Pseudo-Classes og Pseudo-Element

 Psuedobetyr bløff og gir deg mulighet til å
legge CSS-regel HTML-stukturen og som
kan oppstå under bestemte forhold.
 

©IGM, Stig Aasen.

Pseudo på lenker

  Pseudo kan trigger alle A-tagger uten at du trenger
å legge inn class i hver enkelt en.
  Om du setter inn pseudo i en CSS-regel slik:
a:visited { color: red; }
•  Legg merke til « : » som er nøkkelen til pseudo
•  HTML koden nå er:
<a href="http://www.igm.no" >En besøkt lenke</a>
<a href="http://www.vg.no" >Ikke besøkt lenke</a>

©IGM, Stig Aasen.

Link pseudo classes

  Herer de to grunnleggende som viser en lenke og
en besøkt lenke. Disse to brukes på lenker.
:link
:visited

F.eks
a:visited {color: silver; text-decoration: line-through; }

  :link referer til alle ubesøkte lenker,
  :visited referer til alle lenker som allerede er besøkt

©IGM, Stig Aasen.

Dynamic pseudo classes

  Herfinner du tre pseudo-classes som ofte kan
brukes på andre elementer i tillegg til lenker.
:focus
:hover
:active
  :focus kan brukes til bl.a skjema for vise det aktive
feltet.
  :hover referer til det øyeblikket markøren beveger
seg over lenken. Ofte brukt til rollover-knapper
  :active refererer det øyeblikket lenken aktiveres

©IGM, Stig Aasen.

Pseudo eksempler

  Eksempel på :hover
a:hover { color: red; }
  Eksempel på :fokus
input:focus { background-color: silver; }

©IGM, Stig Aasen.

Bokser med selector-ID

<div id="container">
<div id="sidebar">
<p><a href="#">Hovedside</a></p>
<p><a href="#">Side 2</a></p>
<p><a href="#">Side 3</a></p>
</div>
<div id="mainContent">
Whether...
</div>
</div>
  Med disse CSS-reglene
#container {width: 500px;}

#sidebar {float: left; width: 80px; padding: 10px; background-color: #FC9;}

#mainContent {clear: none;padding: 10px;margin-left: 105px;}

©IGM, Stig Aasen.

ID kombinert med Pseudo

 Om du legger inn boksens ID- eller Class-
navn + mellomrom a:pseudo gjelder det
kun lenker i den definerte boksen.
#sidebar a:link {
color: #666;
text-decoration: none;
}
#sidebar a:hover {
color: red;
}

©IGM, Stig Aasen.

Du kan også

  Om to eller flere Pseudo-class skal være like kan
de f.eks settes opp på denne måten:
#sidbar a:link, #sidbar a:visited { color: silver; text-decoration: none; }

# sidebar a:hover, #sidbar a:active { color: orange; text-decoration: underline; }

©IGM, Stig Aasen.

Sortering av pseudo-class

  Det
er anbefalt at du bruker rekkefølgen link-visited-
hover-active LVHA som dette:
:link { color: blue; }

:visited { color: purple; }

:hover { color: red; }

:active { color: orange; }

  Dettehar med verdien på selector og hvordan den
er bygget opp. Mer om dette finner du på siden
•  http://www.w3.org/TR/CSS21/cascade.html
•  og 6.4.3 Calculating a selector's speciﬁcity
•  eller ved søk på (Sort by specificity) på siden http://
www.w3.org

©IGM, Stig Aasen.

Contextual Selectors

  Om du setter opp header til grå
h1 { color: gray; }
  Så setter du inn kursiv (em) i headeren

  Du kan nå sette opp en em i h1 selector
uten (,) som skille
h1 em { color: teal; }
•  em er nå kontekst til H1 og virker kun der det er em plassert i H1.

©IGM, Stig Aasen.

Kan også mer kompleks

 Slik
ul ol ul em { color: teal; }

 Et tips er å lese fra høyre mot venstre når det
ikke er komma mellem Selsctors. Effekten av
CSS-reglen fungerer kun dersom <em>
ligger i <ul> som igjen ligger i <ol> som til
slutt ligger i <ul>.

©IGM, Stig Aasen.

Knappebilder

 Her er to bilder som er laget i photoshop.
De er 20px høye og 20px brede. Bredden
vil bare repetere seg.

©IGM, Stig Aasen.

Rollover i CSS

 <div class="toppmeny" >
<ul>
<li><a href="side1.html">Knapp1</a></li>
<li><a href="index.html">Knapp2</a></li>
</ul>
</div>

©IGM, Stig Aasen.

Stilsett til knappene

.toppmeny li {
list-style-type: none;
}
.toppmeny a:link, .toppmeny a:visited {
display: block;
height:20px;
width: 80px;
background-image: url(normal.png);
color: #FFFFFF;
text-decoration: none;
padding-left: 10px;
}
.toppmeny a:hover, .toppmeny a:active {
background-image: url(over.png);
color: red;

} ©IGM, Stig Aasen.

Horisontale knapper

 Da må det legges til i CSS-reglen at
listepunktene <li> skal flyte ved siden av
hverandre.
.toppmeny li {
list-style-type: none;
float: left;
}

 Dette er resultatet:

©IGM, Stig Aasen.

Bruk av Float left/right

  Herer det tre bokser. En container ytterst og inne i
den ligger boksen sidebar og boksen mainContent.
•  blå = container
•  gul = sidebar
•  grønn = mainContent
  Boksen sidebar bruker CSS-reglen
float: left;

©IGM, Stig Aasen.

Problem med Float

 Bokser med CSS-reglen Float opptar ikke plassen
de skal ta.
 Boksen mainContent bruker ikke Float og skyver
derfor boksen den ligger i nedover
 Sidebar bruker float:left i dette eksemplet og flyter
over container

©IGM, Stig Aasen.

Clear Both er løsningen

  Er dette et problem løses dette med en CSS-regel
bestående av clear:both
  Når du lager en site kan du alltid lage denne CSS-
reglen ferdig på forhånd.
•  lages som CLASS da den ofte brukes mange ganger.
•  .clearfloat {clear:both}
  Denne kan legges som en CLASS til en DIV eller BR
•  Legges ofte som <div class=clearfloat></div>
i bunnen av containeren der boksen med foat:left/right er brukt

©IGM, Stig Aasen.

Html kurs igm

Recommended

Recommended

More Related Content

Similar to Html kurs igm

Similar to Html kurs igm (10)

Html kurs igm