1 / 27

Stilark: CSS

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

rosina
Download Presentation

Stilark: CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Stilark: CSS Digitalisering av text April 2005 Mats Dahlström

  2. Stilark • Formatmallar (eng.: style sheets) i MS Word • För SGML-dokument: • DSSSL • CSS • XSLT

  3. 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

  4. SGML-filosofin kommer igen • Separera innehållsbeskrivning och visuell presentation • One input / many outputs • Ett dokument – flera stilark • Ett stilark – flera dokument • = Ekonomiskt

  5. 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

  6. Ett CSS-ark … • … är en enkel textfil • … med en samling regler • … skrivna i en annan notation än XML 

  7. 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"}

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

  9. deklaration av färg (klartext eller RGB) H1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

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

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

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

  13. 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; }

  14. 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

  15. CSS för X(HT)ML : Placering i extern fil <head> <link rel="stylesheet" type="text/css" href="minstil.css"> </head> En extern stilmall kan styra flera dokument samtidigt Ett dokument kan presenteras med varierande externa stilmallar

  16. CSS för X(HT)ML : Internt för hela dokumentet <HEAD> <TITLE>Kapitel 1</TITLE> <STYLE TYPE="text/css"> H1 { color: darkred } </STYLE> </HEAD> Styr det specifika dokumentet

  17. CSS för X(HT)ML : Internt för ett element (placering inline) <p style="color: red; margin-left: 20px"> O ge mig en grav i det isgröna hav där blott böljorna lyss till min gråt </p> Styr ett bestämt element i ett dokument

  18. CSS för XML-TEI • Placering i extern fil • Deklareras i prologen: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <?xml-stylesheet type="text/css" href=”minstil.css"?> • Observera type, namnet och lokaliseringen av stilarket (lokalt, externt)

  19. Ä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

  20. 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”

  21. olika barnelement med samma märkord <artikel> <huvud> <titel> Att baka bröd </titel> </huvud> ... <sektion> <titel> Så här skållar du mjöl </titel> ... <sektion> ... </artikel>

  22. css-lösning titel {font-weight: bold} huvud titel {font-size: 18pt; text-align: center sektion titel {font-size: 14pt}

  23. styra särskilda attribut *[language="japanska"] { color:#ff0000; }

  24. 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 }

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

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

  27. 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

More Related