kaxigt.com

Lästid: 42 minuter

Välkommen till sjätte lektionen!

Genom att använda en border och formatera den med css kan man få snygga effekter på hemsidan.

• Borderstyle
• Bordercolor
• Borderwidth
• Mer avancerade lösningar för border

Border

Vi ska nu gå igenom hur man kan använda en border, dock bör du tänka på följande: du måste använda egenskapen border-style tillsammans med border-width eller border-color för att det ska fungera.
Css-syntax för en border:

1. border-style: solid;
2. border-color:#333;

Css-syntax för border och width:

1. border-style: solid;
2. border-width: 5px;

Css-syntax för border och width och färg:

1. border-style: solid;
2. border-width: 5px;
3. border-color: #333;

Som shorthand declaration skulle css-syntaxen för ovanstående exempel se ut så här:

vald selektor {border: 5px solid #333;}

Borderstyle

Det finns ett flertal olika utseenden och vi ska nu titta på var och en av dessa och deras css-syntax.

border-style:solid;

border-style:dotted;

border-style:dashed;

border-style:ridge;

border-style:double;

border-style:inset;

border-style:outset;

border-style:groove;

Bordercolor

Genom att sätta färg på sin border så kan det höja utseendet markant. Du kan använda vilka värden du vill, antingen hexadecimalt såsom #11 22 33 eller värde i text såsom ”black” eller rgb-skalans enheter som rgb(123,123,123). CSS-syntax:

1. border-color: #11 22 33;
2. border-color: black;
3. border-color: rgb(123,123,123);

Borderwidth

Man kan även ställa in bredden på sin border. Här är några exempel:

10px 5px 15px 25px

Css-syntax:

1. border-width: 10px;
2. border-width: 5px;
3. border-width: 15px;
4. border-width: 25px;

Man kan även ange värdet: thin eller thick.

Egenskaper för border (kantlinje)

border	kan anges med följande värden: border, border-top, border-right, border-bottom, border-left
border-width	anger bredden på kantlinjen, kan även användas som värde på respektive border ex: border-top-width
border-style	anger stilen på bordern med följande värden: solid, dashed, inset, outset, ridge, double, groove, none. Man kan även ge varje kantlinje sitt eget värde, ex: border-top:dotted; border-left:solid;
border-color	anger färgen på alla kantlinjer med värdet: border-color:#000;. Man kan även ge varje kantlinje sin egen färg, ex border-left-color

Mer avancerade lösningar för border

Det går att variera utseendet på en och samma border, både med färger, storlek och utseende. Vi ska titta lite närmare på detta men också gå igenom hur vi skriver värdet i egenskaperna för en border som shorthand declaration för att optimera vår stilmall från en massa onödiga koder.

Olika färger på borderns sidor

Låts oss säga att du vill ha lite olika färger på din border, då har du fyra alternativ.

På en sida

Ofta skrivs egenskaperna för detta alternativ ut på följande traditionella vis:

1. border-width: 5px;border-style: solid; border-left-color: #ccc;
2. border-width: 5px;border-style: solid; border-top-color: #333;
3. border-width: 5px;border-style: solid; border-right-color: #333;
4. border-width: 5px;border-style: solid; border-bottom-color: #333;

Eller så här:

selektor {border-width: 5px;border-style: solid; border-left-color: #ccc; border-top-color: #333; border-right-color: #333; border-bottom-color: #333;}

Det är massa koder, och en del definitivt onödiga koder. Vi ska istället dela på egenskaperna för att optimera vår stilmall och använda shorthand declaration där det går istället. Samma koder för border på en sida ser då ut så här:

1. border-style: solid;
2. border-width: 5px;
3. border-left-color: #ccc;

Eller så här:

vald selektor {border-width: 5px;border-style: solid; border-left-color: #ccc;}

När ska färglägga två sidor så använder vi shorthand för just border-color istället för att ange respektive sida. Kika här:

På två sidor

1. border-style: solid;
2. border-width: 5px;
3. border-color: #ccc #333;

Eller så här:

selektor {border-width: 5px;border-style: solid; border-color: #ccc #333;}

Som ni ser så behöver vi inte definera vilken sida det är som ska ha en annan färg mer än i border-color eftersom webbläsaren först läser in #ccc som innebär border-top respektive border-bottom.
Därefter läser den in färgen #333 som då motsvarar de andra två sidorna, border-left och border-right. Man kan ytterligare lägga till färger i shorthand om det är tre sidor man vill förändra.

På tre sidor

1. border-style: solid;
2. border-width: 5px;
3. border-color: #ccc #999 #333;

Eller så här:

vald selektor {border-width: 5px;border-style: solid; border-color: #ccc #999 #333;}

Shorthand för border-color anger här dessa egenskaper:
border-top:#ccc; border-bottom:#333; border-left och border-right:#999;

Slutligen så har vi det sista alternativet kvar och det är om du vill ha olika färger på alla sidor.

På fyra sidor

1. border-style: solid;
2. border-width: 5px;
3. border-color: #ccc #999 #333 #fff;

Eller så här:

selektor {border-width: 5px;border-style: solid; border-color: #ccc #999 #333 #fff;}

Shorthand för border-color anger här dessa egenskaper:
border-top:#ccc; border-right:#999;border-bottom:#333; border-left:#fff;

Vi blandar stil färg och storlek

För att visa hur mycket man kan göra med en enda border så har jag lagt in flera olika värden i egenskaperna. Se själv.

Olika stilar

1. border-style: solid dotted dashed;
2. border-width: 5px;
3. border-color: #ccc blue #333 red;

Eller så här:

vald selektor {border-width: 5px;border-style: solid dotted dashed; border-color: #ccc blue #333 red;}

Shorthand för border-color anger här dessa egenskaper:
border-top:#ccc; border-right:blue;border-bottom:#333; border-left:red;

Shorthand för border-style anger här dessa egenskaper:
border-top:solid; border-right och border-left:dotted; border-bottom:dashed;

Positionera border-top, bottom, right eller left

Vi kan ju också ange var vi vill att vår border ska positioneras. Här är några exempel:

Border-bottom

Border-top

Border-left

Border-right

1. border-bottom-style:solid; border-color: #ccc; border-width: 5px;
2. border-top-style:double; border-color: blue; border-width: 5px;
3. border-left-style:dashed; border-color: #000; border-width: 5px;
4. border-right-style:dotted; border-color: red; border-width: 5px;

Vad sägs om rundade hörn, gradient borders och border-images?

Hos W3C kan du också läsa om egenskaperna för en border.
I lektion nummer 7 kommer vi att gå igenom margin och padding.

Välkommen dit!