10-04-2013, 01:37
Witam !
Mam problem ze zrozumieniem jak działa CSS. Mianowicie po wpisanych zmianach (wytłuszczone i podkreślone style CSS) w książce (przykład z książki) jest napisane :
Dodaliśmy deklaracje zerującą wartość marginesów dla elementów <dd> oznaczonych przy użyciu atrybutu class="img". Deklaracja ta zakryje regułę znajdującą się w sekcji "zmiana kierunku", tworzącą w elementach <dd> prawy margines. Dzieki temu po deklaracji prawego marginesu dla obiektów #sweden .alt dd nie musimy już w kodzie umieszczać dodatkowej deklaracji zerującej margines dla obiektów zawierających pływające obrazki.
Mógłby mi ktoś wytłumaczyć jak ta
#sweden dl dd.img {
margin: 0;
}
deklaracja zakrywa regułę znajdującą się w sekcji "zmiana kierunku" (czy to jest związane z dziedziczeniem?) jak mam to (Dzieki temu po deklaracji prawego marginesu dla obiektów #sweden .alt dd nie musimy już w kodzie umieszczać dodatkowej deklaracji zerującej margines dla obiektów zawierających pływające obrazki) rozumieć?
Z góry dzięki za pomoc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<html lang="pl">
<head>
<title> Strona z książki 4 </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: small; }
#sweden {
float: left;
width: 300px;
padding: 10px 0;
border: 2px solid #C8CDD2;
}
#sweden dl {
float: left;
width: 260px;
margin: 10px 20px;
padding: 0;
display: inline; /* naprawia błąd podwojonych marginesów w IE/Win */
}
#sweden dt {
float: right;
width: 162px;
margin: 0;
padding: 0;
font-size: 130%;
letter-spacing: 1px;
color: #627081;
}
#sweden dd {
margin: 0 0 0 98px;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}
#sweden dl dd.img {
margin: 0;
}
#sweden dd.img img{
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}
/* zmiana kierunku */
#sweden .alt dt {
float: left;
}
#sweden .alt dd {
margin: 0 98px 0 0;
}
#sweden .alt dd.img img{
float: right;
margin: 0 0 0 8px;
}
</style>
</head>
<body>
<div id="sweden">
<dl>
<dt>Sztokholm</dt>
<dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="galma Stan" /></dd>
<dd>Zdjęcie to zostało.</dd>
</dl>
<dl class="alt">
<dt>Galma Uppsala</dt>
<dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Galma Uppsala" /></dd>
<dd>W Galma Uppsala pod kurhanami pochowani są pierwsi trzej królowie szwedzcy.</dd>
</dl>
<dl>
<dt>Wieczne słońce</dt>
<dd class="img"><img src="img/watch.jpg" width="80" height="80" alt="Wristwatch" /></dd>
<dd>W trakcie letnich miesięcy słońce zachodzi bardzo późno - jest to wspaniała rzecz!</dd>
</dl>
</body>
</html>
Mam problem ze zrozumieniem jak działa CSS. Mianowicie po wpisanych zmianach (wytłuszczone i podkreślone style CSS) w książce (przykład z książki) jest napisane :
Dodaliśmy deklaracje zerującą wartość marginesów dla elementów <dd> oznaczonych przy użyciu atrybutu class="img". Deklaracja ta zakryje regułę znajdującą się w sekcji "zmiana kierunku", tworzącą w elementach <dd> prawy margines. Dzieki temu po deklaracji prawego marginesu dla obiektów #sweden .alt dd nie musimy już w kodzie umieszczać dodatkowej deklaracji zerującej margines dla obiektów zawierających pływające obrazki.
Mógłby mi ktoś wytłumaczyć jak ta
#sweden dl dd.img {
margin: 0;
}
deklaracja zakrywa regułę znajdującą się w sekcji "zmiana kierunku" (czy to jest związane z dziedziczeniem?) jak mam to (Dzieki temu po deklaracji prawego marginesu dla obiektów #sweden .alt dd nie musimy już w kodzie umieszczać dodatkowej deklaracji zerującej margines dla obiektów zawierających pływające obrazki) rozumieć?
Z góry dzięki za pomoc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<html lang="pl">
<head>
<title> Strona z książki 4 </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: small; }
#sweden {
float: left;
width: 300px;
padding: 10px 0;
border: 2px solid #C8CDD2;
}
#sweden dl {
float: left;
width: 260px;
margin: 10px 20px;
padding: 0;
display: inline; /* naprawia błąd podwojonych marginesów w IE/Win */
}
#sweden dt {
float: right;
width: 162px;
margin: 0;
padding: 0;
font-size: 130%;
letter-spacing: 1px;
color: #627081;
}
#sweden dd {
margin: 0 0 0 98px;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}
#sweden dl dd.img {
margin: 0;
}
#sweden dd.img img{
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}
/* zmiana kierunku */
#sweden .alt dt {
float: left;
}
#sweden .alt dd {
margin: 0 98px 0 0;
}
#sweden .alt dd.img img{
float: right;
margin: 0 0 0 8px;
}
</style>
</head>
<body>
<div id="sweden">
<dl>
<dt>Sztokholm</dt>
<dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="galma Stan" /></dd>
<dd>Zdjęcie to zostało.</dd>
</dl>
<dl class="alt">
<dt>Galma Uppsala</dt>
<dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Galma Uppsala" /></dd>
<dd>W Galma Uppsala pod kurhanami pochowani są pierwsi trzej królowie szwedzcy.</dd>
</dl>
<dl>
<dt>Wieczne słońce</dt>
<dd class="img"><img src="img/watch.jpg" width="80" height="80" alt="Wristwatch" /></dd>
<dd>W trakcie letnich miesięcy słońce zachodzi bardzo późno - jest to wspaniała rzecz!</dd>
</dl>
</body>
</html>
