LateNite: 2015

Tuesday, November 10, 2015

Grunnleggende css

En kort oversikt over egenskaper som du bør kjenne til i css

  #myid {  /* et element med id="myid" */

    position:absolute;

    width:200px;

    height:200px;

    background: red;

    border: solid green 1px;

  .myclass {  /*  flere elementer med class="myclass" */

    position:relative;

    color:red;

    left: 0px;

    top: 30px;

   span {   /* alle span for 20% større skrift */

     font-size:1.2em;

   #knapp {

     background:blue;

   #knapp:hover {

     background:green;

Merk at vi her bruker tre forskjellige regler, en for et element med id, en for mange elementer med class og en for elementer av en gitt type (span).

Legg merke til at elementet knapp vil skifte farge til grønn når bruker plasserer peker over den.

Du bør også kjenne til funksjonene

rgb( rød,grønn,blå)
rgba( rød, grønn, blå, alpha)

Basis-struktur for en html side


<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="calendar.css">
  <script src="calendar.js"></script>
 </head>
 <body>
  <!-- buttons -->
  <button type="button" class="mybutton" id="prev_year"> &lt; </button>
  <button type="button" class="mybutton" id="next_year"> &gt; </button>
  <button type="button" class="mybutton" id="prev_month"> &lt; </button>
  <button type="button" class="mybutton" id="next_month"> &gt; </button>
  
  <!-- text display -->
  <div class="mytext" id="year">2015</div>  
  <div class="mytext" id="month">oktober</div>
  
  <!-- navn paa ukedager -->
  <div id="ukedager"></div>
  
  <!-- rammen rundt datoer (1..31) -->
  <div id="datoer"></div>
  
  <!-- en liten editor -->
  <div id="tinyed"></div>
  
  <script>
   // start script som tegner calendar
   setup();
  </script>
 </body>
</html>

Ting du bør merke deg med dette eksempelet

charset utf-8 er nødvendig for å kunne bruke øæå
bruk link til å koble sammen html + css
bruk script tag til å koble html + js
bruk kommentarer til å gruppere/forklare