CSS og classes
IT, 7.klasse

Presenter Notes

Dagsorden

  1. CSS
  2. class
  3. ...den fedeste hjemmeside
  4. Menuer
  5. Hjælpemidler

Presenter Notes

CSS
Hvad er det CSS gør?

Presenter Notes

CSS: class

 1 <!DOCTYPE html>
 2 <html>
 3 
 4  <head>
 5   <style>
 6    p.grim
 7    {
 8    color:pink;
 9    text-align: right;
10    background-color:yellow;
11    text-decoration:underline;
12    }
13   </style>
14  </head>
15 
16  <body>
17   <h1 class="grim">This heading will not be affected</h1>
18   <p class="grim">This paragraph will be center-aligned.</p> 
19  </body>
20 
21 </html>

Prøv at teste det øverste link

Presenter Notes

CSS: margin

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4   <style>
 5    body
 6    {
 7    margin:100px 50px;
 8    }
 9   </style>
10  </head>
11 
12  <body>
13   <p>This is a paragraph with no specified margins.</p>
14   <p class="margin">This is a paragraph with specified margins.</p>
15  </body>
16 
17 </html>

Prøv at teste det øverste link

Presenter Notes

Opgave:

  1. Ret tekst-farve, baggrundsfarve, margen osv. i dit index.html
  2. Vi mangler indhold! Find et emne eller brug et fra tidligere fx:
    • Fodbold
    • Musik
    • Spil
    • Bil
  3. Skriv minimum 300 ord om det, gerne i notepad++. Bare som almindelig tekst fil.
  4. Sæt din tekst op med html/css

Presenter Notes

Menu med CSS 1/2

HTML

1 <ul>
2 <li><a href="index.html">Hjem</a></li>
3 <li><a href="om.html">News</a></li>
4 <li><a href="kontakt.html">Contact</a></li>
5 </ul>

Presenter Notes

Menu med CSS 2/2

CSS

 1 ul
 2 {
 3 list-style-type:none;
 4 margin:0;
 5 padding:0;
 6 overflow:hidden;
 7 }
 8 li
 9 {
10 float:left;
11 }
12 a:link,a:visited
13 {
14 display:block;
15 width:120px;
16 font-weight:bold;
17 color:#FFFFFF;
18 background-color:#98bf21;
19 text-align:center;
20 padding:4px;
21 text-decoration:none;
22 text-transform:uppercase;
23 }
24 a:hover,a:active
25 {
26 background-color:#7A991A;
27 }

Presenter Notes

jsfiddle.net

Link til Mikkels jsfiddle

Presenter Notes

Copyright

Dette værk er licenseret under en Creative Commons Navngivelse-DelPåSammeVilkår 2.5 Danmark Licens

Eksternt materiale i form af linkede artikler, opgaver o.lign, se de respektive sider for deres ophavrettigheder.

Presenter Notes