På denna hemsida beskrivs egenskaper för färger och bakgrundsbilder.
Design och multimedia är tyvärr inte min "grej"... så det finns inte så många (bra) exempel för alla dessa egenskaper (ännu?; jag har inte gjort några under de 7 första åren webbsidan funnits...). Däremot har jag försökt lägga till så många referenser som möjligt. :-)
Egenskaper som behandlas på denna webbsida, och exempel på dess värden, är:
Vi kan ändra färger genom att ange förgrunds-/textfärg (color) och/eller bakgrundsfärg (background-color), båda med amerikansk stavning av färg (d.v.s. color och inte colour). Värde för egenskaperna kan vara något av nedanstående.
Observera att vi alltid bör ange både för- och bakgrundsfärg samtidigt! Ni bör alltså banka in nedanstående "mönster" i ert huvud, d.v.s. att alltid lägga till egenskaperna color och backgrund-color samtidigt. I exempel nedan så anges förgrundsfärg som svart och bakgrundsfärg som vit (vilket vi bör använda för större textmassor).
{
color: black;
background-color: white;
}I CSS-standard finns (idag) 17 fördefinerade färger, d.v.s. färger som vi kan referera till med namn. Men, som med många standarder för webbläsare, så har tillverkare av webbläsare sprungit i förväg och lagt till stöd för ett antal fler färger (som kommer vara en del av CSS version 3).
Om ni använder dessa (ännu) icke-standardiserade färgnamn så måste ni räkna med att sidan, för en del, inte kommer presenteras som ni vill! (CSS kommer inte heller att valideras korrekt.)
I tabell nedan visas de 17 fördefinerade färgnamnen (samt deras motsvarighet i hexadecimal kod - se nästa avsnitt). De visas som bakgrundsfärger med antingen svart eller vit förgrundsfärg (beroende på hur mörk färgen är).
| Färgnamn | Hex | Färgnamn | Hex |
|---|---|---|---|
| aqua | #00ffff | olive | #808000 |
| black | #000000 | orange | #ffa500 |
| blue | #0000ff | purple | #800080 |
| fuchsia | #ff00ff | red | #ff0000 |
| gray | #808080 | silver | #c0c0c0 |
| green | #008000 | teal | #008080 |
| lime | #00ff00 | white | #ffffff |
| maroon | #800000 | yellow | #ffff00 |
| navy | #000080 |
Som ett (dåligt?) exempel på stilmall för varningstext skulle vi t.ex. kunna använda nedanståned kod.
Resultatet av stilmallen visas nedan. Observera hur bakgrundsfärgen spänner
över hela kolumnen, d.v.s. den vita ytan, minus lite marginal.
Detta har att göra med den s.k. boxmodellen, vilket
är ämnet för nästa sida. Men, något förenklat, så ska bakgrundsfärger fylla
upp hela möjliga bredden, d.v.s. tills något stoppar, så som de gula kolumnerna
på vardera sida här. (En effekt som kallas expand to fit. Motsatsen,
shrink to fit, exemplifieras i tabellen ovan där cellerna endast
är så pass breda att bredaste innehållet får plats - texten "Färgnamn".)
p.varning
{
color: red;
background-color: yellow;
}Detta skulle kunna vara varningstext.
Utöver detta går det att använda s.k. systemfärger, d.v.s. de färger som operativsystemet (t.ex. Windows eller MacOS) använder för olika delar av fönster (t.ex. ButtonFace och WindowFrame). Detta behandlas inte i denna underwebb (för nu).
Ett hexadecimalt tal bygger på talbasen 16, d.v.s. att det finns 16 siffror (0 till 9 samt A, B, C, D, E och F för 10, 11, 12, 13, 14 resp. 15). När vi anger en hexadecimal kod för färger i CSS så använder vi en "brädgård" (#-tecknet, eng. hash) följt av antingen tre eller sex hexadecimala siffror, t.ex. #36C eller #3366CC. Bokstäverna i koden kan antingen vara gemener eller versaler, d.v.s. det spelar ingen roll (även om jag i löpande text kommer använda versaler men gemener i kodexempel :-).
"Men", säger en del av er, "det är ju bara 15 siffror!" Inte om man även räknar nollan! :-) Det decimala talsystemet, d.v.s. det vi människor använder, bygger på tio siffror (0 till 9). I datorvärlden används ofta det hexadecimala talsystemet då två hexadecimala siffror motsvarar en byte (8 bitar, d.v.s. 8 nollor och ettor - som i sin tur bygger på det binära talsystemet, d.v.s. endast två siffror; det binära talet 00000101 är 5 decimalt [4+1=5] men även 5 hexadecimalt och det binära talet 00001101 är 13 decimalt [8+4+1=13] men D hexadecimalt.) Fast denna nördighet behöver ni inte lägga allt för mycket vikt i. :-)
Färger, med hexadecimal kod, bygger på att vi anger hur mycket rött, grönt och blått en färg ska innehålla. Total avsaknad av alla färger (d.v.s. noll, eller snarare talet 0 eller talet 00) är svart och maximal färg (styrka) av alla färger (d.v.s. talet F eller FF) är vit (se tabell nedan). En färg i den förkortade versionen (tre siffror) så kan "expanderas" till den långa versionen (sex siffror) genom att "dubbla på" siffrorna, t.ex. blir #f00 (röd färg) #ff0000. Vissa färger i den långa versionen går dock inte att konvertera till den förkortade versionen (se tabell nedan för exempel).
I tabell nedan visas exempel på färgers hexadecimala kod. (Se även tabell med fördefinerade färger ovan för fler exempel samt referenser för listor, eng. charts, med fler färger och färgprov.)
| Färg | Kort kod | Lång kod |
|---|---|---|
| Svart | #000 | #000000 |
| Röd | #f00 | #ff0000 |
| Grön | #0f0 | #00ff00 |
| Blå | #00f | #0000ff |
| LightGoldenRodYellow | - | #fafad2 |
| Vit | #fff | #ffffff |
I exempel nedan visas hur vi väljer svart text mot röd resp. grön bakgrundsfärg och vit text mot blå bakgrundsfärg. I alla tre stycken används den korta versionen, d.v.s. endast tre siffror.
Detta är
svart text mot röd bakgrund (inte bästa valet...).
Stilmall: color: #000; background-color: #f00
Detta är
svart text mot grön bakgrund (inte bästa valet...).
Stilmall: color: #000; background-color: #0f0
Detta är
vit text mot blå bakgrund (bättre val, men ändå...).
Stilmall: color: #fff; background-color: #00f
RGB-koder fungerar egentligen som hexadecimal kod för färger, d.v.s. vi anger hur mycket rött, grönt och blått som färgen ska bestå av, men vi använder decimala tal istället för hexadecimala. (Välj vilken form ni tycker bäst om och håll er till den formen, d.v.s. var konsekvent! Ha dock i bakhuvudet att många exempel på färger på Internet brukar ges hexadecimalt.)
I exempel nedan upprepas exempel från hexadecimala koder, fast denna gång med RGB-koder istället.
Detta är
svart text mot röd bakgrund (inte bästa valet...).
Stilmall: color: rgb(0, 0, 0); background-color: rgb(255, 0, 0)
Detta är
svart text mot grön bakgrund (inte bästa valet...).
Stilmall: color: rgb(0, 0, 0); background-color: rgb(0, 255, 0)
Detta är
vit text mot blå bakgrund (bättre val, men ändå...).
Stilmall: color: rgb(255, 255, 255); background-color: rgb(0, 0, 255)
Om man ändrar antingen för- eller bakgrundsfärg så bör man även ändra den andra! Eftersom besökare kan ha egna stilmallar, som dom angett i webbläsaren, så kan man av misstag välj samma färg på förgrunden (textfärgen) som besökaren valt på bakgrunden. Resultatet blir att texten inte kommer att synas eftersom det inte finns någon kontrast mellan för- och bakgrund. CSS-validatorer brukar varna för detta, vilket är ytterligare ett skäl till använda CSS-validatorer. (Se webbsidan Funktion för adresser till CSS-validatorer.)
Välj även för- och bakgrundsfärger så att kontrasten (skillnaden) mellan dem är tillräcklig för att texten ska synas. Exempel med olika bakgrundsfärger ovan visar hur otydligt (eller tydligt) texten kan synas om kontrasterna mellan färgerna är för dåliga (eller tillräckligt god).
Tänk också på att om man använder en mörk bakgrundsfärg och en ljus förgrundsfärg så syns texten sämre. Man bör därför välja två färger med tillräckligt god kontrast och/eller använda fet stil för texten. (Det finns alltså skäl till att man brukar använda vit papper med svart tryck. :-)
Precis som för HTML så bör man använda färger i multipler av 33 hexadecimalt (00, 33, 66, 99, CC eller FF) eller 51 decimalt (0, 51, 102, 153, 204 eller 255) för att vara (relativt) säker på hur färgen kommer visas i besökarens webbläsare. (Idag är det inte besökarens datorskärm som kan vara problemet utan handdatorers och mobiltelefoners skärmar. :-)
Webbläsaren Firefox innehåller (sedan 2019) ett utvecklarverktyg för att utvärdera tillgängligheten (eng. accessibility, A11Y) för en webbsida.
Till början på sida
Bakgrundsbilder kan läggas till i både webbsida och enstaka element (t.ex. en DIV-tagg - se Exempel 4c 2.2 nedan). För att lägga till en bild används "funktionen" url(), och som parameter till "funktionen" anges bildens filnamn och eventuella sökväg. I första exemplet nedan finns bilden i samma mapp som den fil som stilen finns i och i det andra exemplet finns bilden i en mapp bilder på samma nivå.
background-image: url(bjorns_studiewebb.jpg);background-image: url(../bilder/bjorns_studiewebb.jpg);
Bakgrundsbilder kan repeteras horisontellt (X-led) och vertikalt (Y-led). T.ex. kan man skapa bakgrundsfärgen till en vertikal meny genom att repetera en bild vertikalt (i Y-led). I exempel nedan repeteras först inte bild och sen horisontellt (i X-led)
background-repeat: no-repeat;background-repeat: repeat-x;
Exempel 4c 2.2 - Bakgrundsbilder, repeat
Bilder kan även positioneras så att de alltid finns på en viss position på webbsida oavsett om besökare skrollar upp eller ner på webbsida. Vid positionering så kan bilder även positioners i djupled (Z-led), d.v.s. vilken av två (eller fler) bilder som ska vara överst (eller underst :-). (Detta behandlas inte på denna webbsida för nu...)
Till början på sida
Det finns en "genväg" för bakgrund, d.v.s. bakgrundsfärg och -bild. I exempel nedan så anges bakgrundsfärg som vit samt bakgrundsbild och att den inte ska repeteras.
background: white url(bjorns_studiewebb.jpg) no-repeat;
Till början på sida
Nedan finns länkar med mer information (i ingen speciell ordning).