Embed Size (px)
Citation preview
F08 – CSS, Formatering
Dagens agenda
• Text
• Bakgrunder
- Bilder
- Färg
• Boxar
• Ramar
• Synlighet
• Block/inline
• Listor
CSS, Formatering
• Typsnittsegenskaper
• Textegenskaper
• Färg- och bildegenskaper
• Ramar
• Visningsegenskaper
• Layout
Med CSS kan vi enkelt påverka:
sans-serif
Text
Källa: Smashing Magazine (http://goo.gl/x2gq0)
serif
Font
h1 { font-family: "Helvetica", "Arial", sans-serif; } Allmän fontfamilj:
• serif
• sans-serif • cursive
• fantasy • monospace
Typsnitt:
Storlek:
h1 { font-size: 1.5em; }
Relativa storlekar:
em, 120%, smaller, larger...
1em ofta lika med 16px
Absoluta storlekar:
px, pt
Källa: Smashing Magazine
(http://goo.gl/x2gq0)
em vs. px Default i webbläsarna:
1em == 12pt == 16px == 100%
målstorlek / kontextstorlek = faktor
body { font-size: 100%; } /* 16px */
...
h2 { font-size: 1.25em; } /* 20px/16px = 1.25 */
Font
h1 { font: style variant weight size/line-height family; }
h1 { font: italic bold 0.8em/110% "Georgia", serif; }
font:
Kursiv text:
h1 { font-style: italic; } /* normal, oblique */
TEXT MED VERSALA SMÅ BOKSTÄVER:
h1 { font-variant: small-caps; } /* normal */
Fet text:
h1 { font-weight: bold; } /* normal, 100-900, lighter */
Text
Radavstånd: h1 { line-height: 120%; } /* normal, %, px, pt… */
Text-justering h1 { text-align: right; } /* left, justify, center.. */
Textdekoration
h1 { text-decoration: underline; } /* line-through ...*/
Texttransformering
h1 { text-transform: uppercase; }
/* none, capitalize, lowercase */
Inte radbryta blanksteg:
h1 { white-space: nowrap; } /* normal, pre */
letter-spacing
word-spacing,
text-indent...
Exempel
Lorem ipsum dolor sit! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, diam voluptua.
Rubrikstorlek
18-29px
~2 * brödtextstorlek
Brödtext
12-14px
~1/2 * rubrikstorlek
Linjehöjd
~1.5 * brödtextstorlek
Bredd
~30 * linjehöjden
Källa: Smashing Magazine
(http://goo.gl/x2gq0)
Färg
Det finns 17 fördefinierade färger (enligt standarden):
Black #000000 (0,0,0) Green #008000 (0,128,0)
Silver #C0C0C0 (192,192,192) Lime #00FF00 (0,255,0)
Gray #808080 (128,128,128) Olive #808000 (128,128,0)
White #FFFFFF (255,255,255) Orange #FFA500 (255,165,0)
Maroon #80000 (128,0,0) Yellow #FFFF00 (255,255,0)
Red #FF0000 (255,0,0) Navy #000080 (0,0,128)
Purple #800080 (128,0,128) Blue #0000FF (0,0,255)
Fuchsia #FF00FF (255,0,255) Teal #008080 (0,128,128)
Aqua #00FFFF (0,255,255)
= Navy = #000080 = rgb(0, 0, 128)
0 0 128
Förgrund/bakgrund
p { color: navy; }
a { color: #000080; }
div { color: rgb(241, 23, 87); }
#top { color: #6C3; } /* Samma som #66CC33 */
.aside { color: #FFF; } /* Vitt */
a:hover { color: #000; } /* Svart */
Förgrundsfärg:
p { background-color: #9FC; }
a { background-color: transparent; }
Bakgrundsfärg:
Bakgrundsbilder
Händelser v32 Händelser v32
<h1 class="note">Händelser v32</h1>
h1.note {
background-image: url(note.png);
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */
background-position: top left; /* right, bottom, center … */
text-indent: 60px;
}
p { background: #9FC url(note.png) no-repeat top left; }
color image repeat position
Boxar
Detta är en box med text
div
p
h1
Detta är en box med text
border
padding
margin
width?
Boxens bredd?
Detta är en box med text
400px
90px
10px
width: 400px
div {
width: 400px;
height: 40px;
}
Margin, padding Padding: div {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 4px;
}
div {
padding: 10px 5px 20px 4px;
}
Margin: div {
margin-top: 10px;
…
}
div {
margin: 10px 5px 20px 4px;
}
h1 {
margin-left: auto;
margin-right: auto;
width:50%; }
div
h1
Borders
div {
border-style: dashed;
border-color: #0C9;
border-width: 5px;
}
div {
border: 5px dashed #0C9;
}
Exempel
div {
border-bottom-style: solid;
border-bottom-color: #0C9;
border-bottom-width: 5px;
}
div {
border-bottom: 5px solid #0C9;
}
Exempel
none, dashed, dotted,
double, groove, ridge,
solid, inset, outset
Overflow div {
width: 200px;
height: 100px;
overflow: visible;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
div {
width: 200px;
height: 100px;
overflow: hidden;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
default
div {
width: 200px;
height: 100px;
overflow: scroll; /* auto */
}
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Synlighet
#two {
display: none;
}
<div id="one">
<div id="two">
<div id="three">
<div id="one">
<div id="three">
Före Efter
#two {
visibility: hidden;
}
<div id="one">
<div id="two">
<div id="three">
<div id="one">
<div id="three">
block/inline
<a class="menu">
inline
.menu {
display: block;
}
<a class="menu">
.menu {
display: inline;
}
Fler värden finns, exempelvis list-item, table
Listor
ul {
border: 1px solid black;
border-bottom: none;
width: 200px;
margin:0; padding:0;
}
li {
list-style-type: none;
border-bottom: 1px solid black; }
li a {
display: block;
padding: 10px;
background-color: #9C9;
color: #EFE;
}
li a:hover{
color: #9C9;
background-color: #EFE; …}
Se demo
