CSS- Cascading Stylesheets

CSS- Cascading Stylesheets 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Cascading Stylesheets Ett språk för att definiera hur XML-dokument ska rendreras på web, papper, TV, ljud etc. Rekommendation från W3C Är i sig inte XML-baserad, men opererar på XMLstrukturer 2001-09-13 Björn Hedin, NADA/KTH 2001 1 2001-09-13 Björn Hedin, NADA/KTH 2001 2 CSS - Historiskt perspektiv Exempel html är byggt för att strukturera textdokument med textlänkar, oavsett presentationsmedium. Den kommersiella framgången för www drev på för att kunna göra mer estetiskt tilltalande dokument. Logiska (t.ex. <h3>) används för att få en viss grafisk effekt, istället för att ange ett logiskt innehåll. Netscape & Microsoft startade tag-kriget där de lade till nya tags (<blink>,) för att uppnå visuella resultat. Lösningen: Gör ett helt nytt språk för layout: CSS Förr Filen a.html Text visas med helvetica Nu Filen b.css p { font-family: Helvetica, sans-serif; Filen b.html <?xml-stylesheet type= text/css href= b.css?> Text visas med helvetica 2001-09-13 Björn Hedin, NADA/KTH 2001 3 2001-09-13 Björn Hedin, NADA/KTH 2001 4

Internt eller externt CSS Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. Ett internt CSS läggs till som en CDATA-sektion. Interna CSS har fördelen att de endast kräver en http-överföring. Nackdelen är att man behöver skriva samma CSS-kod i flera dokument -> svårare att göra förändringar. Associering XML-dokument ->CSS För att associera ett CSS till ett XML-dokument lägger man in en process-instruktion i XML-dokumentet. Processintruktion i en XML-fil <?xml-stylesheet type= text/css href= b.css charset= ISO8859-1 title= Mitt Stylesheet media= screen?> type: MIME-typen text/css href: URI till css-filen charset: Teckenuppsättning title: Titel media: För vilket medium stylesheetet ska användas. Ett XML-dokument kan ha flera stylesheets associerade med sig, men väljer vilket det ska använda beroende på outputmedium. Media som finns är: screen -tty tv - projection handheld - print braille - aural All 2001-09-13 Björn Hedin, NADA/KTH 2001 5 2001-09-13 Björn Hedin, NADA/KTH 2001 6 Grundprincipen: Mönster -> Beteende p { font-family: Helvetica, sans-serif; Egenskap Selector: Alla p- Grundprincipen är att hitta olika mönster med selectors i XMLdokumentet, och till detta sätta värdet på en egenskap, property. Mönster är exempelvis tagnamn. Egenskaper kan vara fontstorlek. Egenskapsvärde 2001-09-13 Björn Hedin, NADA/KTH 2001 7 Det finns en mängd olika selektorer med vilka man kan upptäcka olika typer av strukturer i XML-dokument. Exempelvis kan man finna ättlingar, barn, direkta barn, syskon och attribut. Olika selektorer Matchar alla * { p a { Matchar alla a- som är ättlingar till p- 2001-09-13 Björn Hedin, NADA/KTH 2001 8

Olika selektorer Matchning på attribut <a></a> <a>hej</a> Matchar Matchar inte p > a { p + a { Matchar a- som är omedelbara barn till p-. Matchar alla a- som följer direkt efter ett p- (syskon) Det går att matcha på attributs värde, om attributet har ett värde över huvud taget, delsträngar av attributvärden och ID-värden a- med href= a.html a[href= a.html ] { a- som har ett href-attribut a[href] { Alla som har ett href-attribut a[href= a.html ] { a- vars href innehåller delsträngen html a[href~= html ] { 2001-09-13 Björn Hedin, NADA/KTH 2001 9 2001-09-13 Björn Hedin, NADA/KTH 2001 10 Pseudo-klasser och pseudo- Pseudo-klasser och pseudo matchar på olika typer av metainformation i XML-dokumentet. De separeras från /attribut med ett kolon. Första barnen till p- p:first-child { Första bokstaven i banan- banan:first-letter { Första raden i banan- banan:first-child { Före (efter) ett banan- banan:before {content: En banan! 2001-09-13 Björn Hedin, NADA/KTH 2001 11 Properties: Höjd/längd/storlek Det finns flera properties för att ange höjd/längd/storlek. border-width font-size line-height margin-left, margin-top, margin-right, margin-bottom left, top height, width Det går att använda de flesta enheter som används i typografiska sammanhang. Absoluta, t.ex. cm, in, pt Relativat.ex. em, ex, px Exempel banan {line-height: 2.2em tomat {font-size:14pt; line-height:3ex Obs! Två properties till samma selektor, separerat med semikolon 2001-09-13 Björn Hedin, NADA/KTH 2001 12

Properties:Fonter Properties:Texter För fonthantering finns ett antal properties. font-family: t.ex Helvetica, sans-serif font-style: t.ex. italic, slanted font-size: absoluta värden som 12pt eller relativa värden som x-small font-variant: small-caps för kapitäler font-weight: bold, bolder, lighter eller på en skala från 100-900 font-stretch:wider, ultraexpanded, semi-condensed etc. m.fl. Text-properties hanterar sådant som indrag, justering och enkla transformer. text-indent: applicerbar endast på med block-display. Text-align: left, right, center, justify Text-decoration: underline, overline, linethrough Text-transform: capitalize, uppercase, lowercase White-space: pre för att bevara radbrydningar och whitespace. 2001-09-13 Björn Hedin, NADA/KTH 2001 13 2001-09-13 Björn Hedin, NADA/KTH 2001 14 Properties:Färger Räknare De tre viktigaste properties för färger som finns är Color (observera: amerikansk stavning) Background-color Border-color Fördefinierade färger Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Eller som hexadecimala färgrepresentationer p {color: #FFFFCC Eller P {color:rgb(100%,100%,70% Det finns också möjligheter att använda variabler som räknare, och därefter använda räknarens värde. P:before { content: counter(banan). ; counter-increment: banan 2001-09-13 Björn Hedin, NADA/KTH 2001 15 2001-09-13 Björn Hedin, NADA/KTH 2001 16

Browsersupport Historiskt sett har stöd i browsers varit mycket bristfälligt. Detta har gjort att många undvikit stylesheets. Idag är stödet bättre. Bäst i Opera (!), därefter Netscape 6 (jag har inte kollat stödet i IE6 än). Begränsningar och möjligheter I CSS1 stöds endast html-taggar I CSS2 stöds alla XML-dokument vilket är mycket bra då innehåll blir fullständigt skiljt från presentation. I CSS3 kommer stöd finnas för t.ex. kolumner, paginering, kraftfullare selektorer och bättre stöd för icke-europeiska teckenuppsättningar. 2001-09-13 Björn Hedin, NADA/KTH 2001 17 2001-09-13 Björn Hedin, NADA/KTH 2001 18 Begränsningar och möjligheter Ett stort problem är att det inte går att ändra ordningen på, utan deras innehåll visas (eller visas inte) sekventiellt. Detta kan dock hanteras med XSLT. XSL-FO är ett mycket exaktare layoutspråk med vilket man kan göra mycket exakt layout. XSLT och XSL-FO är båda XML-baserade. Framtiden I XHTML är layout-tags förbjudna, istället ska CSS användas. Några tänkbara scenarios för framtidens webproduktion. Enkla, statiska sidor görs i XHTML + CSS Dokument där man har en mer innehållsrik xml-struktur i botten (t.ex. recept, pjäser etc) använder den XML-strukturen + CSS Datastrukturer som kräver omordning av eller som ska publiceras i flera kanaler (som web och wap) använder först XSLT-transformer för att strukturera innehållet, därefter CSS för media som stöds av CSS. Slutligen sidor som kräver bättre layout än vad XHTML+CSS kan erbjuda använder XSL-FO för att transformera och göra layout. 2001-09-13 Björn Hedin, NADA/KTH 2001 19 2001-09-13 Björn Hedin, NADA/KTH 2001 20