0038 stila sidan med CSS

Syntax i CSS

selektor { egenskap 1: värde 1; egenskap 2: värde 2; }

exempel

body { background-color: red; color: white; }

Ovanstående kods delar beskrivs nedan.

  • body kallas för selektor
  • { } kallas för deklarationsblock
  • color: white kallas för deklaration
  • ; separerar deklarationer
  • color kallas för namn på egenskap, eller kort bara egenskap
  • white kallas för värde

exempel - sätta flera värden på en gång

img { border-top-width: 1px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 4px; }

är likvärdigt med

img { border-width: 1px 2px 3px 4px; }

exempel - sätta värden parvis

img { border-top-width: 1px; border-right-width: 20px; border-bottom-width: 1px; border-left-width: 20px; }

är likvärdigt med

img { border: 1px 20px; }

selektorer

taggnamn { }

.klassnamn { } /klassnamn föregås av ./

#id { } /id föregås av #/

mer specifika selektorer

...

Hur skriver man i CSS för att ...

Färg och bakgrundsbild

Bakgrundsfärg

exempel

body { background-color: #5555ff; }

Bakgrundsbild

exempel

body { background: blue; /visas om ingen bild visas/ background: url('sökväg/till/filnamn.png'); }

Skala bakgrundsbilden för att fylla webbläsaren.

background-size: cover;

http://jsfiddle.net/uTHqs/ (using cover)

http://jsfiddle.net/HZ2FT/ (using contain)

Skala bakgrundsbilden för att webbläsare i både x- och y-led. Observera att bildens proportioner ändras. Exempel på JSFiddle.

background-image: url("bild.png"); //vw viewport width, vh viewport height background-size: 100vw 100vh;

Textfärg

exempel

body { color: blue; }

storlek på element

Boxmodellen

bild av boxmodellen för css

Boxmodellen

bredd

Observera att bredd sätts på innehållet, det vill säga content i figuren ovan.

width: 200px;

höjd

Observera att höjd sätts på innehållet, det vill säga content i figuren ovan.

height: 30px;

text

Mer om font på Mozilla Developer Network

textstorlek

font-size: 14px; font-size: small;

typsnitt

font-family: arial, san-serif; font-family: times, serif;

Om första typsnittet (arial) finns används det annars används nästa (san-serif) och så vidare om det finns fler.

textstil

...

placera innehåll (element) på sidan

...

centrera

centrera ett element horisontellt

exempel

div { width: 100px; margin-left: auto; margin-right: auto; }

Mer om margin

centrara en bild horisontellt

exempel

img { display: block; margin-left: auto; margin-right: auto; }

centrera text horisontellt i ett p-element

p { text-align: center; margin-left: auto; margin-right: auto; }

centrera mera

Mer information om hur element centreras finns på W3C