Cascading Style Sheet

Noen egenskaper

Nedenfor finner du, uten nærmere forklaring, en opplisting av noen av de mest egenskapene du kan bruke når du lager stilsett. Det finnes en god del flere. Sjekk hos W3Scools [1] .

Fonter

   font-family    : proritert liste av fonter
   font-style     : normal |italic | oblique
   font-variant   : normal | small-caps
   font-weight    : normal | bold | bolder |lighter |100 | 200 |... | 900
   font-size      : xx-small | x-small | small | medium |
                    large | x-large | xx-large | smaller | larger |
                    % | absolutt størrelse
   font           : alle font-egenskaper kan settes i en definisjon

Tekst

   color           : farge | #hex
   word-spacing    : normal | absolutt størrelse
   letter-spacing  : normal | absolutt størrelse
   text-decoration : none | underline | overline | line-through | blink
   text-transform  : none | capitalize | uppercase | lowercase
   text-align      : left | right | center | justify
   text-indent     : absolutt størrelse | %
   line-height     : normal | faktor | absolutt størrelse | %

Bakgrunnsbilder

   background-color      : farge | #hex | transparent
   background-image      : url | none
   background-repeat     : repeat | repeat-x | repeat-y | no-repeat
   background-attachment : scroll | fixed
   background-position   : top left | top center | top right |
                           center left | center center | center right |
                           bottom left | bottom center | bottom right |
                           x-% y-% | x-pos y-pos  
   
   (shorthand)
   background:            alle egenskapene kan settes i en definisjon i rekkefølgen over.
                          noen kan utelates, men rekkefølgen må være riktig

Lister

   list-style-type     : none | disc | circle | square | decimal |
                         decimal-leading-zero | lower-roman | upper-roman |
                         lower-alpha | upper-alpha | lower-greek | lower-latin |
                         upper-latin | hebrew | armenian | georgian |
                         cjk-ideographic |hiragana | katakana | hiragana-iroha |
                         katakana-iroha
   list-style-position : inside | outside
   list-style-image    : url | none
   
   (shorthand)
   list-style          : alle egenskapene kan settes i en definisjon i rekkefølgen over

Border/margin/padding

   margin-top
   margin-right
   margin-bottom
   margin-left          : auto | absolutt størrelse | %
   
   (shorthand)
   margin               : margin-top  margin-right  margin-bottom  margin-left

   padding-top
   padding-right
   padding-bottom
   padding-left         : absolutt størrelse | %
      
   (shorthand)
   padding              : padding-top  padding-right  padding-bottom  padding-left

   border-top-width
   border-right-width
   border-bottom-width
   border-left-width
   border-width         : thin | medium | thick | absolutt størrelse

   border-top-style
   border-right-style
   border-bottom-style
   border-left-style
   border-style         : none | hidden | dotted | dashed | solid | double |
                          groove | ridge | inset | outset

   border-top-color
   border-right-color
   border-bottom-color
   border-left-color    : farge | #hex
   border-color         : farge | #hex

   border-top           : border-top-width | border-style | border-color
   border-right         : border-right-width | border-style | border-color
   border-bottom        : border-bottom-width | border-style | border-color
   border-left          : border-left-width | border-style | border-color

   (shorthand)
   border               : border-width  border-style  border-color

   width
   height               : auto |absolutt størrelse | %
   line-height          : normal | antall | absolutt størrelse | %


   display              : none | inline | block | list-item | run-in |
                          compact | marker | table | inline-table |
                          table-row-group | table-header-group | 
                          table-footer-group |
                          table-row | table-column-group | table-column |
                          table-cell | table-caption

   cursor                : url | auto | crosshair | default | pointer | move |
                           e-resize | ne-resize | nw-resize | n-resize | 
                           se-resize |sw-resize | 
                           s-resize | w-resize | text | wait | help

Posisjonering

   float                : left | right | none
   clear                : left | right | both | none
   position             : static | relative | absolute | fixed | inherit

Lengdeenheter

   px    - pixel
   em    - høyden av elementets font
   ex    - høyden ab bokstaven x

   in    - inch, tomme
   cm
   mm
   pt    - point, 1pt=1/72 inch
   pc    - pica,  1pc=12 pt

   %

Dynamisk

Vi har i dette matrialet lagt en god del vekt på å beskrive sammenhengen mellom struktur, utseende og dynamikk. Modulen Javascript og CSS viser noen alternative måter å programmere stiler og stilendringer på.

<span> og <div>

De to elementen span og div er "som poteten"; de kan brukes til alt. Den prinsippielle forskjellen på de to er at div produserer et linjeskift før og etter innholdet, mens span presenterer sitt innhold på linja (inline). Vi kan lett endre disse forskjellene ved å sette display-stilen. F.eks. vil <div style="display:inline> </div> vil oppføre seg som en span, mens <span style="display:block> </span> vil oppføre seg som en div.

Hvis vi ser bort fra elementer som krever handling( lenker, inputfelter, etc) kan man spørre seg om man faktisk ikke kunne greie seg med en type element i HTML, f.eks. en div, og så kontrollere alt annet med CSS. Det er i hvert fall to årsaker til at dette neppe er en god ide:

• En del av elementene er det som ofte kalles semantiske. Det vil si at de ved navn og praksis signaliserer hva de inneholder. Dette er nyttig for søkemotorer og content management systemer.
• Elementene har en default stilangivelse som helt eller delvis passer for de fleste formål som navnet indikerer.