1 / 8

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets. Før Nu. HTML-koder for tekststruktur og for formatering. HTML-koder for tekststruktur. CSS-koder for formatering. Lettere at redigere mange sider Større uafhængighed af platform og software Renere kode

sari
Télécharger la présentation

CSS - Cascading Style Sheets

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. CSS - Cascading Style Sheets Før Nu HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering • Lettere at redigere mange sider • Større uafhængighed af platform og software • Renere kode • Mere kompakt kode - hurtigere at downloade og parse

  2. CSS-problemer Kun til nyere browsere: >= Internet Explorer 3.0 + (1996), Netscape 4.0 + (1997) Manglende standarder: IE og Netscape implementerer forskelligt • Løsningsmuligheder: • Layout siderne så de også er læselige uden css • Skriv meget enkle css’er • Skriv flere css’er og benyt JavaScript til browserkontrol • men ikke • dobbeltsæt af sider hhv med og uden css • css og HTML-formateringskoder i samme dokument

  3. CSS - 3 niveauer af cascading Selvstændig CSS-fil linket til HTML-filer Prioritet: 3 Indlejret CSS - dvs. CSS-blok i HTML-filen Prioritet: 2 Inline CSS-koder i HTML-koderne Prioritet: 1

  4. CSS i dokumentet Selvstændig fil <head> <link rel=STYLESHEET href="styles/stylesheets.css" type="text/css"> <title>...</title> </head> Indlejret <head> <style type="text/css"> <!-- P { font-size: 10pt; font-family: "Arial, Sans-Serif"; color: #000066 } H1 { font-size: 16pt; font-family: "Arial, Sans-Serif"; color: #990000 } --> </style> </head> Inline <divstyle="margin-left: 0.5in; font-size: 10pt"> </div> <spanstyle="font-weight: bold; background: #FFFF00">Tekst</span>

  5. CSS syntaks H2 {font-family:'Arial'; font-weight:bold; font-size:x-large;} SelectorPropertyValue elementegenskabværdi <li style="font-size:10pt; font-weight:bold"> H2 { font-family:'Trebuchet MS','Comic Sans MS','Arial', 'Sans-Serif'; font-weight: bold; font-size: x-large; color: #660066; }

  6. CSS arvelighed P { font-family: 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica'; font-weight: bold; font-size: 11pt; <P> … </P> color: #000066; position: relative;(Arves af P.small) margin-left: 1cm; } P.small { font-family: 'Arial', 'Sans-Serif'; font-weight: normal; font-size: 8pt; <P class=small> text-align: center; }

  7. CSS- generel klasse, specielle klasser .note { font-family: 'Arial', 'Sans-Serif'; font-size: 10pt; <P class=note> font-weight: normal; <blockquote class=note> color: #006600; } Specielle klasser for <a> A.link { color: #FFFF00 } A.visited { color: #990099 } A.active { color: #FF0000 }

  8. ”sikre” CSS-muligheder - i hovedtræk Font størrelse skrifttype udformning (vægt, stil) Tekst Linjeafstand Justering Indrykning udsmykning (u, s, sub, sup) Automatisk stort 1.bogstav Knibning bogst, ord Farver Tekstfarve Baggrundsfarve/billede Margin Margin, V og H, T og B Luft langs sider Layout Placering fra T, V Position ift. Dok., Overordnet element Mål på element H, B Synlig/skjult Udklip (gennemsigtigt omr.) Kasser Margin, V og H, T og B Luft langs sider Ramme-udformning Punktopstilling Punkt-udforming

More Related