2013-12-17 1 CSS Cascading Style Sheets • Stilmallar eller formatmallar • Bestämmer utseendet på innehåll • Används för positionering av objekt (containrar) • Bestämma utseendet för hela webbplatsen Vad är CSS? • Lätt att underhålla • Mindre filstorlekar • Ökad tillgänglighet • Olika media • Större typografisk kontroll Varför ska vi använda CSS? Bara HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>L2</title> </head> <body> <h1>Rubrik nivå 1</h1> <h2>Rubrik nivå 2</h2> <p> Lorem ipsum ...</p> </body> Selektor { egenskap: värde;} h1 { text-align: center; } h2 { font-style: italic; } p { color: maroon; }
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
2013-12-17
1
CSSCascading Style Sheets
• Stilmallar eller formatmallar
• Bestämmer utseendet på innehåll
• Används för positionering av objekt (containrar)
• Bestämma utseendet för hela webbplatsen
Vad är CSS?
• Lätt att underhålla
• Mindre filstorlekar
• Ökad tillgänglighet
• Olika media
• Större typografisk kontroll
Varför ska vi använda CSS? Bara HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>L2</title></head>
<body><h1>Rubrik nivå 1</h1><h2>Rubrik nivå 2</h2><p> Lorem ipsum ...</p></body>
Selektor { egenskap: värde;}
h1 { text-align: center; }
h2 { font-style: italic; }
p { color: maroon; }
2013-12-17
2
Kombinerade selektorer
h1, h2 { text-align: center;color:#007FFF;/*Färger anges i RR GG BB*/
}
h2 { font-style: italic; }
p { color: maroon; }
Inline stil
<h1>Rubrik 1</h1><p style="font-family:Arial,
Helvetica, sans-serif; margin:15px; padding:1em; background-color:gray; width:10em; color:yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi ut aliquip ex eacommodo consequat.
</p>
Inbäddad stilmall
<head><title>Inline stilmall</title><style type="text/css" media="screen">
p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:1em;background-color:red;width:10em;color:black;}
</style></head>
Global stilmall
<head>
<title>Extern stilmall>
<link rel=”stylesheet” href=”minstilmall.css” media=”screen”>
<head>
<body>
<h1>Rubrik 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat. </p>
</body>
Global stilmall
@charset "utf-8";
p {font-family:Arial, Helvetica;margin:15px;padding:1em;background-color:gray;width:10em;color:white;}
h1 {margin:15px;}
CSS för skrivaren eller mobilen
<link rel=”stylesheet” href=”for_printer.css” media=”print”>
<link rel=”stylesheet” href=”mobile.css” media=”handheld”>
2013-12-17
3
CSS i Dreamweaver Formattera font
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 120%;
font-family:Arial, Helvetica, sans-serif;
}
Kantlinjer
h1
{
border-width: 1px;
border-style: dashed;
border-color: red;
}
Padding
p {
color: maroon;padding-top: 1em;padding-right: 2em;padding-bottom: 3em;padding-left: 4em;border-width: 1px;border-style: solid;border-color: blue;line-height: 130%;
}
Margin
p
{
color: maroon;
margin-top: 1em;
margin-bottom: 3em;
border-width: 1px;
border-style: solid;
border-color: blue;
line-height: 130%;
}
Class
Class specifierar en stil för flera element
p {color:black;} <p>Svart text<p>
p.varning {color:red;} <p class= ”varning”>Röd text<p>
.ok {color:green;} <h1 class=”ok”>Grön rubrik<h1>
<p class= ”ok”>Grön text<p>
2013-12-17
4
ID
ID är unikt för ett speciellt element
div {background-color:#999999;}
.varning {background-color:#990000;}
#grönarutan {background-color:#009900;}
<div><p>Vanliga divboxar har ljusgrå bakgrundsfärg<p></div>
<div class=”varning”><p>Alla varningsboxar har röd</p></div>
<div id=”varningsruta1”><p>Bara denna box har grön<p></div>
<div id="content">
<ul> <li>första alternativet</li>
<li>andra alternativet</li>
<li>tredje alternativet</li>
</ul>
</div>
Listor
Listor#content{
width:300px;
height:315px;
background-color:#CCC;
margin:50px auto;
border-color:#093;
border-width:medium;
border-style:dotted;
padding:25px;
}
ul{
list-style-type:square;
font-size:24px;
}
Listor
ul
{
list-style-image:url(hotdogs.jpg);
}
Listor
ul{
list-style-image:url(hotdogs.jpg);
}
li{margin-bottom:50px;
}
Listor#content{
width:300px;
height:315px;
background-color:#CCC;
margin:50px auto;
border-color:#093;
border-width:medium;
border-style:dotted;
padding:25px;
overflow:scroll;}
ul{
list-style-
image:url(campbell_hotdog_small.jpg);
font-size:24px;}
li{
margin-bottom:50px;}
2013-12-17
5
position:static
p#statiskposition
{
position: static;
border: 1px solid #333333;
}
position:relative
p{ border: 1px solid #333333; }
p#first{}
p#second{}
p#third{
position: relative;
left: 20px;
top: 30px;
}
p#fourth{}
position:absolute (rel. dok.)
p{ border: 1px solid #333333; }p#first{}p#second{}p#third{
border: 1px solid #f00;position: absolute;left: 20px;top: 30px;color:red;
}p#fourth{}
2013-12-17
6
position:fixed (rel. browser)
p{ border: 1px solid #333333; }p#first{}p#second{}p#third{
border: 1px solid #f00;position: fixed;left: 20px;top: 30px;color:red;font-weight: bolder;
}p#fourth{}
Z-index
<head>
<style>
#w3c{ position:absolute; left:0px; top:0px; z-index:-1; }
</style>
</head>
<body>
<h1>Z-index</h1>
<img id="w3c" src="w3css.gif" width="100" height="140" />
</body>
Float
<img src="godis.jpg" alt="godis">
<p id="first">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p id="second">
Ut wisi enim ad minim veniam, quis nostrudexerci tation ullamcorper suscipit lobortis nisl utaliquip ex ea commodo consequat. Duis autemvel …
p{}
img{ margin: 10px; }
p#first{}p#second{}p#third{}p#fourth{}
2013-12-17
7
float:left
p{ }
img{margin: 10px;float:left
}
p#first{}p#second{}p#third{}p#fourth{}
float:right
p{}
img{margin: 10px;float:right;
}
p#first{}p#second{}p#third{}p#fourth{}
Pseudoelement
• p:first-letter {font-size:36px}
• p:first-line {font-size:24px}
Länkar – 5 tillstånd
• Normal a:link
• Visited a:visited
• Hover a:hover
• Active a:active
• Focus a:focus
2013-12-17
8
<p> Lorem ipsum dolor sit amet, <a href="L8.html">consectetur</a>adipisicing elit, sed do eiusmod tempor incididunt ut labore <a href="L8.html">et dolore magna</a> aliqua. Ut enim ad <a href="http://www.tfe.umu.se">minim veniam</a>, quis nostrudexercitation ullamco laboris nisiut aliquip ex ea commodoconsequat. Duis aute irure dolorin reprehenderit in voluptatevelit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum </p>
a{color:blue;}
a:link
{color: red;}
a:visited
{color: green;}
a:hover
{color:black;font-weight:bold;
text-decoration:none;
border-bottom:1px solid blue;padding: .4em 0;
position: relative;background: yellow;}
Display
<body>
<img src="godis2.jpg" alt="godis">
<img src="godis2.jpg" alt="godis">
<img src="godis2.jpg" alt="godis">
<img src="godis2.jpg" alt="godis">
</body>
img{
display:inline;margin: 10px;
}
img{
display:block;
margin: 10px;
}
2013-12-17
9
Background position
#content{
width:300px;
height:315px;
margin:50px auto;
border-color:#093;
background-color:#06F;
padding:25px;
background-image:url(hotdogs.jpg);
}
No-repeat
#content{
width:300px;
height:315px;
margin:50px auto;
border-color:#093;
background-color:#06F;
padding:25px;
background-image:url(hotdogs.jpg);
background-repeat:no-repeat;
}
Background position
#content{
width:300px; height:315px;
margin:50px auto;
border-color:#093;
background-color:#06F;
padding:25px;
background-image:url(hotdogs.jpg);
background-repeat:no-repeat;
background-position:
bottom center;
}
Background position
#content{
width:300px;
height:315px;
margin:50px auto;
border-color:#093;
background-color:#06F;
padding:25px;
background-image:url(hotdogs.jpg);
background-repeat:no-repeat;
background-position:40%
60%;
}
Box-modellenHTML
<div id="content">
<h1>Rubrik 1</h1>
<p>Lorem ... </p>
</div>
CSS
#content { margin:10px;border:5px solid gray;background-color:blue;width:200px;padding:25px; }
h1 { color:white; }
p {font-family:Arial, Helvetica;margin:20px;padding:10px;border:10px dashed white;background-color:red;width:120px; }
<div id="content">
<h1> Rubrik 1</h1>
<p> Lorem ... </p>
</div>
Box-modellen – igen!
2013-12-17
10
@charset "utf-8";
#content{background-image:url(book.jpg);margin:50px;width:500px;padding-top:0px;padding-left:95px;padding-below:25px;}
p{font-family:Arial, Helvetica;margin:15px;padding:30px;padding-top:10px;margin:20px;width:120px;}
h1{font-family:Arial, Helvetica;margin:15px;padding:2px;padding-top:10px;padding-left:30px;margin:20px;width:120px;}
Related Documents
