CSS-egenskapslista: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| Rad 47: | Rad 47: | ||
== B == | == B == | ||
=== <code>background</code> === | |||
En samlingsegenskap som sätter alla värden som har med bakgrunden att göra. | |||
=== <code>background-attachment</code> === | |||
Anger om en bakgrund ska fixeras eller om den ska skrollas med. | |||
=== <code>background-blend-mode</code> === | |||
Anger hur utritningen av en bakgrund ska mixas med annat material. Fungerar ungefär som Photoshops blendmodes. | |||
=== <code>background-clip</code> === | |||
Anger om bakgrunden ska sträcka sig in under eventuell kantlinje eller ej. | |||
=== <code> [[background-color]] </code> === | === <code> [[background-color]] </code> === | ||
Används för att ändra bakgrundsfärgen på ett element. | Används för att ändra bakgrundsfärgen på ett element. | ||
=== <code>background-image</code> === | |||
Anger en bild som ska användas som bakgrund. | |||
=== <code>background-origin</code> === | |||
Anger var någonstans i en bild som bakgrunden ska hämtas. Används om man vill ha en viss bit ur en större bild. | |||
=== <code>background-position</code> === | |||
Anger var i elementet bakgrunden ska placeras ut. | |||
=== <code>background-repeat</code> === | |||
Anger om en bakgrund ska repeteras eller ej. | |||
=== <code>background-size</code> === | |||
Storleken på eventuell bakgrund. | |||
=== <code> [[border]] </code> === | === <code> [[border]] </code> === | ||
| Rad 73: | Rad 100: | ||
=== <code> [[border-collapse]] </code> === | === <code> [[border-collapse]] </code> === | ||
Anger hur kanterna i tabellelement ska falla samman. | |||
=== <code> [[border-color]] </code> === | === <code> [[border-color]] </code> === | ||
| Rad 78: | Rad 106: | ||
=== <code> [[border-image]] </code> === | === <code> [[border-image]] </code> === | ||
En samlingsegenskap som används för att sätta allt som har att göra med grafik i kantlinjer. | |||
=== <code> [[border-image-outset]] </code> === | |||
Anger hur långt utanför kantlinjen som grafiken ska sticka ut. | |||
=== <code> [[border-image-repeat]] </code> === | |||
Anger om grafiken i en kantlinje ska repeteras eller ej. | |||
=== <code> [[border-image-slice]] </code> === | |||
Ange om grafiken för en kantlinje ska använda sig av så kallad nine-slice. | |||
=== <code> [[border-image-source]] </code> === | |||
Anger URL:en som leder till grafiken för en kantlinje. | |||
=== <code> [[border-image-width]] </code> === | |||
Anger bredden på grafiken för en kantlinje. | |||
=== <code> [[border-*|border-left]] </code> === | === <code> [[border-*|border-left]] </code> === | ||
| Rad 132: | Rad 176: | ||
=== <code> [[bottom]] </code> === | === <code> [[bottom]] </code> === | ||
Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet. | Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet. | ||
=== <code> [[box-shadow]] </code> === | |||
Används för att skapa en, eller flera, skuggor kring en box. | |||
=== <code> [[box-sizing]] </code> === | |||
Väljer vilken [[boxmodellen|boxmodell]] som ska gälla för ett blockelement. | |||
=== <code> [[break-after]] </code> === | |||
Anger om det ska ske en brytning efter ett skapat element. | |||
=== <code> [[break-before]] </code> === | |||
Anger om det ska ske en brytning före ett skapat element. | |||
=== <code> [[break-inside]] </code> === | |||
Anger om det ska ske brytningar ska kontrolleras inuti ett skapat element. | |||
== C == | == C == | ||
Versionen från 28 augusti 2015 kl. 08.18
Här är en lista på de flesta CSS-egenskaperna. Då CSS är en ständigt föränderlig standard (eller snarare flera standarder), täcker inte denna lista alla möjligheter. Dock så bör detta vara ett bra urval.
(Den här sektionen håller på att utökas kontinuerligt. I takt med att andra sektioner på Webbling nämner CSS-egenskaper, läggs dessa till här)
Det finns även en hel del CSS-egenskaper som är specifika till olika webbläsare. Generellt sett bör man undvika att använda sig av dessa och hålla sig till de som är standardiserade. Då blir din webbsida mer framtidssäker och mer tillgänglig för dina användare.
A
Styr hur innehållet i flexboxar ska läggas ut när det inte får plats på en enda rad. Påverkar enbart om flex-wrap: wrap gäller för flexbehållaren. Se flexbox grunder och avancerad flexbox för mer information.
Justerar hur en flexbehållares innehåll placeras ut längs med korsaxeln. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.
Styr hur ett individuellt flexföremål ska placeras ut längs med korsaxeln. Används oftast då man vill undanta ett element från det som satts med align-items. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.
Nollställer alla egenskaper, förutom direction och unicode-bidi.
animation
Samlingsegenskap som används för att sätta alla animationsegenskaper samtidigt.
animation-delay
Anger hur lång tid som ska förflyta innan animationen börjar spelas.
animation-direction
Anger om animationen ska spelas baklänges varannan cykel (pingpong-animation).
animation-duration
Anger hur lång tid en animationscykel ska ta.
animation-fill-mode
Anger på vilket sätt de animerade egenskaperna ska sättas på elementet, såväl före som efter animationen körs.
animation-iteration-count
Anger hur många gånger en animation ska spelas upp innan den avslutas helt.
animation-name
Anger namnet på en animationssekvens.
animation-play-state
Anger om en animation spelas upp eller om den är stoppad.
animation-timing-function
Anger vilken tidsfunktion som ska användas när en en animation spelas upp.
B
background
En samlingsegenskap som sätter alla värden som har med bakgrunden att göra.
background-attachment
Anger om en bakgrund ska fixeras eller om den ska skrollas med.
background-blend-mode
Anger hur utritningen av en bakgrund ska mixas med annat material. Fungerar ungefär som Photoshops blendmodes.
background-clip
Anger om bakgrunden ska sträcka sig in under eventuell kantlinje eller ej.
Används för att ändra bakgrundsfärgen på ett element.
background-image
Anger en bild som ska användas som bakgrund.
background-origin
Anger var någonstans i en bild som bakgrunden ska hämtas. Används om man vill ha en viss bit ur en större bild.
background-position
Anger var i elementet bakgrunden ska placeras ut.
background-repeat
Anger om en bakgrund ska repeteras eller ej.
background-size
Storleken på eventuell bakgrund.
Används för skapa en kantlinje runt ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjer att göra (förutom border-radius och border-image).
Används för skapa en kantlinje på botten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.
Används för att sätta linjefärgen på en kantlinje på botten av ett element.
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, vänstra hörnet.
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.
Används för att sätta linjetyp på en kantlinje på botten av ett element.
Används för att sätta bredden på en kantlinje på botten av ett element.
Anger hur kanterna i tabellelement ska falla samman.
Används för att sätta linjefärgen på en eller flera kantlinje på ett element.
En samlingsegenskap som används för att sätta allt som har att göra med grafik i kantlinjer.
Anger hur långt utanför kantlinjen som grafiken ska sticka ut.
Anger om grafiken i en kantlinje ska repeteras eller ej.
Ange om grafiken för en kantlinje ska använda sig av så kallad nine-slice.
Anger URL:en som leder till grafiken för en kantlinje.
Anger bredden på grafiken för en kantlinje.
Används för skapa en kantlinje på vänsterkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.
Används för att sätta linjefärgen på en kantlinje på vänstersidan av ett element.
Används för att sätta linjetyp på en kantlinje på vänstersidan av ett element.
Används för att sätta bredden på en kantlinje på vänstersidan av ett element.
Används för att sätta skapa rundade hörn på ett element.
Används för skapa en kantlinje på högerkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.
Används för att sätta linjefärgen på en kantlinje på högersidan av ett element.
Används för att sätta linjetyp på en kantlinje på högersidan av ett element.
Används för att sätta bredden på en kantlinje på högersidan av ett element.
Används för skapa en kantlinje på toppen av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.
Används för att sätta linjetypen på en eller flera kantlinje på ett element.
Används för att sätta linjefärgen på en kantlinje på toppen av ett element.
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det övre, vänstra hörnet.
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.
Används för att sätta linjetyp på en kantlinje på toppen av ett element.
Används för att sätta bredden på en kantlinje på toppen av ett element.
Används för att sätta linjebredden på en eller flera kantlinje på ett element.
Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position som angetts för elementet.
Används för att skapa en, eller flera, skuggor kring en box.
Väljer vilken boxmodell som ska gälla för ett blockelement.
Anger om det ska ske en brytning efter ett skapat element.
Anger om det ska ske en brytning före ett skapat element.
Anger om det ska ske brytningar ska kontrolleras inuti ett skapat element.
C
Används för att ändra förgrundsfärgen på ett element. Mestadels är detta för att förändra textfärgen, men även andra egenskaper påverkas...
D
E
F
G
H
Används för att ange höjden på ett blockelement. Fungerar lite olika beroende på vilken boxmodell man valt.
I
J
Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.
K
L
Anger hur den vänstra hörnet ska placeras på ett positionerat element.
Anger hur mycket utrymme som ska vara mellan varje bokstav.
Anger höjden på textrader.
En samlingsegenskap för list-style-type, list-style-image och list-style-position.
Anger en bild som ska användas för att markera innehållsraderna i en lista.
Anger var innehållsmarkeringen ska placeras i en lista.
Anger hur vilken typ av innehållsmarkering som ska användas i en lista.
M
Anger hur mycket yttermarginal ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta marginalerna för alla sidor på samma gång. Se även boxmodellen för mer information.
Anger den nedre yttermarginalen på ett element.
Anger den vänstra yttermarginalen på ett element.
Anger den högra yttermarginalen på ett element.
Anger den övre yttermarginalen på ett element.
Anger den maximala höjden på ett element.
Anger den maximala bredden på ett element.
N
O
Anger hur genomskinligt ett element ska vara. Detta påverkar allt innehåll i elementet.
Anger i vilken ordning ett "flexibelt" element ska placeras i förhållande till övriga flexibla element.
Anger att man vill att det ska ritas en konturlinje kring ett element. Detta påminner om kantlinjer, men är till för att dra uppmärksamheten till sig och visa att något är speciellt med elementet. Detta är en samlingsegenskap där alla outline-egenskaper går att sätta samtidigt.
Anger färgen på konturlinjen kring ett element.
Anger hur långt ifrån elementet konturlinjen ska ritas.
Anger med vilken linjetyp konturlinjen ska ritas, t.ex. streckad eller heldragen.
Anger bredden på konturlinjen.
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför. Om man t.ex. vill få upp en scrollbar eller liknande. Detta är en samlingsegenskap som gäller såväl horisontellt som för vertikalt.
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i X-led. Om man t.ex. vill få upp en scrollbar eller liknande.
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i Y-led. Om man t.ex. vill få upp en scrollbar eller liknande.
P
Anger hur mycket utfyllnad ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta utfyllnaden för alla sidor på samma gång. Se även boxmodellen för mer information.
Anger hur mycket utfyllnad som ska finnas i botten av ett element. Se även boxmodellen för mer information.
Anger hur mycket utfyllnad som ska finnas på vänstra sidan av ett element. Se även boxmodellen för mer information.
Anger hur mycket utfyllnad som ska finnas på högra sidan av ett element. Se även boxmodellen för mer information.
Anger hur mycket utfyllnad som ska finnas i toppen av ett element. Se även boxmodellen för mer information.
Anger om en sidbrytning ska läggas till efter ett element. Elementet kan inte vara tomt eller positionerat.
Anger om en sidbrytning ska läggas till före ett element. Elementet kan inte vara tomt eller positionerat.
Anger om en sidbrytning får förekomma inuti ett element. Elementet kan inte vara tomt eller positionerat.
Används för att styra perspektivet på 3D-element.
Används för att styra perspektivet på 3D-element.
Q
Anger vilken typ av citationstecken som ska användas för citat.
R
Anger om ett elements storlek ska kunna ändras av användaren.
Anger var den högra kanten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position som angetts för elementet.
T
Anger hur stort utrymme ett tabb-tecken ska uppta.
Anger vilken algoritm som ska användas för att skapa layouten för en tabell.
Anger hur elementet ska placeras horisontellt i relation till andra element.
Anger hur den sista textraden i ett elementet ska placeras horisontellt i relation till andra element.
Används för att sätta olika typer av textstilar, såsom t.ex. understrykning. Detta är en samlingsegenskap som kan användas för att sätta alla text-decoration-egenskaperna på en gång.
Anger färg på understrykningar och liknande textutsmyckningar.
Anger vilken typ av linje som ska läggas till på en text, t.ex. en understrykning.
Anger vilken typ av linje som ska läggas till på en text, t.ex. dotted för en punkt-linje.
Anger hur den första textraden i ett stycke ska indenteras.
Anger hur ett text stycke ska justeras, t.ex. center-justering eller höger-justering.
Anger hur text som flödar ut ur ett element ska hanteras, t.ex. om den ska klippas av och inte visas.
Anger en, eller flera textskuggor.
Anger om en text ska omvandlas så den visas med t.ex. enbart versaler.
Anger var den toppen på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position som angetts för elementet.
U
Anger hur sidan ska hantera text som är skriven i olika riktningar, t.ex. om man blandar arabiska och svenska på samma sida.
V
Anger hur ett element av typen inline eller table-cell ska placeras vertikalt i relation till dess föräldraelement.
Anger om ett element är synligt eller ej. Även om det inte är synligt så tar det upp plats i sidan.
W
Anger hur white space (dvs, mellanslag, tabs, return osv) ska hanteras i ett element.
Används för att ange bredden på ett blockelement. Fungerar lite olika beroende på vilken boxmodell man valt.
Anger hur ord ska avstavas när en rad blir för lång.
Anger storleken på mellanrummet mellan ord.
Anger om ord ska avstavas när en rad blir för lång
Z
Styr hur olika element ska överlappa. Förflyttar elementen längs en tänkt Z-axel.