CSS

CSS- Cascading Stylesheets Layout för webb och XML

Cascading Stylesheets Ett språk för att definiera hur XML-dokumen, html-dokument och xhtml-dokument ska rendreras på web, papper, TV, ljud etc. Rekommendation från W3C Är i sig inte XML-baserad, men opererar på XML-strukturer

CSS - Historiskt perspektiv 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 element (t.ex. <h3>) används för att få en viss grafisk effekt, istället för att ange ett logiskt innehåll. Nya element tillkom okontrollerat. Lösningen: Gör ett helt nytt språk för layout: CSS

Exempel Exempel: Nu Filen b.css p { font-family: Helvetica, sans-serif; } Filen b.html <?xml-stylesheet type="text/css" href="b.css"?> […] <p> Text visas med helvetica </p> […] Exempel: Förr Filen a.html […] <p> <font face="Helvetica"> Text visas med helvetica </font> </p> […]

Internt eller externt CSS Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. 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 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 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"?>

Associering HTML-dokument ->CSS För att associera ett internt CSS till ett HTML-dokument lägger man in ett style-element i elementet head. Internt CSS i en HTML.-fil <html> <head> <style type="text/css"> body { background-color: #ffffff; }</style> </head> <body> … </body> </html> För att associera ett externt CSS till ett HTML-dokument lägger man vanligtvis in ett link-element i elementet head. Externt CSS + HTML.-fil <html> <head> <link rel="stylesheet” type="text/css" href="test.css”/> </head> <body> … </body> </html>

Grundprincipen: Mönster -> Beteende Grundprincipen är att hitta olika mönster med "selectors" i XML-dokumentet, och till detta sätta värdet på en egenskap, property. Mönster är exempelvis tagnamn. Egenskaper kan vara font-storlek. Exempel: p { font-family: Helvetica, sans-serif; } Selector: Alla p-element Egenskap Egenskaps- värde

Olika selektorer 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. Exempel: * { font-size: Medium } p a { font-size: Medium } Matchar alla element Matchar alla a-element som är ättlingar till p-element

Olika selektorer Exempel: p > a { font-size: Medium } p + a { font-size: Medium } Matchar a-element som är omedelbara barn till p-element. Matchar alla a-element som följer direkt efter ett p-element (syskon) Exempel: <p> <a></a> </p> <p> <strong> <a>Hej</a> </strong> </p> Matchar Matchar inte

Matchning på attribut Exempel: a-element med href="a.html" a[href="a.html"] {font-size: Medium} a-element som har ett href-attribut a[href] {font-size: Medium} a-element vars href innehåller delsträngen "html" a[href~="html"] {font-size: Medium} 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

Pseudo-klasser och pseudo-element Exempel: Första barnelementen till p-element p:first-child {font-size: Medium} Första bokstaven i banan-element banan:first-letter {font-size: Medium} Före (efter) ett banan-element banan:before {content: "En banan!"} Pseudo-klasser och pseudo-element matchar på olika typer av metainformation i XML-dokumentet. De separeras från element/attribut med ett kolon.

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} Properties: Höjd/längd/storlek Obs! Två properties till samma selektor, separerat med semikolon

Properties:Fonter 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, ultra-expanded, semi-condensed etc. m.fl.

Properties:Texter Text-properties hanterar sådant som indrag, justering och enkla transformer. text-indent: applicerbar endast på element 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.

Properties:Färger 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: # FF FF CC } Eller P {color:rgb( 100%, 100%, 70%}

Avancerat 1: Räknare 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 } h1 { counter-reset: banan }

Avancerat 2: Klasser Om man vill ha en specifik effekt på ett visst element, och vill att det ska gälla just det elementet och inget annat finns möjligheten att ange en "klass" för elementet ifråga. p.tomat { font-size:14pt } … <p class="tomat"> Hej </p>

Avancerat 3: Pseudoklasser för länkar Det är vanligt att man vill ha olika färger på länkar beroende på om de är besökta eller ej. a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */

Avancerat 4: mediatyper Det går att specifiera olika egenskaper som ska gälla för olika mediatyper, t.ex. print, screen och aural. <html> <head> <style type="text/css" media="screen"> @import "/css/initial.css"; @import "/css/screen.css"; </style> <style type="text/css" media="print"> @import "/css/initial.css"; @import "/css/print.css"; </style> </head> <body> <p class="test">Hejsan</p> </body> </html>

Avancerat 5: mediatypen print Flera egenskaper finns, som gäller endast för mediatypen "print". De som är implementerade är åtminstone page-break-after page-break-before För mer info se http://www.w3schools.com/css/css_ref_print.asp

Avancerat 6: mediatypen aural Bland de mer spännande möjligheterna är de att styra ljudet från en röst-synth. Inga implementationer finns dock än som jag känner till, men exempel på vad som finns i specifikationen är: h1, h2, h3, h4 { voice-family: male; richness: 80; cue-before: url("beep.au") } För mer info se http://www.w3schools.com/css/css_ref_aural.asp

Browsersupport Idag bra stöd i alla moderna browsers. Bäst i Opera Dock: Räkna inte med mobiltelefonstöd

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. Ett problem är att det inte i någon CSS-variant går att ändra ordningen på element, utan deras innehåll visas (eller visas inte) sekventiellt.

CSS

More Related Content

Similar to CSS (20)

More from bjornh (18)

CSS