Generell färg på border

6 svar · 347 visningar · startad av learn 9 feb. 2006

learnMedlem sedan jan. 20051 130 inlägg

9 feb. 2006 14:05#1

Jag skulle vilja slippa skriva ut färgen för alla borders på en sida. Kan man istället skriva detta "generellt" i CSS-koden?

Alltså typ som

p { margin:5px }

fiddlerMedlem sedan juli 20023 617 inlägg

9 feb. 2006 14:32#2

Har inte testat själv, men borde inte detta fungera?

* { border-color: #f00; }

learnMedlem sedan jan. 20051 130 inlägg

9 feb. 2006 15:23#3

givetvis, silly me... :)

zcorpanMedlem sedan dec. 20042 245 inlägg

9 feb. 2006 17:17#4

'border-color' ärvs från 'color' om man inte anger det specifikt. Så om du alltid vill ha samma som färgen på texten behöver du inte ange 'border-color'.

TroxyMedlem sedan mars 20041 505 inlägg

9 feb. 2006 22:47#5

zcorpan, det där förstod jag inte! Om jag anger skriver * {color: red;} så påverkas väl inte border-color?

InsiderMedlem sedan jan. 2000978 inlägg

9 feb. 2006 23:20#6

Troxy skrev:

zcorpan, det där förstod jag inte! Om jag anger skriver * {color: red;} så påverkas väl inte border-color?

Jo, det gör det. Den ärvs. Testa att skapa ett element med en border utan att ange border-color, så får du se vilken färg den får.

zcorpanMedlem sedan dec. 20042 245 inlägg

10 feb. 2006 00:02#7

'border-color' ärvs inte egentligen, jag borde ha använt ett annat ord där. Om en egenskap ärvs använder får den samma värde som det beräknade värdet på samma egenskap för dess förälder; som om man har angett värdet 'inherit'. Det händer inte med 'border-color' (men däremot 'color').

Det beräknade värdet för 'border-color' är samma som värdet för 'color' på samma element om man inte har angett 'border-color'.

Eftersom 'color' ärvs, och 'border-color' använder samma värde som 'color' (om man inte anger det specifikt) räcker det med att ange 'color' på rotelementet för att det ska påverka 'border-color' i resten av dokumentet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>border-color</title>
  <style type="text/css">
   html { color:lime; } /* ärvs */
   body { border-color:red; } /* ärvs inte */
   p { border-style:solid; }
  </style>
 </head>
 <body>
  <p>This line should have a green border.</p>
 </body>
</html>