Mer XHTML

Etterkommer (Descendant selectors)

En descendant-selector brukes til å velge elementer som er etterkommere av andre elementer i et dokumenttre.

For eksempel du vil et spesifikt <em> element på siden, men ikke alle <em> elementer.

<body>
<h1>Overskrift <em>her</em> </h1>
<p>Det er lov å være <em>sur</em> når man er sliten.</p>
</body>

Dokumentdiagrammet vil se slik ut

Document tree showing descendant selectors

Følgende selektor vil velge alle <em> -elementer.

em {color: blue; }

I stedet kan vi bruke en descendant selector og bare velge elementer som er etterkommer av <p> elementer.

p em {color: blue; }

etterkommer1.html, etterkommer2.html

#navigation a {color: orange}
<div id=navigation>
	<a href="forstesiden.html">Første siden</a>
	<a href="andresiden.html">Andre siden</a>
	<a href="tredjesiden.html">Tredje siden</a>
</div>

Universelle selektorer

Hvis du vil lage regler som gjelder for alle elementer kan du bruke * (stjerne)


* {color: #00f;}
.. vil gi blå farge på all tekst i hele dokumentet. 

div#navigasjon * {color: #fff;}
...vil gi hvit tekst for alle elementer som ligger innenfor en div med id navigasjon.

universellselektor.html

Pseudo-klasser og -elementer

Det finnes noen spesielle versjoner av selektoren som kan brukes der hvor vi ikke kan få tak i elementet basert på tag. De inkluderer:

  • :first-child *
  • :link
  • :visited
  • :hover
  • :active
  • :focus *
  • :first-line
  • :first-letter
  • :before *
  • :after *

* støttes ikke av Internet Explorer.

Linker kan dermed stilsettes basert på tilstand.

På grunn av presedens, vil selektorer som opptrer sist i stilarket bli brukt dersom det er konflikt. Derfor må linkpseudoklasser brukes i denne rekkefølgen i stilarket:

a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

linktest.html

Menyer med css og liste-tag.

For å lage menyer til websider, er det vanlig å bruke lister

Lager først en liggende liste: lmenyink1.html

Legger så til lenker: menylink2.html

Legger så til form og farger: menylink3.html

Til slutt legges det til hjemmesiden: menylink.html

Mediatyper

Med mediatyper spesifisert i stilsettet kan man spesifisere hvordan dokumentet skal vises i forskjellige media: på papir, skjermen, lyd osv.

Noen viktige mediatyper:

    • @media screen{
  p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print{
  p.test {font-family:times,serif; font-size:10px}
}
    @media screen,print{
  p.test {font-weight:bold}
}
    mediatest1.html, mediastil1.css

    mediatest2.html, mediastil2.css

    Display property

    Setter hvordan et element skal viser.
    Nyttig å bruke sammen med mediatyper.
    Kan også setter av et JavaScript.

    Verdier:

    none: elementet vil ikke vises
    block: elementet vil vises som et block-element med linjeskift før og etter elementet
    inline: elementet vil vises som et inline-element uten linjeskift før og etter elementet

    Print Properties

    Printing properties gjør det enklere å skrive ut websider fordi man kan sette inn linjeskift hvor man vil.

    Mediatest3.html, mediastil3.html