Embed Size (px)
DESCRIPTION
CSS – CASCADING STYLE SHEETS. Separera utseenden från struktur och innehåll. CSS 2 & CSS 3 http://www.w3.org/TR/CSS2/ http://www.css3.info/. CSS – CASCADING STYLE SHEETS. Anpassa stilmallar efter användare och plattform Exempel på specialanpassade befintliga kategorier: - PowerPoint PPT Presentation
Citation preview
CSS – CASCADING STYLE SHEETS
Separera utseenden från struktur och innehåll.
CSS 2 & CSS 3http://www.w3.org/TR/CSS2/http://www.css3.info/
CSS – CASCADING STYLE SHEETS
Anpassa stilmallar efter användare och plattform
Exempel på specialanpassade befintliga kategorier:
•Aural – röst & ljudstyrd•Braille – punktskrift•Embossed – releiftext•Handheld – små portabla enheter•Print – för vanlig utskrift på papper•Projection - projektorer•Screen – för datormonitorer•Tv – för visning på TV-apparater
http://www.w3.org/TR/CSS2/media.html
CSS – KOPPLA MOT HTML
Direkt i HTML dokumentet<head><style> …din CSS kod</style><head>
Direkt i HTML taggarna<p style=”font-size: 150%”>Hej</p>
Externa stillmallar<link rel=“stylesheet” href=“default.css" type="text/css” media=“screen, tv”><link rel=“stylesheet” href=“print.css" type="text/css” media=“print”><link rel=“stylesheet” href=“mobile.css" type="text/css” media=“handheld”>
CSS – SYNTAX
h1 { color: blue;}
#logo { background-image: url(logo.gif); }
.newsItem { font-family: courier, sans-serif;}
a:visited { color: red; font-weight: bold;}
Referens till HTML element
Referens till unikt ID
Referens till en klass
Referens till en pseudoklass
Egenskap
Värde
http://www.howtocreate.co.uk/tutorials/css/syntax
CSS – SYNTAX
h1 {font-size: 30pt;color: green;}
<div id="header"><h1>Kurts bilskrot</h1>
</div>
<div id="content"><h1>Välkommen!</h1>
</div>
<div id="sidebar"><h1>Länkar</h1>
</div>
CSS – SYNTAX NÄSTLADE ELEMENT
<div id="header"><h1>FacePage</h1>
</div>
<div class=news"><div><h1>Bad news</h1><img src=“pic.jpg”></div>
</div>
<div id="sidebar"><p>Zvoschh</p><div>
<p>Hej</p></div>
</div>
#header h1 {color: green;
}
.news div img {max-height: 40px;
}
#sidebar p {color: green;
}
CSS – FÄRGER
Färger kan anges på fyra sätt:
•Färgnamn: blue, red, purple, orange, olive…•1-byte hexadecimalt: #FFF, #006, #0A0•2-byte hex: #FFFFFF, #000066, #00AA00•Decimalt: rgb(255,255,255), rgb(0,0,0)
http://ficml.org/jemimap/style/color/wheel.html
CSS – TEXT
fet eller vanlig stilfont-weight: bold;
kursiv eller vanlig stilfont-style: italic;
Understruken texttext-decoration: underline;
Anger textfärgcolor: #fff;
font-family anger vilket typsnitt som ska användasTypsnitten anges som en listaAnge alltid en generisk familj på slutet!EX.font-family: helvetica, arial, sans-serif;
CSS – TEXT – FONT-SIZE
Textstorlek – standardvärde 16px
Dynamiskaem en relativ textstorlek utgår från 16px = 1em% storleken sätts procentuellt 100% = 16px
Statiska storlekarpt används främst för stilmallar för utskrift 16px = 12ptpx sätter textstorleken statiskt exakt på pixelnivå
http://www.alistapart.com/articles/howtosizetextincss
EX. font-size: 1em;
CSS – POSITIONERING
RelativePlacerar elementet relativt till föregående element.
StaticPlacerar element som det vanligtvis hamnar utifrån HTML koden.
AbsolutePå ett bestämt avstånd från det element som är en nivå ovanför. (parent)
FixedPlacerar elementet utifrån från webbläsar fönstret
http://www.quirksmode.org/css/position.html
CSS – BOX MODELLEN
paddingmargintop/left
width
height
top/right
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie.css" /> <![endif]-->
http://virtuelvis.com/archives/2004/02/css-ie-only
CSS – BOX MODEL – IE problem
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
WC3 standardtotal width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE explorer
total width = margin-left + width + margin-right
CSS – HTML TAGG
<h1>Rubrik 1</h1> h1 {font-size: 200%;Color: #cc0011; }
+ =
HTML CSS
CSS – KLASSER & ID
<div id="gallery"><div class="imageHolder">1</div><div class="imageHolder">2</div><div class="imageHolder">3</div><div class="imageHolder">4</div><div class="imageHolder">5</div><div class="imageHolder">6</div><div class="imageHolder">7</div><div class="imageHolder">8</div><div class="imageHolder">9</div><div class="imageHolder">10</div><div id="galleryEnd"></div></div>
#gallery { border: 2px solid black; padding: 20px; width: 130px;}
.imageHolder { position: relative; float: left; width: 40px; height: 40px; background-color: Olive; border: 2px solid black; margin: 5px;}#galleryEnd { clear:both;}
+ =
HTML
CSS
CSS – PLANERA
RITA UPP PÅ PAPPER & NAMNGEANVÄND ”DIV”-taggar för uppdelning & positionering RELEVANT NAMNGIVNINGBEGRÄNSA ANTAL FÄRGER & TYPSNITT
CSS – DEBUG
Syntax felLogiska fel
.heading {position: absolute;margin-top: 50 px;margin-left: 95 px;widht: 370 px;text-align: center;color: white;font-family; "MS Serif“. "New York", serif;font-size: 140;}
<div id="heading"> <h1>Merry Christmas! <br />&<br /> A Happy New Year</h1></div>
