Nils Martin Aslaksen.

CSS (Cascading Stylesheets)

CSS er stilsett som utfyller HTML i vev-dokumenter.

Ideen er at innhold og utseende skal være adskilt:
– HTML-markeringene skal beskrive selve informasjonen i dokumentet.
– CSS skal beskrive utseende, slik som formatering (eks. skrifter, farger) og strukturer.
Dermed blir innhold og utseende separert. Vevleseren kan da vise innholdet i dokumentet på ulike måter i forskjellige media. F.eks. en stil tilpasset utskrift, lysbilder, pdf, osv.

Fonter

font-family er en proritert liste av skrifter. F.eks. slik:
font-family: Arial Helvetica Tahoma Verdana sans-serif.
font-family: Georgia Times New Roman Times Trebuchet MS Trebuchet serif.
font-family: Courier New Courier monospace.
font-family: Comic Sans MS.
Generiske fonter er serif  sans-serif  monospace  cursive  og fantasy.
Alle fonter er ikke tilgjengelig på alle maskiner. Fontene spesifiseres i prioritert rekkefølge. Nettleseren bruker den første om den kan, deretter nummer to, osv. Det er en god vane å avslutte med en generisk font, i tilfelle de andre skriftene ikke kan vises.

font-size: xx-small x-small smaller small medium large larger x-large xx-large 120% 1.2em.
font-weight: lighter  normal  bold  bolder 
font-variant: small-caps.
font-style: normal  italic  oblique.

Tekst

word-spacing: 1em;

letter-spacing: 0.5em;

text-decoration: none  underline  overline   line-through.

text-transform: capitalize  uppercase  lowercase  none.

text-align: left center right

text-indent: 2em | 20px | 2%;

line-height: normal | 2 | 2em | 20px | 200%;


Farger

Forhåndsdefinerte farger i CSS:
aqua   black   blue   fuchsia   gray   green   lime   maroon   navy   olive   purple   red   silver   teal   white   yellow.

Cursor

auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help.

Border

solid    dotted   dashed    double    groove    ridge    inset    outset .

 


Bakgrunner

background-color: bestemmer bakgrunnsfargen i et element.
Eks: background-color: yellow | #D0D0D0 | transparent.
background-image bestemmer bakgrunnsbildet i et element.
Eks: background-image: url | none;
background-repeat bestemmer hvordan bakgrunnsbilder skal repeteres i et element.
Eks: background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-position bestemmer posisjonering av bakgrunnsbilder.
Eks: 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;
background-attachment bestemmer om bakgrunnsbildet skal ligge fast, altså om bakgrunnsbildet skal ligge fast når man scroller, eller skal følge med i scrollingen.
Eks: background-attachment: scroll | fixed;

Bokser

boks

margin | padding | border-width | border-style | border-color | width | height | line-height | display.

Posisjonering

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

Media

@media screen{}
@media print{}
@media projection{}

Animasjon

Animasjon er en gradvis endring fra en stil til en annen.

Animasjonskode:

<style> @keyframes animasjon {...} </style>

<div> abc </div>

Eksempel:

abc

Transformasjoner

transform: translate | rotate | scale | skewX | skewY | matrix;

CSS3

CSS3 er en familie spesifikasjoner, med en tjuetalls moduler. F.eks:
 –  Bokser med avrundede hjører.
 –  Flerkolonne utlegg, tekst som strekker seg fra en kolonne til en annen.
 –  Bedre støtte for utskrifter (bl.a. sidenr.)
 –  Web-fonter gir mulighet for et uendelig antall fonter. En kan f.eks. lage helt egne fonter som vises riktig i alle weblesere.
 –  Animasjon.

Fordeler

– CSS gir forfatteren (og brukeren) mulighet til å angi hvordan HTML-dokumenter skal vises, enten i HTML-dokumentet, eller i en egen CSS-fil.
– All layout-informasjonen kan ligge i noen få CSS-filer; og ved å endre en av disse kan man endre utseendet på mange HTML-dokumenter.
– Brukeren skal nemlig kunne angi sine egne stilsett som skal gjelde i tillegg til de som er angitt av forfatteren.
– Slik kan en svaksynt bruker f.eks. angi at all tekst skal vises i dobbel størrelse, mens resten av reglene fra forfatterens stilsett beholdes.

Historikk

Sommeren 1996. Internet Explorer 3 var først ute med støtte for CSS.

Desember 1996. CSS level 1 var den første offisielle utgaven.

12.05.1998. CSS 2 spesifikasjonen ble vedtatt som standard.

1999. CSS 3. Det første utkastet.

2011. CSS 3. De fleste nettlesere støttet mange funksjoner.

07.06.2011. CSS Color Module Level 3 ble publisert. Tilbyr nye og mer egnede måter å spesifisere farger og transparens for tekst, kantlinjer og bakgrunner.

07.06.2011. CSS 2.1 (Cascading Style Sheets Level 2 Revision 1) ble vedtatt og publisert som en offisiell standard.
Spesifikasjonen besto av alle CSS-egenskapene som var implementert på en samhandlende måte akkurat da. Det inkluderte rettelser av feil i CSS 2. Dette gjenkjennes blant annet i en ny definisjon av høyden og bredden til absolutt posisjonerte elementer og en ny beregning av clip-egenskapen. CSS 2.1 er egentlig en stor samling med formaterings-funksjonalitet. Bedre kvalitet og interoperabilitet.

07.06.2011. MathML for CSS Profile ble publisert. Gjør det enklere å presentere matematiske uttrykk på webben og få dem gjengitt korrekt.


Lenker

w3.org CSS-standarden.

w3schools.com CSS Tutorial.

css3.info CSS3 Selectors Test. Sjekk nettleserens kompatibilitet med CSS.

Validering: 
jigsaw.w3.org/css-validator

Ordliste

CSS  –  Stilsett (Cascading Stylesheets).
Se også:  CSS  HTML 
<span>  =  <div style="display: inline;">
Se også:  span  div 
<div>  =  <span style="display: block;">
Se også:  div  span 
DTD  –  Document type definition.
Se også:  DTD  HTML 
DOCTYPE  –  document type declaration er info om HTML-versjon.
Se også:  DOCTYPE   HTML 
DOM  –  Document Object Model.
Se også:  DOM  HTML 
Font  –  og skrifttype er nesten det samme.
Men font er skriftens tekniske format, (f.eks. Postscript og OpenType-format).
Skrifttypen (typeface) er skriftens form og kan finnes i forskjellige tekniske formater (fonter).
Font brukes unøyaktig om nesten all typografisk skrift.
Se også:  Font  Skrifttype  Skriftfamilie 
HTML  –  Hyper Text Markup Language er et markup-språk for å beskrive innholdet i hjemmesider på Internett.
Se også:  HTML  CSS  W3C 
JavaScript  –      er et skriptspråk som kan brukes til å programmere websider.
Se også:  JavaScript 
Kommentarer  –  er som i programmerinsspråket C.
/* Kommentarer for en blokk. */
// Kommentar for en linje.
Se også:  Kommentarer  
Lengdeenheter:
Relative enheter gir lengden i forhold til andre enheter og skalerer derfor bedre mellom ulike medier.
em – relativt til høyden av elementets font.
rem – relativt til rotelementet.
% – prosent.
px – pixel; avhenger av mediet. (1px = 1/96 av 1″.) For lavoppløselige medier er det en piksel. For høyoppløselige, f.eks. i utskrifter, kan det være flere piksler.
pt – point, (1/72″).
pc – pica (12 pt).
in – tomme (1″ = 96px = 2,54cm).
cm – centimeter.
mm – millimeter.
Absolutte enheter er faste og kan brukes på utskriftsmedier. De anbefales ikke brukt på skjerm fordi skjermer har stor variasjon.
Se også:  Lengdeenheter 
Skriftfamilie  –  er en enhetlig stilmessig grunnmønster av et sett bokstaver, tall og tegn i flere varianter og skriftsorter.
De fleste skriftfamilier består av rett og kursiv og varierende skriftsorter (normal, mager, halvfet, smal halvfet, bred halvfet, fet og kombinasjoner).
Eksempler: Garamond, Baskerville, Bodoni, Gill, Helvetica, Memphis.
Se også:  Skriftfamilie  Font  Skrifttype 
Skrifttype  –  er en samling glyffer (tegnens og bokstavenes fysiske utseende).
Kalles også skriftfamilie, skiftsnitt, typesnitt (typeface). (Også skriftfont, fonttype, fontsnitt er brukt.)
Skrifttypen er skriftens form og kan finnes i forskjellige tekniske formater (fonter).
Proporsjonale skrifttyper har ulik bredde. (F.eks. i og m.) Verdana er designet for optimal leselighet i skjermmedier.
Antikva er skrifttyper med seriffer og ulik bredde.
Grotesk (sans serif) er skrifttyper uten seriffer.
Skrivemaskinskrifter (monospace) er skrifttyper med lik bredde, kan være en praktisk f.eks. i tekstbaserte tabeller. (Courier er mest kjent.)
Skrifttypensens stil kan være en måte å utheve teksten på. F.eks. kursiv (italic) heller mot høyre.
Skrifttypensens vekt kan være en annen måte å utheve teksten på. F.eks. fet (bold), som ikke er en skrifttypen-versjon, men tyngden av den.
Se også:  Skrifttype  Font  Skriftfamilie 
SVG  –  Scalable Vector Graphics.
Se også:  SVG 
Vevside  –  Webside. (Web site.) Nettside. Nettsted. Hjemmeside. (Homepage.)
Se også:   Vevside  CSS  HTML  JavaScript  WWW 
W3C  –  World Wide Web Consortium.
Se også:  W3C  WWW 
WWW  –  World Wide Web. Verdensveven er en av vår tids største oppfinnelser.
Verdensveven tilbyr universell tilgjengelighet, ved at et dokument kan leses av, og lenkes til, av alle som har tilgang.
Se også:  WWW  W3C 

 

 

 

 

 

© 2016. Nils Martin Aslaksen.    validator.w3.org    jigsaw.w3.org     validator.w3.org