nilsmartin.no

 nilsmartin.no 

 

 


CSS (Stilsett)

CSS (Cascading Stylesheets) 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

Eksempel på animasjon med CSS:

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

Animasjonskode:

<style>
@keyframes animasjon {
0% {...}
100% {...}
}
</style>
<div style="
position: relative;
animation-name: animasjon;
animation-duration: 19s;
animation-iteration-count: infinite;
">
abc
</div>

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  JavaScript  Vevside  WWW  Internettordbok.html  CSSordbok.html 
<div>  =  <span style="display: block;">
Se også:  div  span  CSSordbok.html 
DOCTYPE  –  document type declaration er info om HTML-versjon.
Se også:  DOCTYPE   HTML  CSSordbok.html 
DOM  –  Document Object Model er en struktur som nettleseren lager etter å ha lest et HTML-dokument.
Se også:  DOM  HTML  HTMLordbok.html  CSSordbok.html 
DTD  –  Document type definition.
Se også:  DTD  HTML  CSSordbok.html 
Fnutter  –  finnes av to typer;   '  enkelfnutt og  "  dobbelfnutt.
Se også:  Fnutter  Internettordbok.html 
Font  –  brukes unøyaktig om nesten all typografisk skrift.
Se også:  Font  Skrifttype  Skriftfamilie  CSSordbok.html 
HTML  –  Hyper Text Markup Language.
Se også:  HTML  CSS  JavaScript  Vevside  W3C  WWW  Internettordbok.html  HTMLordbok.html  CSSordbok.html  HTML.html 
JavaScript  –  er et skriptspråk som kan brukes til å programmere websider.
Se også:  JavaScript  CSS  HTML  SVG  Vevside  Javaskript.html  JavaskriptOrdbok.html  Internettordbok.html 
Kommentarer  –  er som i programmerinsspråk som Javaskript, PHP, C, C++ og Java.
// dobbelslash, kommenterer en linje..
/* Kommentarer for en blokk. */
Se også:  Kommentarer  Javaskript.html  CSSordbok.html 
Lengdeenheter  –  kan være relative eller absolutte.
Se også:  Lengdeenheter  CSSordbok.html 
PHP  –  er et tjenerside-skriptspråk som kan brukes til å lage dynamiske og interaktive vev-sider.
Se også:  PHP  PHP.html  Internettordbok.html 
Ren tekst  –  er tekst uten formatering.
Se også:  Ren tekst  Unicode  Internettordbok.html 
Skriftfamilie  –  er en enhetlig stilmessig grunnmønster av et sett bokstaver, tall og tegn i flere varianter og skriftsorter.
Se også:  Skriftfamilie  Font  Skrifttype  CSSordbok.html 
Skrifttype  –  er en samling glyffer. Kalles også skriftfamilie, skiftsnitt, typesnitt (typeface). (Også skriftfont, fonttype, fontsnitt er brukt.)
Se også:  Skrifttype  Font  Skriftfamilie  CSSordbok.html 
<span>  =  <div style="display: inline;">
Se også:  span  div  CSSordbok.html 
SVG  –  Scalable Vector Graphics.
Se også:  SVG  CSS  HTML  JavaScript  XML 
Unicode  –  er en universell tegnkoding med alle verdens bokstaver og tegn.
Se også:  Unicode  HTML  Internettordbok.html 
Vevside  –  Webside. Nettside. Nettsted. Hjemmeside.
Se også:   Vevside  CSS  HTML  JavaScript  WWW  HTMLordbok.html  CSSordbok.html  Internettordbok.html 
Vevtjener  –  Webserver.
Se også:  Vevtjener  Internettordbok.html 
W3C  –  World Wide Web Consortium.
Se også:  W3C  WWW  CSSordbok.html  Internettordbok.html 
Webstandarder  –  er anbefalinger, ikke standarder.
Se også:  Webstandarder  Internettordbok.html 
WWW  –  Verdensveven. World Wide Web.
Se også:  WWW  CSS  HTML  Vevside  W3C  HTMLordbok.html  CSSordbok.html  Internettordbok.html 
XML  –  EXtensible Markup Language er en forenklet utgave av SGML.
Se også:  XML  Internettordbok.html 
Åpen kildekode  –  er åpen for innsyn fra alle, kan modifiseres av alle, kan gjenbrukes i annen programvare og fritt distribueres til andre.
Se også:  Åpen kildekode  Åpen standard  HTMLordbok.html  Internettordbok.html 
Åpen standard  –  er fritt tilgjengelig, fri bruk, avgiftsfri, plattformuavhengig.
Se også:  Åpen standard  Åpen kildekode  HTMLordbok.html  Internettordbok.html