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 Kapitel 1 H1 { color: darkred } 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 Att baka bröd... 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.8kap. 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