Arkusze stylów – część 2

(1)

Arkusze stylów – część 2

Technologie internetowe

Zofia Kruczkiewicz

(2)

Dziedziczenie stylów – 1a – uŜycie kilku stylów w jednej deklaracji class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Arkusze stylow</title>

<style type="text/css">

.dziadek {color:green; letter-spacing: 0.3em}

.ojciec {color: red}

.syn {font-weight: bold; font-size:xx-large;}

</style>

</head>

<body>

<p class="dziadek"> dziadek </p>

<p class="dziadek ojciec"> dziadek ojciec </p>

<p class="dziadek ojciec syn"> dziadek ojciec syn </p>

<p class="dziadek syn"> dziadek syn </p>

<p class="ojciec syn"> ojciec syn </p>

(3)

podawanych klas nie

wpływa na kolejność uŜytych stylów. Na kolejność uŜytych stylów decyduje kolejność

definiowania stylów –

ostatnia

definicja ma

najwyŜszy

priorytet

(4)

Dziedziczenie stylów – 1b

<head>

.syn {font-weight: bold; font-size:xx-large;}

</style>

</head>

<body>

<p class="ojciec dziadek"> ojciec dziadek</p>

<p class="syn"> syn </p>

<p class=" ojciec"> ojciec </p>

(5)

podawanych klas nie

wpływa na kolejność uŜytych stylów. Na kolejność uŜytych stylów decyduje kolejność

definiowania stylów –

ostatnia

definicja ma

najwyŜszy

priorytet

(6)

Dziedziczenie stylów – 2 – o kolejności stylów decyduje kolejność definiowania w arkuszu stylu

<head>

.syn {color:blue; font-weight: bold; font-size:xx-large;}

</style>

</head>

<body>

<p class="dziadek ojciec"> dziadek ojciec </p>

(7)

definiowanych klas wpływa na kolejność uŜytych stylów –

ostatnia deklaracja anuluje poprzednią.

Styl ojciec z kolorem czerwonym anuluje kolor zielony stylu dziadek

Kolejność

definiowanych klas wpływa na kolejność uŜytych stylów –

ostatnia deklaracja anuluje poprzednią.

Styl syn z kolorem niebieskim anuluje kolor zielony stylu

dziadek oraz czerwony

stylu ojciec

(8)

Style narzucone, domniemane, domyślne

Styl narzucony -

narzucony styl body Styl domyslny1 -

zignorowany styl body Styl domyslny2 -

zignorowany styl body Styl alternatywny1 -

wybrany w przeglądarce

Styl narzucony i styl

(9)

<head>

<title>Arkusze stylów</title>

<link rel="alternate stylesheet" title="alternatywny1" href="alternatywny1.css type="text/css"></link>

<link rel="alternate stylesheet" title="alternatywny2" href="alternatywny2.css" type="text/css"></link>

<link rel="stylesheet" href="narzucony.css" type="text/css"></link>

</head>

<body>

<h1 class="body1">Styl body1 nagłówka</h1>

<p class="box1"> Styl box1 akapitu.</p>

</body>

</html>

(10)

(11)