Cascading style sheets (css)

Cascading Style Sheets (CSS)Stilmallar

Webbdesign 100PMarcus Weiderstål

Bromma Gymnasium

Vad är CSS?

• En stillmall för utformningen av hemsidan.• CSS tillåter både den som skapar dokumentet

och den som läser dem att använda sin egna stilmall

• Skrivs i HTML• Flera mallar kan användas (Huvudmall och

lokal mall)

Varför ska man använda CSS?

• W3C Standard• Externa dokument (snabbare laddning)• Mindre kod (snabbare laddning)• Syn- och hörselskadade

CSS-formatering på tre sätt.

• Extern CSS-mall• I dokumentet (<HEAD>)• Direkt där man vill ha funktionen.

Externa mallar(HTML-dokumentet)

<html><head><meta http-equiv=”Content-Type”

content=”text/html><title>Min hemsida</title><link href =”mall.css” rel=”stylesheet”

type=”text/css”></head>

Externa dokument (CSS-filen)

h1 { font-size: 24px; }

<h1> Text <h1>Ger:Text

Externa dokument (HTML-filen)

Att tänka på

Webbläsaren rankar kod. Därför måste du tabort alla attribut i HTML-dokumentet för att CSSska fungerar. Så här fungera rankingen:

1. HTML2. CSS-kod i element3. CSS-kod i dokument4. CSS i extern mall

MALL.CSSMALL.CSS

Index.HTML

Index.HTML

Flera sidor

Flera sidor

I och med att information om utseendeligger externt kan webbläsaren stänga avCSS så sidan blir tillgängligare för personermed funktionsnedsättning.

Vad kan man ställa in i CSS?

• Bakgrund• Text• Länkar• Border• Dimensioner• Positionering• Klassifikation• Olika egenskaper för olika taggar/attribut

Storlekar (repetition)

px - pixlar (pixels) - samma enhet som bildskärmars upplösningpt - Punkter (point) - 1 pt är lika med 1/72 inch in - tum (inch)cm - centimetermm - millimeterp - picas - 1 pc är lika med 12 punkter em - em - relativ till andra element ex - exs - en ex är x-höjden på ett tecken% - Procent - relativ till andra element

Tips

Använd dig av /* Rubrik(t ex. Text) */ när du arbetar i CSS för att få struktur koden.

Let’s break it down!

body {margin: 20px 0px 0px 0px;padding: 0;background: #191919 url(images/img07.jpg) no-repeat right top;font-family: Tahoma, Geneva, sans-serif;font-size: 11px;color: #3C3C3C;

} Man kan använda ”{” och ”}” på olika sätt när man skriver CSS-mallar.

Vissa väljer att göra som detta exempel då man även skriver så

här i java men det fungerar lika bra att skriva som exemplen innan.

Allt är helt enkelt en smaksak!

h1, h2, h3 {margin: 0;font-family: Arial, Helvetica, sans-serif;font-weight: normal;color: #CD3788;

}

h1 {font-size: 44px;

}

h2 {font-size: 18px;

}

h3 {}

Klasser (Class)

Klasser hjälper dig att ställa in attributen och hjälpattributen för text.

T. ex brödtext, ingress, rubrik osv.

CSS-Mallen (Class)

.textofrmat1 { color: #25decf }

.textformat2 { color: #1ec73a; font-size: 11px; font-family: Verdana, Arial, Helvetica }

HTML-dokumentet (Class)

<p class=”textformat2”> Text </p>

Eller:<p> text <span class=”textformat1”>lite mer

text</span> och ännu mera text </p>

Olika hjälpattribut för olika attribut/taggar

p {font-family: Verdana; font-size: 11px;}Td {font-family: Verdana; font-size: 13px;}Li {font-family: Verdana; font-size: 17px;}

Bakgrund

Body {background-color: #CCCC99;}

Body { background-image: url(bild.jpg);}

Body { background-image: url(bild.jpg); background-color: #CCCC99; font-family: Verdana; font-size: 11px; }

Body { background-image: (bild.jpg); background-reat: no-repeat }

Bakgrund

Med hjälp av CSS kan du ange exakt vart bakgrunden ska vara.

Kanske här? Eller här? Eller varför inte som ett mönster?

Menyer

Vi känner igen:a:link{color: #000000; text-decoration: none;}a:visited{color: #000000; text-decoration: none;}a:hover{color: #999999;}a:active{text-decoration: underline;}

Meny

Ingen CSS:<ul>

<li><a href="#">Meny 1</a></li><li><a href="#">Meny 2</a></li><li><a href="#">Meny 3</a></li><li><a href="#">Meny 4</a></li><li><a href="#">Meny 5</a></li></ul>

Meny

Stilmall.css:#meny li{list-style: square;}

Sida.HTML:<ul id="meny">

<li><a href="#">Meny 1</a></li><li><a href="#">Meny 2</a></li><li><a href="#">Meny 3</a></li><li><a href="#">Meny 4</a></li><li><a href="#">Meny 5</a></li></ul>

OnMouseOver

a:hover { color: #CC6600} a:hover { background-color: #99CCFF} a:hover { text-decoration: underline overline} a:hover { font-style: italic}a:hover { background-image: url(egen_bild.gif)} a:hover { letter-spacing: 5px} a:hover { cursor: help}a:hover { cursor: e-resize} a:hover { color: #FFFFFF; background-color: #006699}

Meny

#meny{margin-left: 0; padding-left: 0; list-style:none;}#meny li {padding-left: 10px;background: url(symbol.gif) no-repeat leftcenter;}

MENY

Genom att koppla Stilmall.CSS till listor kan man göra olika menyer

#meny{margin: 0; padding: 0; width: 18em; list-style-type: none; font-size: 70%; background: #CC9999;border-bottom: 1px solid #996666;}

#meny a{ display: block; width: auto; height: 100%; padding-left: 0.25em; padding-top: 0.25em; padding-bottom: 0.25em; text-decoration: none;border-top: 1px solid #996666; border-right: 1px solid #996666; border-left: 1px solid #996666;}

#meny a:link{color: #ffffff;}#meny a:visited{color: #ffffff;}#meny a:hover{background: #996666;}#meny a#current{background: #FFCC66; color: #000000;}

#meny{ width: 18em; margin: 0; padding: 0; list-style-type: none; font-size: 70%;}

#meny li{margin-bottom: 0.25em;}

#meny a{display: block; width: auto; height: 100%; background: transparent url(bg-toning.gif);padding: 0.25em; text-decoration: none; border: 1px solid #996666;}

#meny a:link{color: #333333;}#meny a:visited{color: #333333;}#meny a:hover{background: transparent url(bg-toning_over.gif);}#meny a#current{background: #FFCC66; color: #000000;}

meny{width: 192px; margin: 0px; padding: 0; list-style-type: none; font-size: 11px;}

#meny a{display: block; width: auto; height: 25px; background: transparent url(knapp.gif) no-repeat; text-decoration: none; padding: 5px 0 5px 10px;}

#meny a:link{color: #663333;}#meny a:visited{color: #663333;}#meny a:hover{background: transparent url(knapp_over.gif) no-repeat;}#meny a#current{color: #E6CCCC;}

SAMMANFATTNING

Cascading style sheets (css)

Documents