CSS-egenskaper
Här har vi samlat de CSS-egenskaper vi har kunnat hitta, och de ska vara uppdaterade till CSS3. Så här har ni en lathund så att ni kan se vilka olika egenskaper ni kan välja när ni skriver egna CSS-klasser. Dock finns inte alla typer av egenskaper här, vi har uteslutit några som inte var så lätta att förklara och som är väldigt nya för CSS3. Vi hoppas i vilket fall att ni ska finna detta användbart!
BAKGRUNDER
Detta gäller inte bara hela bakgrunden på sidan, utan även bakgrunder på enskilda element, så som content, wrapper etc.
EGENSKAP | FÖRKLARING |
background | Om du använder denna så kan du lägga alla nedanstående i en förklaring/deklaration i CSS:en |
background-attachment | Bestäm om bakgrunden ska vara fixerad eller scrollas med när man scrollar ner på sidan |
background-color | Bestäm färg på bakgrunden |
background-image | Bestäm om det ska vara en bild som bakgrund istället för färg |
background-position | Bestäm första positionen för din bakgrund (vänster, höger, center etc.) |
background-repeat | Bestäm om bakgrunden ska upprepas eller ej, åt höger eller neråt osv. |
background-clip | Specificerar färgytan av bakgrunden |
background-origin | Specificerar positionen av bakgrundsbilder |
background-size | Specificerar storleken på bakgrundsbilder |
BORDERS
Borders översatt till svenska blir ram eller kantlinje, men innefattar också rundade kanter på ett element.
EGENSKAP | FÖRKLARING |
border | Om du använder denna så kan du lägga alla nedanstående i en förklaring/deklaration i CSS:en |
border-bottom | Bestäm storlek, stil & färg på en border under regeln |
border-bottom-color | Bestäm färg på en border under regeln |
border-bottom-left-radius | Definierar formen (rundad eller skarp) av den nedre, vänstra delen av bordern |
border-bottom-right-radius | Definierar formen (rundad eller skarp) av den nedre, högra delen av bordern |
border-bottom-left-radius | Definierar formen (rundad eller skarp) av den nedre, vänstra delen av bordern |
border-bottom-style | Bestäm stil (dashed, dotted, double, solid) på en border under regeln |
border-bottom-width | Bestäm storlek på en border under regeln |
border-color | Bestäm färg på en border runt (ovan, under, till höger & vänster) om regeln |
border-image | Bestäm bakgrundsbilden på en border runt (ovan, under, till höger & vänster) om regeln |
border-image-outset | Bestäm hur långt utanför regeln bildbordern ska vara |
border-image-repeat | Specificerar om bildbordern ska upprepas, vara stretch eller rounded (prova själv för att se vad som menas med det) |
border-image-slice | Specificerar hur stor bilden i bordern ska vara |
border-image-source | Specificerar en bild som ska fungera som border |
border-image-width | Specificerar tjockleken på en bildborder |
border-left | Bestäm storlek, stil & färg på en border till vänster om regeln |
border-left-color | Bestäm färg på en border till vänster om regeln |
border-left-style | Bestäm stil på en border till vänster om regeln |
border-left-width | Bestäm storlek på en border till vänster om regeln |
border-radius | Definierar formen (rundad eller skarp) av hela bordern |
border-right | Bestäm storlek, stil & färg på en border till höger om regeln |
border-right-color | Bestäm färg på en border till höger om regeln |
border-right-style | Bestäm stil på en border till höger om regeln |
border-right-width | Bestäm storlek på en border till höger om regeln |
border-style | Bestäm stil på en border runt (ovan, under, till höger & vänster) om regeln |
border-top | Bestäm storlek, stil & färg på en border ovanför regeln |
border-top-color | Bestäm färg på en border ovanför regeln |
border-top-left-radius | Definierar formen (rundad eller skarp) av den övre, vänstra delen av bordern |
border-top-right-radius | Definierar formen (rundad eller skarp) av den nedre, högra delen av bordern |
border-top-style | Bestäm stil på en border ovanför regeln |
border-top-width | Bestäm storlek på en border ovanför regeln |
border-width | Bestäm storlek på en border runt (ovan, under, till höger & vänster) om regeln |
BOXAR
Dessa gäller egentligen alla typer av element som är någon typ av box – exempel kan vara inläggen (content), menyn (side/aside) osv.
EGENSKAP | FÖRKLARING |
bottom | Specificerar att en box ska ligga i nederkanten |
clear | Anger vilka sidor av ett element där andra flytande element inte är tillåtna |
clip | Klipper ett absolut positionerat element |
display | Anger hur ett visst HTML-element ska visas |
float | Anger om en låda ska vara flytande eller ej |
height | Ställer in höjden för ett element |
left | Anger den vänsterpositionering av en positionerat element |
overflow | Anger vad som händer om innehåll svämmar över ett element (om text eller bild går utanför inläggen till exempel) |
overflow-x | Anger vad som händer om innehåll i ett element som svämmar över till höger eller vänster om elementet i fråga |
overflow-y | Anger vad som händer om innehåll i ett element som svämmar över undertill eller ovanför elementet i fråga |
padding | Ställer in all padding i en deklaration (man behöver alltså inte använda padding-left, padding-right – de nedan helt enkelt) |
padding-bottom | Ställer in nedre padding av ett element |
padding-left | Ställer in vänster padding av ett element |
padding-right | Ställer in höger padding av ett element |
padding-top | Ställer in övre padding av ett element |
position | Anger typen av positioneringsmetod som används för ett element (statisk, relativ, absolut eller fast) |
right | Anger högerjustering för ett positionerat element |
top | Anger toppjustering för ett positionerat element |
visibility | Anger om ett element är synligt eller ej |
width | Anger bredden av ett element |
vertical-align | Anger den lodräta justeringen av ett element |
z-index | Ställer in i vilken ordning elementet ska visa, trots att den läses in efter ett annat element kan den fortfarande ligga ovanför, så att säga |
FLEXIBLA BOXAR
Flexibla boxar är ett layout mode som innebär att sidan beter sig ”förutsägbart” när den ska anpassas efter skärmstorlek och olika bildskärmar.
EGENSKAP | FÖRKLARING |
align-content | Anger justering mellan raderna inuti en flexibel box när objekten inte använder allt tillgängligt utrymme |
align-items | Anger justering för objekt i en flexibel box |
align-self | Anger justering för utvalda objekt i en flexibel box |
display | Anger hur ett visst HTML-element ska visas |
flex | Anger längden av objektet, i förhållande till resten |
flex-basis | Anger den ursprungliga längden av ett flexibelt objekt |
flex-direction | Anger riktningen av de flexibla objekten |
flex-flow | En ”snabb-egenskap” för flex-direction och flex-wrap-egenskaper |
flex-grow | Anger hur mycket objektet kommer att växa i förhållande till resten |
flex-shrink | Anger hur objektet kommer att krympa i förhållande till resten |
flex-wrap | Anger om de flexibla objekten ska omge (wrap) eller ej |
justify-content | Anger justering mellan objekten i ett flexibelt element när objekten inte använder allt tillgängligt utrymme |
margin | Ställer in all marginal i en deklaration (man behöver alltså inte använda margin-left, margin-right – de nedan helt enkelt) |
margin-bottom | Ställer in nedre marginalen av ett element |
padding-left | Ställer in vänster marginalen av ett element |
padding-right | Ställer in höger marginalen av ett element |
padding-top | Ställer in övre marginalen av ett element |
max-height | Ställer in maxhöjden av ett element |
max-width | Ställer in maxbredden av ett element |
min-height | Ställer in minimumhöjden av ett element |
min-width | Ställer in minimumbredden av ett element |
order | Anger ordningen på ett flexibelt objekt, i förhållande till resten |
TEXTEGENSKAPER
Dessa är de egenskaper som finns för att modifiera text, men innefattar inte utseendet på texten.
EGENSKAP | FÖRKLARING |
hanging-punctuation | Anger om ett punkttecken ska placeras utanför line boxen |
hyphens | Anger hur man delar ord för att förbättra utformningen av layouten (tvingad text där det inte blir för mycket mellanrum mellan orden om det är för få ord) |
letter-spacing | Anger mellanrummet mellan varje bokstavspar (kerning) |
line-break | Förklaring saknas |
line-height | Anger radavstånd |
overflow-wrap | Förklaring saknas |
tab-size | Anger mellanrum mellan varje ord, stöds dock bara av Chrome i dagsläget |
text-align | Anger horisontell justering av text |
text-align-last | Beskriver hur den sista raden i ett block eller en linje precis innan en påtvingad radbrytning är i linje när text-align är ”justify” |
text-indent | Anger indrag för den första raden i ett textblock |
text-justify | Förklaring saknas |
text-transform | Anger om det ska vara gemener eller versaler i en text |
white-space | Anger hur white-space (vitt utrymme) inuti ett element hanteras |
word-break | Anger radbytningsregler för icke-CJK-skript (CJK = Chinese, Japanese & Korean) |
word-spacing | Ökar eller minskar utrymmet mellan ord i en text |
word-wrap | Tillåter långa, ”unbreakable” ord som ska brytas och lindas (wrap) till nästa rad |
TEXTDEKORATION
Dessa egenskaper specificerar om det är en linje under/över/genom ditt element eller ej.
EGENSKAP | FÖRKLARING |
text-decoration | Specificerar dekorationen till en text (en linje under/över/genom). |
text-decoration-color | Specificerar färgen på dekorationen. |
text-decoration-line | Specificerar vilken typ av linje det är (dashed, dotted, solid, double osv.) |
text-decoration-style | Specificerar vilken typ av linje som dekorerar elementet (overline, underline, linethrough, none osv.) |
text-shadow | Anger om det ska vara skugga på dekorationen (=linjen). |
text-underline-position | Anger positionen för understrykningen som ställs in med text-decoration. |
TYPSNITT
Dessa egenskaper specificerar på ett eller annat sätt typsnitten och det som hör till.
EGENSKAP | FÖRKLARING |
@font-face | En regel som tillåter webbplatser att ladda ner och använda andra typsnitt än de ”webbsäkra” typsnitten. |
@font-feature-values | Tillåter författarna att använda ett vanligt namn i font-variant-suppleant för funktionen som aktiveras på olika sätt i Opentype. |
font | Ställer alla typsnittsegenskaper i en enda deklaration. |
font-family | Anger typsnittsfamilj för text. |
font-feature-settings | Tillåter kontroll över avancerade typografiska funktioner i Opentype-teckensnitt. |
font-kerning | Styr användningen av kerning informationen (hur bokstäverna är placerade i förhållande till varandra). |
font-language-override | Styr användningen av språkspecifika tecken i ett typsnitt. |
font-size | Anger teckenstorleken på texten. |
font-size-adjust | Förklaring saknas. |
font-stretch | Väljer ett normalt, kondenserat eller expanderat typsnitt från en typsnittsfamilj. |
font-style | Anger stilen för text (ofta italic – alltså kursiv). |
font-synthesis | Förklaring saknas. |
font-variant | Anger om en text ska visas i ett gemena bokstäver. |
font-variant-alternates | Styr användningen av alternativa tecken associerade till alternativa namn som definieras i @font-feature-values. |
font-variant-caps | Styr användningen av alternativa tecken för versaler. |
font-variant-east-asian | Styr användningen av alternativa tecken för östasiatiska skript (t.ex. japanska och kinesiska). |
font-variant-ligatures | Kontrollerar att ligaturer och kontextuella former används i textinnehåll av elementen när det gäller. |
font-variant-numeric | Styr användningen av alternativa tecken för siffror, fraktioner och ordningsmarkörer. |
font-variant-position | Styr användningen av alternativa teckenvarianter av mindre storlek, som är placerade som upphöjda eller nedsänkta i förhållande till baslinjen på typsnittet. |
font-weight | Anger vikten av ett teckensnitt (alltså om det är fetstil eller ej = bold). |
SKRIVLÄGE
EGENSKAP | FÖRKLARING |
direction | Anger textriktning/skrivriktning. |
text-orientation | Definierar orienteringen av texten i en linje. |
text-combine-upright | Anger kombination av flera tecken i utrymmet för ett enstaka tecken. |
unicode-bidi | Används tillsammans med den direction för att ställa in eller returnera om texten ska åsidosättas för att stödja flera språk i samma dokument. |
writing-mode | Förklaring saknas. |
TABELLER
Dessa egenskaper specificerar tabeller.
EGENSKAP | FÖRKLARING |
border-collapse | Anger om tabellramar bör vara kollapsade eller ej. |
border-spacing | Anger avståndet mellan borders för angränsande celler. |
caption-side | Anger placeringen av en tabellrubrik. |
empty-cells | Anger om du vill visa borders och bakgrund på tomma celler i en tabell. |
table-layout | Ställer layout-algoritm som skall användas för en tabell. |
LISTOR & RÄKNARE
Dessa egenskaper specificerar listors och räknares utseende.
EGENSKAP | FÖRKLARING |
counter-increment | Ökar en eller flera räknare. |
counter-reset | Skapar eller återställer en eller flera räknare. |
list-style | Ställer alla egenskaper för en lista i en deklaration. |
list-style-image | Anger en bild som listans postmarkör. |
list-style-position | Anger om listpostens markörer ska visas innanför eller utanför innehållsflödet. |
list-style-type | Anger vilken typ av markör varje post i listan ska ha (ex circle, square, eller olika språks markörer). |
ANIMATIONER
Dessa egenskaper specificerar olika animationers utseende och egenskaper.
EGENSKAP | FÖRKLARING |
@keyframes | Anger animationskoden. |
animation | En förkortning för alla animeringsegenskaperna (utom animation-play-state och animering-fill-mode). |
animation-delay | Anger en fördröjning för starten av animeringen. |
animation-direction | Anger om animeringen bör spelas omvänt i varannan cykel. |
animation-duration | Anger hur många sekunder eller millisekunder en animation ska ta att slutföra en cykel. |
animation-fill-mode | Anger ett format för elementet när animeringen inte spelar (när den är färdig, eller när den har en fördröjning). |
animation-iteration-count | Anger antalet gånger en animering ska spelas. |
animation-name | Anger namnet på @keyframes-animationer. |
animation-play-state | Anger om animeringen är igång eller pausad. |
animation-timing-function | Anger hastighetskurva av en animering. |
TRANSFORMERING/OMVANDLING
Dessa egenskaper specificerar olika transformeringar/omvandlingar.
EGENSKAP | FÖRKLARING |
backface-visibility | Anger huruvida ett element ska vara synligt eller ej när det inte är innanför skärmen. |
perspective | Anger perspektiv på hur 3D-element ses. |
perspective-origin | Anger bottenläget av 3D-element. |
transform | Tillämpar en 2D- eller 3D-omvandling på ett element. |
transform-origin | Låter dig ändra position på transformerade element. |
transform-style | Anger hur kapslade element återges i 3D-rymden. |
ÖVERGÅNGAR
Dessa egenskaper specificerar olika transformeringar/omvandlingar.
EGENSKAP | FÖRKLARING |
transition | Anger alla de fyra övergångsegenskaperna i en egenskap. |
transition-property | Anger namnet på CSS-egenskapen som övergångseffekten är för. |
transition-duration | Anger hur många sekunder eller millisekunder en övergångseffekt tar att slutföra. |
transition-timing-function | Anger hastighetskurva för övergångseffekten. |
transition-delay | Anger när övergångseffekten kommer att starta. |
GRUNDLÄGGANDE ANVÄNDARGRÄNSSNITT
Dessa egenskaper specificerar de mest grundläggande delarna utav en webbplats (gränssnitt = det vi ser).
EGENSKAP | FÖRKLARING |
box-sizing | Berättar för webbläsaren vad dimensioneringsegenskaper (bredd och höjd) bör omfatta. |
content | Används med :before och :after pseudoelement, för att infoga genererat innehåll. |
cursor | Anger vilken typ av markör (alltså muspekaren) som ska visas. |
ime-mode | Förklaring saknas. |
nav-down | Anger hur navigationen sker när du använder pil-ned-knappen på tangentbordet. |
nav-index | Anger tabb-ordningen för element (alltså om användaren tabbar sig genom sidan). |
nav-left | Anger hur navigationen sker när du använder pil-vänster-knappen på tangentbordet. |
nav-right | Anger hur navigationen sker när du använder pil-höger-knappen på tangentbordet. |
nav-up | Anger hur navigationen sker när du använder pil-upp-knappen på tangentbordet. |
outline | Ställer alla konturegenskaperna i en deklaration. |
outline-color | Anger färgen på en kontur. |
outline-offset | Förklaring saknas. |
outline-style | Ställer in stilen för en kontur. |
outline-width | Ställer in bredden på en kontur. |
resize | Anger huruvida ett element är skalbart av användaren. |
text-overflow | Anger vad som ska hända när texten flödar utanför elementet. |