CSS- Cascading Stylesheets   Layout för webb och XML
Cascading Stylesheets <ul><li>Ett språk för att definiera hur XML-dokumen, html-dokument och xhtml-dokument ska rendreras ...
CSS - Historiskt perspektiv <ul><li>html är byggt för att strukturera textdokument med textlänkar, oavsett presentationsme...
Exempel <ul><li>Exempel: Nu </li></ul><ul><li>Filen b.css </li></ul><ul><li>p { </li></ul><ul><li>font-family: Helvetica, ...
Internt eller externt CSS <ul><li>Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. </li><...
Associering  XML-dokument ->CSS <ul><li>type: MIME-typen text/css </li></ul><ul><li>href: URI till css-filen </li></ul><ul...
Associering  HTML-dokument ->CSS <ul><li>För att associera ett internt CSS till ett HTML-dokument lägger man in ett style-...
Grundprincipen: Mönster -> Beteende <ul><li>Grundprincipen är att hitta olika mönster med &quot;selectors&quot;  i XML-dok...
Olika selektorer <ul><li>Det finns en mängd olika selektorer med vilka man kan upptäcka olika typer av strukturer i XML-do...
Olika selektorer <ul><li>Exempel: </li></ul><ul><li>p > a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li><...
Matchning på attribut <ul><li>Exempel: </li></ul><ul><li>a-element med href=&quot;a.html&quot; </li></ul><ul><li>a[href=&q...
Pseudo-klasser och pseudo-element <ul><li>Exempel: </li></ul><ul><li>Första barnelementen till  p-element </li></ul><ul><l...
<ul><li>Det finns flera properties för att ange höjd/längd/storlek. </li></ul><ul><ul><li>border-width, font-size, line-he...
Properties:Fonter <ul><li>För fonthantering finns ett antal properties. </li></ul><ul><ul><li>font-family: t.ex Helvetica,...
Properties:Texter <ul><li>Text-properties hanterar sådant som indrag, justering och enkla transformer. </li></ul><ul><ul><...
Properties:Färger <ul><li>De tre viktigaste properties för färger som finns är </li></ul><ul><ul><li>Color (observera: ame...
Avancerat 1: Räknare <ul><li>Det finns också möjligheter att använda &quot;variabler&quot; som räknare, och därefter använ...
Avancerat 2: Klasser <ul><li>Om man vill ha en specifik effekt på ett visst element, och vill att det ska gälla just det e...
Avancerat 3:  Pseudoklasser för länkar <ul><li>Det är vanligt att man vill ha olika färger på länkar beroende på om de är ...
Avancerat 4:  mediatyper <ul><li>Det går att specifiera olika egenskaper som ska gälla för olika mediatyper, t.ex. print, ...
Avancerat 5: mediatypen print <ul><li>Flera egenskaper finns, som gäller endast för mediatypen &quot;print&quot;. De som ä...
Avancerat 6: mediatypen aural <ul><li>Bland de mer spännande möjligheterna är de att styra ljudet från en röst-synth. Inga...
Browsersupport <ul><li>Idag bra stöd i alla moderna browsers.  </li></ul><ul><li>Bäst i Opera  </li></ul><ul><li>Dock: Räk...
Begränsningar och möjligheter <ul><li>I CSS1 stöds endast html-taggar </li></ul><ul><li>I CSS2 stöds alla XML-dokument vil...
Upcoming SlideShare
Loading in …5
×

CSS

2,718 views

Published on

CSS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,718
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. CSS- Cascading Stylesheets Layout för webb och XML
  2. 2. Cascading Stylesheets <ul><li>Ett språk för att definiera hur XML-dokumen, html-dokument och xhtml-dokument ska rendreras på web, papper, TV, ljud etc. </li></ul><ul><li>Rekommendation från W3C </li></ul><ul><li>Är i sig inte XML-baserad, men opererar på XML-strukturer </li></ul>
  3. 3. CSS - Historiskt perspektiv <ul><li>html är byggt för att strukturera textdokument med textlänkar, oavsett presentationsmedium. </li></ul><ul><li>Den kommersiella framgången för www drev på för att kunna göra mer estetiskt tilltalande dokument. </li></ul><ul><li>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. </li></ul><ul><li>Lösningen: Gör ett helt nytt språk för layout: CSS </li></ul>
  4. 4. Exempel <ul><li>Exempel: Nu </li></ul><ul><li>Filen b.css </li></ul><ul><li>p { </li></ul><ul><li>font-family: Helvetica, sans-serif; </li></ul><ul><li>} </li></ul><ul><li>Filen b.html </li></ul><ul><li><?xml-stylesheet type=&quot;text/css&quot; href=&quot;b.css&quot;?> </li></ul><ul><li>[…] </li></ul><ul><li><p> </li></ul><ul><li>Text visas med helvetica </li></ul><ul><li></p> </li></ul><ul><li>[…] </li></ul>Exempel: Förr Filen a.html […] <p> <font face=&quot;Helvetica&quot;> Text visas med helvetica </font> </p> […]
  5. 5. Internt eller externt CSS <ul><li>Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. </li></ul><ul><li>Interna CSS har fördelen att de endast kräver en http-överföring. </li></ul><ul><li>Nackdelen är att man behöver skriva samma CSS-kod i flera dokument -> svårare att göra förändringar. </li></ul>
  6. 6. Associering XML-dokument ->CSS <ul><li>type: MIME-typen text/css </li></ul><ul><li>href: URI till css-filen </li></ul><ul><li>charset: Teckenuppsättning </li></ul><ul><li>title: Titel </li></ul><ul><li>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 </li></ul><ul><li>För att associera ett CSS till ett XML-dokument lägger man in en process-instruktion i XML-dokumentet. </li></ul><ul><li>Processintruktion i en XML-fil </li></ul><ul><li><?xml-stylesheet </li></ul><ul><li>type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;b.css&quot; </li></ul><ul><li>charset=&quot;ISO8859-1&quot; </li></ul><ul><li>title=&quot;Mitt Stylesheet&quot; </li></ul><ul><li>media=&quot;screen&quot;?> </li></ul>
  7. 7. Associering HTML-dokument ->CSS <ul><li>För att associera ett internt CSS till ett HTML-dokument lägger man in ett style-element i elementet head. </li></ul><ul><li>Internt CSS i en HTML.-fil </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>body { background-color: #ffffff; }</style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>För att associera ett externt CSS till ett HTML-dokument lägger man vanligtvis in ett link-element i elementet head. </li></ul><ul><li>Externt CSS + HTML.-fil </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet” </li></ul><ul><li>type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;test.css”/> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. Grundprincipen: Mönster -> Beteende <ul><li>Grundprincipen är att hitta olika mönster med &quot;selectors&quot; i XML-dokumentet, och till detta sätta värdet på en egenskap, property. </li></ul><ul><li>Mönster är exempelvis tagnamn. </li></ul><ul><li>Egenskaper kan vara font-storlek. </li></ul><ul><li>Exempel: </li></ul><ul><li>p { </li></ul><ul><li>font-family: Helvetica, sans-serif; </li></ul><ul><li>} </li></ul>Selector: Alla p-element Egenskap Egenskaps- värde
  9. 9. Olika selektorer <ul><li>Det finns en mängd olika selektorer med vilka man kan upptäcka olika typer av strukturer i XML-dokument. </li></ul><ul><li>Exempelvis kan man finna ättlingar, barn, direkta barn, syskon och attribut. </li></ul><ul><li>Exempel: </li></ul><ul><li>* { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul><ul><li>p a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul>Matchar alla element Matchar alla a-element som är ättlingar till p-element
  10. 10. Olika selektorer <ul><li>Exempel: </li></ul><ul><li>p > a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul><ul><li>p + a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul>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
  11. 11. Matchning på attribut <ul><li>Exempel: </li></ul><ul><li>a-element med href=&quot;a.html&quot; </li></ul><ul><li>a[href=&quot;a.html&quot;] {font-size: Medium} </li></ul><ul><li>a-element som har ett href-attribut </li></ul><ul><li>a[href] {font-size: Medium} </li></ul><ul><li>a-element vars href innehåller delsträngen &quot;html&quot; </li></ul><ul><li>a[href~=&quot;html&quot;] {font-size: Medium} </li></ul><ul><li>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 </li></ul>
  12. 12. Pseudo-klasser och pseudo-element <ul><li>Exempel: </li></ul><ul><li>Första barnelementen till p-element </li></ul><ul><li>p:first-child {font-size: Medium} </li></ul><ul><li>Första bokstaven i banan-element </li></ul><ul><li>banan:first-letter {font-size: Medium} </li></ul><ul><li>Före (efter) ett banan-element </li></ul><ul><li>banan:before {content: &quot;En banan!&quot;} </li></ul><ul><li>Pseudo-klasser och pseudo-element matchar på olika typer av metainformation i XML-dokumentet. </li></ul><ul><li>De separeras från element/attribut med ett kolon. </li></ul>
  13. 13. <ul><li>Det finns flera properties för att ange höjd/längd/storlek. </li></ul><ul><ul><li>border-width, font-size, line-height, margin-left, margin-top, margin-right, margin-bottom, left, top, height, width </li></ul></ul><ul><li>Det går att använda de flesta enheter som används i typografiska sammanhang. </li></ul><ul><ul><li>Absoluta, t.ex. cm, in, pt </li></ul></ul><ul><ul><li>Relativat.ex. em, ex, px </li></ul></ul><ul><li>Exempel </li></ul><ul><li>banan {line-height: 2.2em} </li></ul><ul><li>tomat {font-size:14pt;line-height:3ex} </li></ul>Properties: Höjd/längd/storlek Obs! Två properties till samma selektor, separerat med semikolon
  14. 14. Properties:Fonter <ul><li>För fonthantering finns ett antal properties. </li></ul><ul><ul><li>font-family: t.ex Helvetica, sans-serif </li></ul></ul><ul><ul><li>font-style: t.ex. italic, slanted </li></ul></ul><ul><ul><li>font-size: absoluta värden som 12pt eller relativa värden som x-small </li></ul></ul><ul><ul><li>font-variant: small-caps för kapitäler </li></ul></ul><ul><ul><li>font-weight: bold, bolder, lighter eller på en skala från 100 - 900 </li></ul></ul><ul><ul><li>font-stretch:wider, ultra-expanded, semi-condensed etc. </li></ul></ul><ul><ul><li>m.fl. </li></ul></ul>
  15. 15. Properties:Texter <ul><li>Text-properties hanterar sådant som indrag, justering och enkla transformer. </li></ul><ul><ul><li>text-indent: applicerbar endast på element med block-display. </li></ul></ul><ul><ul><li>text-align: left, right, center, justify </li></ul></ul><ul><ul><li>text-decoration: underline, overline, linethrough </li></ul></ul><ul><ul><li>text-transform: capitalize, uppercase, lowercase </li></ul></ul><ul><ul><li>white-space: pre för att bevara radbrydningar och whitespace. </li></ul></ul>
  16. 16. Properties:Färger <ul><li>De tre viktigaste properties för färger som finns är </li></ul><ul><ul><li>Color (observera: amerikansk stavning) </li></ul></ul><ul><ul><li>Background-color </li></ul></ul><ul><ul><li>Border-color </li></ul></ul><ul><li>Fördefinierade färger </li></ul><ul><ul><li>Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow </li></ul></ul><ul><li>Eller som hexadecimala färgrepresentationer </li></ul><ul><ul><li>p {color: # FF FF CC } </li></ul></ul><ul><li>Eller </li></ul><ul><ul><li>P {color:rgb( 100%, 100%, 70%} </li></ul></ul>
  17. 17. Avancerat 1: Räknare <ul><li>Det finns också möjligheter att använda &quot;variabler&quot; som räknare, och därefter använda räknarens värde. </li></ul><ul><li>p:before { </li></ul><ul><li>content: counter(banan) &quot;. &quot;; </li></ul><ul><li>counter-increment: banan </li></ul><ul><li>} </li></ul><ul><li>h1 { </li></ul><ul><li>counter-reset: banan </li></ul><ul><li>} </li></ul>
  18. 18. Avancerat 2: Klasser <ul><li>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 &quot;klass&quot; för elementet ifråga. </li></ul><ul><li>p.tomat { </li></ul><ul><li>font-size:14pt </li></ul><ul><li>} </li></ul><ul><li>… </li></ul><ul><li><p class=&quot;tomat&quot;> </li></ul><ul><li>Hej </li></ul><ul><li></p> </li></ul>
  19. 19. Avancerat 3: Pseudoklasser för länkar <ul><li>Det är vanligt att man vill ha olika färger på länkar beroende på om de är besökta eller ej. </li></ul><ul><li>a:link {color: #FF0000} /* unvisited link */ </li></ul><ul><li>a:visited {color: #00FF00} /* visited link */ </li></ul><ul><li>a:hover {color: #FF00FF} /* mouse over link */ </li></ul><ul><li>a:active {color: #0000FF} /* selected link */ </li></ul>
  20. 20. Avancerat 4: mediatyper <ul><li>Det går att specifiera olika egenskaper som ska gälla för olika mediatyper, t.ex. print, screen och aural. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;screen&quot;> </li></ul><ul><li>@import &quot;/css/initial.css&quot;; </li></ul><ul><li>@import &quot;/css/screen.css&quot;; </li></ul><ul><li></style> </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;print&quot;> </li></ul><ul><li>@import &quot;/css/initial.css&quot;; </li></ul><ul><li>@import &quot;/css/print.css&quot;; </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p class=&quot;test&quot;>Hejsan</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Avancerat 5: mediatypen print <ul><li>Flera egenskaper finns, som gäller endast för mediatypen &quot;print&quot;. De som är implementerade är åtminstone </li></ul><ul><ul><li>page-break-after </li></ul></ul><ul><ul><li>page-break-before </li></ul></ul><ul><li>För mer info se http://www.w3schools.com/css/css_ref_print.asp </li></ul>
  22. 22. Avancerat 6: mediatypen aural <ul><li>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: </li></ul><ul><li>h1, h2, h3, h4 </li></ul><ul><li>{ </li></ul><ul><li>voice-family: male; </li></ul><ul><li>richness: 80; </li></ul><ul><li>cue-before: url(&quot;beep.au&quot;) </li></ul><ul><li>} </li></ul><ul><li>För mer info se http://www.w3schools.com/css/css_ref_aural.asp </li></ul>
  23. 23. Browsersupport <ul><li>Idag bra stöd i alla moderna browsers. </li></ul><ul><li>Bäst i Opera </li></ul><ul><li>Dock: Räkna inte med mobiltelefonstöd </li></ul>
  24. 24. Begränsningar och möjligheter <ul><li>I CSS1 stöds endast html-taggar </li></ul><ul><li>I CSS2 stöds alla XML-dokument vilket är mycket bra då innehåll blir fullständigt skiljt från presentation. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>

×