Stilark: CSS

Digitalisering av text April 2005 Mats Dahlström

Stilark

  Formatmallar (eng.:

style sheets

) i MS Word För SGML-dokument:    DSSSL CSS XSLT

Cascading Style Sheets (CSS)

   Språk som används för att förse dokument med direktiv för layout Håkon Wium Lie (Opera Software) den primäre upphovsmannen (1996) ”Cascading” – flera stildeklarationer kan kombineras

SGML-filosofin kommer igen

 Separera innehållsbeskrivning och visuell presentation  One input / many outputs    Ett dokument – flera stilark Ett stilark – flera dokument = Ekonomiskt

Nivåer (specifikationer)



CSS 1



CSS 2.1



CSS 3

    CSS2 kan gå in på attributnivå Webbläsarstödet varierar och är långt från fullt utbyggt W3C:s specifikationer är den utförligaste referensmanualen (se också W3Schools) Ray kap. 5 mkt bra att läsa här

Ett CSS-ark …

   … är en enkel textfil … med en samling

regler

… skrivna i en annan notation än XML 

Regler



Selektor:

identifierar det / de element som skall presenteras mha en deklaration 

Deklaration:

ett direktiv som anger hur ett  element skall presenteras

selektor { egenskap : värde }

 

body { color : black } p { font-family : " sans serif "}

Regelexempel

H1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

deklaration av färg (klartext eller RGB)

H1 { color: darkred ; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

deklaration av typsnitt

H1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

deklaration av teckenstorlek

H1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

deklaration av marginalutrymme

H1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

Flexibilitet

    En egenskap kan ha flera värden Värden separerade med kommatecken anger preferens En selektor med flera deklarationer Flera selektorer med en deklaration: 

H1,H2, H3 { display:block; font size:14pt; }

CSS för XHTML: fyra alternativ     Webbläsarens default Extern css-fil Internt för hela dokumentet Internt för ett bestämt element  Stigande prioritetsordning

CSS för X(HT)ML : Placering i extern fil

< link rel="stylesheet" type="text/css" href =" minstil.css

"> En extern stilmall kan styra flera dokument samtidigt Ett dokument kan presenteras med varierande externa stilmallar

CSS för X(HT)ML : Internt för hela dokumentet

Styr det specifika dokumentet

CSS för X(HT)ML : Internt för ett element (placering inline)

O ge mig en grav i det isgröna hav där blott böljorna lyss till min gråt

Styr ett bestämt element i ett dokument

CSS för XML-TEI    Placering i extern fil Deklareras i prologen:

Observera type, namnet och lokaliseringen av stilarket (lokalt, externt)

Ärvda egenskaper

   CSS utnyttjar XML-hierarkin och låter barnelement ärva förälderelementets egenskaper Somliga egenskaper är ärftliga, andra inte (se specifikationen) Om en egenskap definieras både för föräldern och för barnet, ges det mer specifika (barnet) företräde

display: block / display: inline

 Deklarera för varje element om det är ett blockelement eller ett inlineelement  Element hanteras av CSS som en rektangulär box. Ett block-element (

display:block

) tar ett helt horisontellt utrymme i anspråk, medan inline-elementen (

display:inline

) ”bäddas in”

olika barnelement med samma märkord

< titel > Att baka bröd ...

< titel > Så här skållar du mjöl ...

...

css-lösning

titel {font-weight: bold} huvud titel {font-size: 18pt; text-align: center sektion titel {font-size: 14pt}

styra särskilda attribut

*[language="japanska"] { color:#ff0000; }

Styra ett element med ett unikt id      id-selektor:  [element]#[värdet till id-attributet] En id-selektor pekar bara till en bestämd elementinstans.

Ett unikt id-attribut måste finnas i dokumentet Denna regel matchar ett p-element som har det unika id-attributvärdet "para1": p#para1 { text-align: center; color: red }

Läs mer om attributmöjligheter i W3C:s spec. för CSS 2.1,

kap. 5.8

kommentarer i css

/* Här ligger en kommentar */ p { text-align: center; /* Här ligger en annan kommentar */ color: black; font-family: arial }

CSS vs XSLT. XSLT

och

CSS.

     CSS + (X)HTML (och SVG) = OK CSS + andra XML-tillämpningar svagare CSS client-side, XSLT både client och server side CSS löper sekventiellt genom XML dokumentet och kan inte modifiera dess struktur. Här heter lösningen XSL XSLT kombineras ofta med CSS – dvs HTML-resultatets presentation underkastas CSS-regler