CSS

75 %
25 %
Information about CSS
css

Published on November 1, 2007

Author: bjornh

Source: slideshare.net

Description

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

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

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=&quot;text/css&quot; href=&quot;b.css&quot;?> […] <p> Text visas med helvetica </p> […] Exempel: Förr Filen a.html […] <p> <font face=&quot;Helvetica&quot;> Text visas med helvetica </font> </p> […]

Exempel: Nu

Filen b.css

p {

font-family: Helvetica, sans-serif;

}

Filen b.html

<?xml-stylesheet type=&quot;text/css&quot; href=&quot;b.css&quot;?>

[…]

<p>

Text visas med helvetica

</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.

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=&quot;text/css&quot; href=&quot;b.css&quot; charset=&quot;ISO8859-1&quot; title=&quot;Mitt Stylesheet&quot; media=&quot;screen&quot;?>

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=&quot;text/css&quot;

href=&quot;b.css&quot;

charset=&quot;ISO8859-1&quot;

title=&quot;Mitt Stylesheet&quot;

media=&quot;screen&quot;?>

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=&quot;text/css&quot;> 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=&quot;stylesheet” type=&quot;text/css&quot; href=&quot;test.css”/> </head> <body> … </body> </html>

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=&quot;text/css&quot;>

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=&quot;stylesheet”

type=&quot;text/css&quot;

href=&quot;test.css”/>

</head>

<body>



</body>

</html>

Grundprincipen: Mönster -> Beteende 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. 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

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.

Mönster är exempelvis tagnamn.

Egenskaper kan vara font-storlek.

Exempel:

p {

font-family: Helvetica, sans-serif;

}

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

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

}

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

Exempel:

p > a {

font-size: Medium

}

p + a {

font-size: Medium

}

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

Exempel:

a-element med href=&quot;a.html&quot;

a[href=&quot;a.html&quot;] {font-size: Medium}

a-element som har ett href-attribut

a[href] {font-size: Medium}

a-element vars href innehåller delsträngen &quot;html&quot;

a[href~=&quot;html&quot;] {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: &quot;En banan!&quot;} Pseudo-klasser och pseudo-element matchar på olika typer av metainformation i XML-dokumentet. De separeras från element/attribut med ett kolon.

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: &quot;En banan!&quot;}

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

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: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.

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.

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%}

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 &quot;variabler&quot; som räknare, och därefter använda räknarens värde. p:before { content: counter(banan) &quot;. &quot;; counter-increment: banan } h1 { counter-reset: banan }

Det finns också möjligheter att använda &quot;variabler&quot; som räknare, och därefter använda räknarens värde.

p:before {

content: counter(banan) &quot;. &quot;;

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 &quot;klass&quot; för elementet ifråga. p.tomat { font-size:14pt } … <p class=&quot;tomat&quot;> Hej </p>

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.

p.tomat {

font-size:14pt

}



<p class=&quot;tomat&quot;>

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 */

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=&quot;text/css&quot; media=&quot;screen&quot;> @import &quot;/css/initial.css&quot;; @import &quot;/css/screen.css&quot;; </style> <style type=&quot;text/css&quot; media=&quot;print&quot;> @import &quot;/css/initial.css&quot;; @import &quot;/css/print.css&quot;; </style> </head> <body> <p class=&quot;test&quot;>Hejsan</p> </body> </html>

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=&quot;text/css&quot; media=&quot;screen&quot;>

@import &quot;/css/initial.css&quot;;

@import &quot;/css/screen.css&quot;;

</style>

<style type=&quot;text/css&quot; media=&quot;print&quot;>

@import &quot;/css/initial.css&quot;;

@import &quot;/css/print.css&quot;;

</style>

</head>

<body>

<p class=&quot;test&quot;>Hejsan</p>

</body>

</html>

Avancerat 5: mediatypen print Flera egenskaper finns, som gäller endast för mediatypen &quot;print&quot;. 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

Flera egenskaper finns, som gäller endast för mediatypen &quot;print&quot;. 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(&quot;beep.au&quot;) } För mer info se http://www.w3schools.com/css/css_ref_aural.asp

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(&quot;beep.au&quot;)

}

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

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.

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.

Add a comment

Related presentations

Related pages

Cascading Style Sheets – Wikipedia

Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet ...
Read more

CSS – SELFHTML-Wiki

CSS (Cascading Style Sheets, zu deutsch „Kaskadierende Stilvorlagen“) ist eine Formatierungssprache für HTML- und XML-Dokumente. Warum Sie Layouts mit ...
Read more

CSS Tutorial - W3 Schools - CSS

CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from ...
Read more

eGECKO Business Software vom Marktführer | CSS AG

Überzeugen Sie sich von eGECKO und CSS als Ihrem starken Partner. Nutzen Sie die zahlreichen Vorteile, die eine komplett integrierte Lösung in Ihrem ...
Read more

CSS lernen - Cascading Style Sheets für aktuelles Webdesign

CSS lernen - CSS ist für das Design von Websites zuständig Entstehung von CSS (Cascading Style Sheets) Das World Wide Web Konsortium (W3C) entwickelte ...
Read more

CSS 4 You - The Finest in Stylesheets

CSS 4 you - die deutsche Seite für Cascading Stylesheets (CSS) Dies ist eine nahezu komplette CSS-Referenz auf deutsch - ergänzt durch etliche Tipps ...
Read more

CSS Tutorial - Inhaltsverzeichnisgertutorial - HTML.net

CSS Tutorial - Inhaltsverzeichnis - HTML- und CSS-Tutorials - Erstellen Sie Ihre eigene Webseite
Read more

CSS - Cascading Style Sheets

World Wide Web Consortium's CSS Page that includes links to standards and other reference pages. Also includes news on CSS happenings.
Read more

CSS – Wikipedia

CSS steht als Abkürzung für: EDV: Cascading Style Sheets, eine Computersprache für die Gestaltung digitaler, vorwiegend Web-basierter Dokumente
Read more

Advigon Versicherung AG

Advigon.Krebs-SCHUTZ Die erste umfassende Versicherungslösung zu Krebs. Im Leben wünscht man sich vor allem Gesundheit. Obwohl man viel mit einer ...
Read more