cascading style sheets (css)
TRANSCRIPT
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