SlideShare une entreprise Scribd logo
1  sur  24
CSS- Cascading Stylesheets   Layout för webb och XML
Cascading Stylesheets ,[object Object],[object Object],[object Object]
CSS - Historiskt perspektiv ,[object Object],[object Object],[object Object],[object Object]
Exempel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Exempel: Förr Filen a.html […] <p> <font face=&quot;Helvetica&quot;> Text visas med helvetica </font> </p> […]
Internt eller externt CSS ,[object Object],[object Object],[object Object]
Associering  XML-dokument ->CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Associering  HTML-dokument ->CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Grundprincipen: Mönster -> Beteende ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Selector: Alla p-element Egenskap Egenskaps- värde
Olika selektorer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Matchar   alla element Matchar alla a-element som är ättlingar till p-element
Olika selektorer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Pseudo-klasser och pseudo-element ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Properties: Höjd/längd/storlek Obs! Två properties till samma selektor, separerat med semikolon
Properties:Fonter ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Properties:Texter ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Properties:Färger ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avancerat 1: Räknare ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avancerat 2: Klasser ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avancerat 3:  Pseudoklasser för länkar ,[object Object],[object Object],[object Object],[object Object],[object Object]
Avancerat 4:  mediatyper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avancerat 5: mediatypen print ,[object Object],[object Object],[object Object],[object Object]
Avancerat 6: mediatypen aural ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Browsersupport ,[object Object],[object Object],[object Object]
Begränsningar och möjligheter ,[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Similaire à CSS

Spbl Fö7 Format, Text Och Html
Spbl Fö7   Format, Text Och HtmlSpbl Fö7   Format, Text Och Html
Spbl Fö7 Format, Text Och Html
bildljuddsv
 

Similaire à CSS (20)

PHP och MySQL
PHP och MySQLPHP och MySQL
PHP och MySQL
 
XML och DTD
XML och DTDXML och DTD
XML och DTD
 
CSS för utskrift
CSS för utskriftCSS för utskrift
CSS för utskrift
 
Snabbkurs webbsida
Snabbkurs webbsidaSnabbkurs webbsida
Snabbkurs webbsida
 
Webbapplikationer - HTML
Webbapplikationer - HTMLWebbapplikationer - HTML
Webbapplikationer - HTML
 
VT18 - DA355A - Introduktion till CSS
VT18 - DA355A - Introduktion till CSSVT18 - DA355A - Introduktion till CSS
VT18 - DA355A - Introduktion till CSS
 
Introduktion till CSS
Introduktion till CSSIntroduktion till CSS
Introduktion till CSS
 
HT16 - DA156A - Introduktion till CSS
HT16 - DA156A - Introduktion till CSSHT16 - DA156A - Introduktion till CSS
HT16 - DA156A - Introduktion till CSS
 
VT17 - DA355A - Introduktion till CSS
VT17 - DA355A - Introduktion till CSSVT17 - DA355A - Introduktion till CSS
VT17 - DA355A - Introduktion till CSS
 
HT19 - DA156A - Introduktion till CSS
HT19 - DA156A - Introduktion till CSSHT19 - DA156A - Introduktion till CSS
HT19 - DA156A - Introduktion till CSS
 
HT18 - DA156A - Introduktion till CSS
HT18 - DA156A - Introduktion till CSSHT18 - DA156A - Introduktion till CSS
HT18 - DA156A - Introduktion till CSS
 
Presentation För BTH Digitala Medier 2009-01-09
Presentation För BTH Digitala Medier 2009-01-09Presentation För BTH Digitala Medier 2009-01-09
Presentation För BTH Digitala Medier 2009-01-09
 
HT17 - DA156A - Introduktion till CSS
HT17 - DA156A - Introduktion till CSSHT17 - DA156A - Introduktion till CSS
HT17 - DA156A - Introduktion till CSS
 
Digital typografi @ Beckmans, december 2015
Digital typografi @ Beckmans, december 2015Digital typografi @ Beckmans, december 2015
Digital typografi @ Beckmans, december 2015
 
Anpassad kurs för Acudira AB
Anpassad kurs för Acudira ABAnpassad kurs för Acudira AB
Anpassad kurs för Acudira AB
 
Föreläsning 1: Grundläggande HTML
Föreläsning 1: Grundläggande HTMLFöreläsning 1: Grundläggande HTML
Föreläsning 1: Grundläggande HTML
 
HT18 - DA156A - Extra
HT18 - DA156A - ExtraHT18 - DA156A - Extra
HT18 - DA156A - Extra
 
VT2019 - DA355A - Intro HTML & CSS
VT2019 - DA355A - Intro HTML & CSSVT2019 - DA355A - Intro HTML & CSS
VT2019 - DA355A - Intro HTML & CSS
 
Spbl Fö7 Format, Text Och Html
Spbl Fö7   Format, Text Och HtmlSpbl Fö7   Format, Text Och Html
Spbl Fö7 Format, Text Och Html
 
4 html 2_ht13
4 html 2_ht134 html 2_ht13
4 html 2_ht13
 

Plus de bjornh

Info kexjobb-2013-11-11
Info kexjobb-2013-11-11Info kexjobb-2013-11-11
Info kexjobb-2013-11-11
bjornh
 
LIKT seminar on mobile learning
LIKT seminar on mobile learningLIKT seminar on mobile learning
LIKT seminar on mobile learning
bjornh
 
Location-based mLearning reminders
Location-based mLearning remindersLocation-based mLearning reminders
Location-based mLearning reminders
bjornh
 
Podcastseminarium
PodcastseminariumPodcastseminarium
Podcastseminarium
bjornh
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
bjornh
 
Web publishing and XHTML
Web publishing and XHTMLWeb publishing and XHTML
Web publishing and XHTML
bjornh
 
Device Independence
Device IndependenceDevice Independence
Device Independence
bjornh
 

Plus de bjornh (18)

Info kexjobb-2013-11-11
Info kexjobb-2013-11-11Info kexjobb-2013-11-11
Info kexjobb-2013-11-11
 
Info om masterval och kexjobb, medieteknik KTH VT2013
Info om masterval och kexjobb, medieteknik KTH VT2013Info om masterval och kexjobb, medieteknik KTH VT2013
Info om masterval och kexjobb, medieteknik KTH VT2013
 
Teaching procrastination - A way of helping students to improve their study h...
Teaching procrastination - A way of helping students to improve their study h...Teaching procrastination - A way of helping students to improve their study h...
Teaching procrastination - A way of helping students to improve their study h...
 
Info masterval medieteknik på KTH 2012-05-03
Info masterval medieteknik på KTH 2012-05-03Info masterval medieteknik på KTH 2012-05-03
Info masterval medieteknik på KTH 2012-05-03
 
Info masterval och kexjobb i medieteknik KTH HT 2011
Info masterval och kexjobb i medieteknik KTH HT 2011Info masterval och kexjobb i medieteknik KTH HT 2011
Info masterval och kexjobb i medieteknik KTH HT 2011
 
LIKT seminar on mobile learning
LIKT seminar on mobile learningLIKT seminar on mobile learning
LIKT seminar on mobile learning
 
Location-based mLearning reminders
Location-based mLearning remindersLocation-based mLearning reminders
Location-based mLearning reminders
 
K-Seminar on mobile learning
K-Seminar on mobile learningK-Seminar on mobile learning
K-Seminar on mobile learning
 
Podcastseminarium
PodcastseminariumPodcastseminarium
Podcastseminarium
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web publishing and XHTML
Web publishing and XHTMLWeb publishing and XHTML
Web publishing and XHTML
 
CSS
CSSCSS
CSS
 
XML Schemas
XML SchemasXML Schemas
XML Schemas
 
RDF och RSS
RDF och RSSRDF och RSS
RDF och RSS
 
Namespaces
NamespacesNamespaces
Namespaces
 
Device Independence
Device IndependenceDevice Independence
Device Independence
 
XSLT
XSLTXSLT
XSLT
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 

CSS

  • 1. CSS- Cascading Stylesheets Layout för webb och XML
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.