CSS-egenskapslista: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
Rad 25: | Rad 25: | ||
=== <code> [[border-bottom-color]] </code> === | === <code> [[border-bottom-color]] </code> === | ||
=== <code> [[border-bottom-left-radius]] </code> === | === <code> [[border-bottom-left-radius]] </code> === | ||
=== <code> [[border-left]] </code> === | |||
Används för skapa en kantlinje längst med vänstra kanten av ett element. | |||
=== <code> [[border-left-color]] </code> === | |||
=== <code> [[border-left-left-radius]] </code> === | |||
=== <code> [[border-left-right-radius]] </code> === | |||
=== <code> [[border-left-style]] </code> === | |||
=== <code> [[border-right]] </code> === | |||
Används för skapa en kantlinje längst med högra kanten av ett element. | |||
=== <code> [[border-right-color]] </code> === | |||
=== <code> [[border-right-left-radius]] </code> === | |||
=== <code> [[border-right-right-radius]] </code> === | |||
=== <code> [[border-right-style]] </code> === | |||
=== <code> [[border-bottom-right-radius]] </code> === | === <code> [[border-bottom-right-radius]] </code> === | ||
=== <code> [[border-bottom-style]] </code> === | === <code> [[border-bottom-style]] </code> === | ||
Rad 31: | Rad 44: | ||
=== <code> [[border-color]] </code> === | === <code> [[border-color]] </code> === | ||
=== <code> [[border-image]] </code> === | === <code> [[border-image]] </code> === | ||
=== <code> [[border-top]] </code> === | |||
Används för skapa en kantlinje på toppen av ett element. | |||
=== <code> [[border-top-color]] </code> === | === <code> [[border-top-color]] </code> === | ||
=== <code> [[border-top-left-radius]] </code> === | === <code> [[border-top-left-radius]] </code> === |
Versionen från 21 augusti 2015 kl. 15.56
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.
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
align-content
Styr hur innehållet i flexboxar ska läggas ut längs med korsaxeln. Se flexbox grunder och avancerad flexbox för mer information.
align-items
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.
align-self
Styr hur ett individuellt flexföremål ska placeras ut längs med korsaxeln. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.
B
background-color
Används för att ändra bakgrundsfärgen på ett element.
border
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
).
border-bottom
Används för skapa en kantlinje på botten av ett element.
border-bottom-color
border-bottom-left-radius
border-left
Används för skapa en kantlinje längst med vänstra kanten av ett element.
border-left-color
border-left-left-radius
border-left-right-radius
border-left-style
border-right
Används för skapa en kantlinje längst med högra kanten av ett element.
border-right-color
border-right-left-radius
border-right-right-radius
border-right-style
border-bottom-right-radius
border-bottom-style
border-collapse
border-color
border-image
border-top
Används för skapa en kantlinje på toppen av ett element.
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-collapse
bottom
Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position
som angetts för elementet.
C
color
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
height
Används för att ange höjden på ett blockelement. Fungerar lite olika beroende på vilken boxmodell man valt.
I
J
justify-content
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
left
Anger hur den vänstra hörnet ska placeras på ett positionerat element.
letter-spacing
Anger hur mycket utrymme som ska vara mellan varje bokstav.
line-height
Anger den minimala höjden på rader inuti ett blockelement.
list-style
En samlingsegenskap för list-style-type
, list-style-image
och list-style-position
.
list-style-image
Anger en bild som ska användas för att markera innehållsraderna i en lista.
list-style-position
Anger var innehållsmarkeringen ska placeras i en lista.
list-style-type
Anger hur vilken typ av innehållsmarkering som ska användas i en lista.
M
margin
Anger yttermarginalen på ett blockelement.
margin-bottom
Anger den nedre yttermarginalen på ett blockelement.
margin-left
Anger den vänstra yttermarginalen på ett blockelement.
margin-right
Anger den högra yttermarginalen på ett blockelement.
margin-top
Anger den övre yttermarginalen på ett blockelement.
max-height
Anger den maximala höjden på ett blockelement.
max-width
Anger den maximala bredden på ett blockelement.
N
O
opacity
Anger hur genomskinligt ett element ska vara. Detta påverkar allt innehåll i elementet.
order
Anger i vilken ordning ett "flexibelt" element ska placeras i förhållande till övriga flexibla element.
outline
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.
outline-color
Anger färgen på konturlinjen kring ett element.
outline-offset
Anger hur långt ifrån elementet konturlinjen ska ritas.
outline-style
Anger med vilken linjetyp konturlinjen ska ritas, t.ex. streckad eller heldragen.
outline-width
Ange bredden på konturlinjen.
overflow
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.
overflow-x
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.
overflow-y
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
padding
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 box-modell för mer information.
padding-bottom
Anger hur mycket utfyllnad som ska finnas i botten av ett element. Se även [[box-model] för mer information.
padding-left
Anger hur mycket utfyllnad som ska finnas på vänstra sidan av ett element. Se även [[box-model] för mer information.
padding-right
Anger hur mycket utfyllnad som ska finnas på högra sidan av ett element. Se även [[box-model] för mer information.
padding-top
Anger hur mycket utfyllnad som ska finnas i toppen av ett element. Se även [[box-model] för mer information.
page-break-after
Anger om en sidbrytning ska läggas till efter ett element. Elementet kan inte vara tomt eller positionerat.
page-break-before
Anger om en sidbrytning ska läggas till före ett element. Elementet kan inte vara tomt eller positionerat.
page-break-inside
Anger om en sidbrytning får förekomma inuti ett element. Elementet kan inte vara tomt eller positionerat.
perspective
Används för att styra perspektivet på 3D-element.
perspective-origin
Används för att styra perspektivet på 3D-element.
Q
quotes
Anger vilken typ av citationstecken som ska användas för citat.
R
resize
Anger om ett elements storlek ska kunna ändras av användaren.
right
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
tab-size
Anger hur stort utrymme ett tabb-tecken ska uppta.
table-layout
Anger vilken algoritm som ska användas för att skapa layouten för en tabell.
text-align
Anger hur elementet ska placeras horisontellt i relation till andra element.
text-align-last
Anger hur den sista textraden i ett elementet ska placeras horisontellt i relation till andra element.
text-decoration
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.
text-decoration-color
Anger färg på understrykningar och liknande textutsmyckningar.
text-decoration-line
Anger vilken typ av linje som ska läggas till på en text, t.ex. en understrykning.
text-decoration-style
Anger vilken typ av linje som ska läggas till på en text, t.ex. dotted
för en punkt-linje.
text-indent
Anger hur den första textraden i ett stycke ska indenteras.
text-justify
Anger hur ett text stycke ska justeras, t.ex. center-justering eller höger-justering.
text-overflow
Anger hur text som flödar ut ur ett element ska hanteras, t.ex. om den ska klippas av och inte visas.
text-shadow
Anger en, eller flera textskuggor.
text-transform
Anger om en text ska omvandlas så den visas med t.ex. enbart versaler.
top
Anger var den toppen på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position
som angetts för elementet.
U
unicode-bidi
Anger hur sidan ska hantera text som är skriven i olika riktningar, t.ex. om man blandar arabiska och svenska på samma sida.
V
vertical-align
Anger hur ett element ska placeras vertikalt i relation till omgivande element.
visibilty
Anger om ett element är synligt eller ej. Även om det inte är synligt så tar det upp plats i sidan.
W
width
Används för att ange bredden på ett blockelement. Fungerar lite olika beroende på vilken boxmodell man valt.
word-break
Anger hur ord ska avstavas när en rad blir för lång.
word-spacing
Anger storleken på mellanrummet mellan ord.
word-wrap
Anger om ord ska avstavas när en rad blir för lång
Z
z-index
Styr hur olika element ska överlappa. Förflyttar elementen längs en tänkt Z-axel.