Zaloguj się

Witek76 · 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>

prawdziwypiotrek · Liczba postów: 40 Liczba wątków: 0 Dołączył: 07-03-2013 Reputacja: 0

Pokręcone to i wyrwane z kontekstu, ale chodzi chyba o to, że:

Kod:
#sweden dd { 

margin: 0 0 0 98px;

 }

jest słabsze niż

Kod:
#sweden dl dd.img {

 margin: 0;

 }

Czyli niezależnie od kolejności tych reguł, ta druga podana przez mnie będzie nadpisywać Ci pierwszą. To jeden ze smaczków CSS-a.
Ten przykład z książki jest pokręcony, niepotrzebnie wmieszał tu ktoś klasę o nazwie img, przez co początkującemu może się wydawać że chodzi o obrazek.

#sweden dl dd.img nie odnosi się do obrazka ! Tylko do elementu:

Kod:
<dd class="img"></dd>

Dopiero #sweden dd.klasacostam img odnosiłoby się do obrazka.

Witek76 · 12-04-2013, 21:29

Mam teraz mały problem - mógłby ktoś mi pomóc rozrysować hierarchie.

Z góry dzięki za pomoc.

szawelini · 17-04-2013, 02:24

Pamiętaj, że w stylach najlepiej jest operować na "id" wtedy masz ładnie rozrysowane co i gdzie powinno się znajdować oraz nie pomylisz się Wink

prawdziwypiotrek · Liczba postów: 40 Liczba wątków: 0 Dołączył: 07-03-2013 Reputacja: 0

Prawda, jednak czasami trzeba stworzyć np. listę z podlistą, która ma w sobie szereg innych podlist i tak w nieskończoność Smile

Wtedy lepiej się operuje na samych znacznikach (dd, dl, ul, li itp.) i nie trzeba nadawać klas/id dla każdego elementu osobno.

Hierarchia w CSS to temat mocno teoretyczny i nudny, moim zdaniem nie warto się jakoś szczególnie zagłębiać, wystarczą podstawy. Kodzić, kodzić i jeszcze raz kodzić - najlepsza metoda Smile

Dopiero potem można ewentualnie uzupełnić informacje czysto teoretyczne.

**Kartofelek** · (Ten post był ostatnio modyfikowany: 17-04-2013, 17:48 przez Kartofelek.)

W prawie każdej przeglądarce kliknij F12. Pojawi ci się debuger z opcją podglądu html. Tam masz pięknie pokazaną hierarchię. W nowym firefoxie masz też dodatek dzięki któremu możesz sobie oglądać html w 3d (klikasz prawym na coś na stronie, wybierasz "Zbadaj element" a potem w prawym dolnym rogu masz 3d). Ogólnie szmira nie funkcja.

Używanie ID do stylowania to moim zdaniem średni pomysł. Szybkości na tym nie uzyskasz (no chyba że masz zerowe straty na każdej innej rzeczy na stronie, co jest niemożliwe), a używanie ID w CSS powoduje tylko problemy.

1) Stylowanie za pomocą ID psuje moim zdaniem logikę CSS.

Kod:
#box h3 {color:red;}

.pierwsza-klasa .druga-klasa .trzecia-klasa h3 {color:blue;}

<div id="box" class="pierwsza-klasa">

      <div class="druga-klasa">

            <div class="trzecia-klasa">

                  <h3>Jestem czerwony :(</h3> 

            </div>

      </div>

</div>

W powyższym przykładzie mimo tego, że drugi style jest bardziej "precyzyjny", powinien mieć większą moc, to takiej nie ma. Dlatego, bo pierwszy korzysta z ID
Po kilku takich kombinacjach zmuszeni jesteśmy używać !important, czego raczej nie powinno się robić, bo często bardzo szkodzi (szczególnie w przypadku pluginów). Od razu dopowiem, że to nie jest mus i wyznacznik. Nie powinno != nie wolno.

2) Czasami to wyraźnie widać przy pluginach do wordpressa. Używam np pluginu do galerii, która jest stylowana przez ID. Robię sobie 2 takie galerie na jednej stronie i leżę (no powiedzmy, że mogę to zmienić, ale przychodzi update pluginu i mi to popsuje).

3) # wygląda jakby ktoś podrapał ekran Big Grin

4) Używanie ID tylko dla elementów które używają JS sprawia, że łatwiej coś takiego się czyta.

Ale moje zdania często się zmieniają i jak ktoś ma inne, to zapraszam do dyskusji. Może zdołacie mnie przekonać.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie