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.
bodykallas för selektor{ }kallas för deklarationsblockcolor: whitekallas för deklaration;separerar deklarationercolorkallas för namn på egenskap, eller kort bara egenskapwhitekallas 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
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; }
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; }