Samlingsegenskap: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 1: | Rad 1: | ||
I vissa fall det det finns många CSS-egenskaper som hör samman, har man skapat samlingsegenskaper. Detta är en CSS-egenskap där man kan ange flera CSS-egenskaper i en och samma egenskap. Detta gör CSS-reglerna mer koncisa och snabbare att skriva. | I vissa fall det det finns många CSS-egenskaper som hör samman, har man skapat samlingsegenskaper. Detta är en CSS-egenskap där man kan ange flera CSS-egenskaper i en och samma egenskap. Detta gör CSS-reglerna mer koncisa och snabbare att skriva. | ||
== Positionsangivelser == | |||
Vissa samlingsegenskaper kan ta flera positionsangivelser, såsom t.ex. <code>margin</code>. I dessa fall gäller följande regler för hur man anger positioner (vi använder oss av <code>margin</code> som exempelegenskap). | Vissa samlingsegenskaper kan ta flera positionsangivelser, såsom t.ex. <code>margin</code>. I dessa fall gäller följande regler för hur man anger positioner (vi använder oss av <code>margin</code> som exempelegenskap). | ||
== Alla == | === Alla === | ||
Följande anger en marginal på <code>1em</code> runt om hela elementet. | Följande anger en marginal på <code>1em</code> runt om hela elementet. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
margin: 1em; | margin: 1em; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== topp/botten och höger/vänster == | === topp/botten och höger/vänster === | ||
Följande anger en topp-/bottenmarginal på <code>1em</em> och en vänster-/högermarginal på <code>2em</code>. | Följande anger en topp-/bottenmarginal på <code>1em</em> och en vänster-/högermarginal på <code>2em</code>. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
| Rad 18: | Rad 18: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Ovanstående sätter marginalen till <code>auto</code> på höger-/vänstersida. Detta kommer att innebära att innehållet centreras i förhållande till föräldraelementet (sker enbart om innehållet även har en bredd satt, <code>width</code>). | Ovanstående sätter marginalen till <code>auto</code> på höger-/vänstersida. Detta kommer att innebära att innehållet centreras i förhållande till föräldraelementet (sker enbart om innehållet även har en bredd satt, <code>width</code>). | ||
== Varje sida var för sig == | === Varje sida, var för sig === | ||
Följande sätter; toppmarginalen till <code>1em</code>, högermarginalen till <code>2em</code>, bottenmarginalen till <code>3em</code> och vänstermarginalen till <code>4em</code> | Följande sätter; toppmarginalen till <code>1em</code>, högermarginalen till <code>2em</code>, bottenmarginalen till <code>3em</code> och vänstermarginalen till <code>4em</code> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
margin: 1em 2em 3em 4em; | margin: 1em 2em 3em 4em; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Versionen från 30 november 2014 kl. 14.42
I vissa fall det det finns många CSS-egenskaper som hör samman, har man skapat samlingsegenskaper. Detta är en CSS-egenskap där man kan ange flera CSS-egenskaper i en och samma egenskap. Detta gör CSS-reglerna mer koncisa och snabbare att skriva.
Positionsangivelser
Vissa samlingsegenskaper kan ta flera positionsangivelser, såsom t.ex. margin. I dessa fall gäller följande regler för hur man anger positioner (vi använder oss av margin som exempelegenskap).
Alla
Följande anger en marginal på 1em runt om hela elementet.
margin: 1em;
topp/botten och höger/vänster
Följande anger en topp-/bottenmarginal på 1em och en vänster-/högermarginal på 2em.
margin: 1em 2em;
Detta används ofta för att centrera saker, t.ex. genom:
margin: 1em auto;
Ovanstående sätter marginalen till auto på höger-/vänstersida. Detta kommer att innebära att innehållet centreras i förhållande till föräldraelementet (sker enbart om innehållet även har en bredd satt, width).
Varje sida, var för sig
Följande sätter; toppmarginalen till 1em, högermarginalen till 2em, bottenmarginalen till 3em och vänstermarginalen till 4em
margin: 1em 2em 3em 4em;