 ilj@flowsim.sestylesheets på svenska 3 - stilmallar - css stylesheets: css/ stilmallar - färger och bakgrundsbilder |
||
 |
  FÄRG, BAKGRUNDSBILD & LÄNKFÄRG color: ...
background-color: ...
background-image: ...
background-repeat: ...
background-attachment: ...
background-position: ...
background: ...
A:link { color: ... }
A:visited { color: ... }
A:hover { color: ... }
A:active { color: ... }
FÄRG - color Efter color: skriver man den färg texten i ett bestämt element (t ex BODY, P) ska ha. T ex P { color: red } Här bestämmer man alltså att texten efter P-taggar ska vara röd.
Full pott (255 resp FF) av alla färger (RedGreenBlue) blir vitt, en nolla på alla positioner blir svart. 
BAKGRUNDSFÄRG - background-color Efter background-color: skriver man den färg bakgrunden i ett bestämt element (t ex BODY, P) ska ha. T ex BODY { background-color: yellow } Här sätts sidans bakgrundsfärg till gul.
Om man vill att sidan ska ha en blå bakgrund kan man skriva t ex så här: BODY { background-color: #00FF00 } Om man vill att alla rubriker som befinner sig mellan H4-taggar ska omges av en ruta med röd bakgrund kan man skriva så här: H4 { background-color: #FF0000 } Alla Paragrafer får en grå bakgrundsfärg om man skriver så här: P { background-color: #666666 }
BILD & FÄRG/ färger BILD & FÄRG/ färgord BILD & FÄRG/ färgsiffror BILD & FÄRG/ testa färger
BAKGRUNDS-BILDER background-image: ...
background-repeat: ...
background-attachment: ...
background-position: ...
background: ...
Om man vill använda en bild som heter bild.gif som bakgrund på sidan kan man skriva så här: BODY { background-image: url(bild.gif) } Exemplets bild bild.gif ser ut så här: 
background-repeat Om man inte vill att hela bakgrunden ska täckas av bakgrundsbilden, utan bara vill ha ett horisontellt band av röda cirklar kan man skriva så här: BODY { background-repeat: repeat-x }
En stapel av röda cirklar får man om man i stället skriver: BODY { background-repeat: repeat-y } BODY { background-repeat: no-repeat } Med hjälp av background-position kan man bestämma exakt var bakgrundsbilden ska hamna.
background-attachment Möjliga värden efter background-attachment: är Ett exempel på användning av background-attachment:fixed finns under EXEMPEL/bakgrundsbild i en rad högst upp i fönstret. Rulla den sidan och se vad som händer med bakgrundsbilden (raden av svarta bilar högst upp i fönstret).
background-position Med hjälp av background-position: bestämmer man bakgrundens placering. Det kan man göra på olika sätt. Följande fyra exempel placerar (första) bakgrundsbilden längst uppe till vänster på sidan: BODY { background-position: 0cm 0cm } BODY { background-position: 0% 0% } BODY { background-position: left top } BODY { background-position: top left } Möjliga värden efter background-position: förutom procenttal (t ex 50%) och absoluta längdangivelser (t ex 2cm) är
BODY { background-color: green } BODY { background-image: url(red.gif) } BODY { background-position: left center } BODY { background-repeat: repeat-x } background Man kan också placera allt som har med sidans bakgrundsbild att göra på ett ställe. Så här: BODY {background: green url(red.gif) left center repeat-x}
Textlänkars färg reglerar man så här: A:link { color:black } A:visited { color:#999999 } A:hover { color:orange } A:active { color:red } I exemplet ovan bestäms alltså att obesökta länkar ska vara svarta. När muspekaren befinner sig över länken och man trycker ner vänsterknappen ska länktexten bli röd. När muspekaren rör sig över länken blir länktexten bli orange. Besökta länkar ska vara grå. testlänk Fler exempel under stilmallar & länkar
Mer om stilmallar under rubriken STYLESHEETS på www.flowsim.se Sidan gjordes av ilj@flowsim.se Senast ändrad 13 mars 2004 Den här sidan hör hemma i ett ramsystem hos www.flowsim.se Stilmallar på svenska | |