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.

The post CSS-egenskaper appeared first on Bloggdesign | Designa Din Blogg.