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