 [CSS]Problem ze zrozumieniem stylów CSS |
| [CSS]Problem ze zrozumieniem stylów CSS |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 10 Pomógł: 0 Dołączył: 9.04.2013 Ostrzeżenie: (0%) 
 |
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> |
 |
 
|
 |
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 16 Pomógł: 2 Dołączył: 6.02.2013 Ostrzeżenie: (0%)
|
Proszę użyć tagów [ html ] <!-- skrypt --> [ /html ].
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 4 298 Pomógł: 447 Dołączył: 16.11.2006 Ostrzeżenie: (0%)
|
Chodzi o dziedziczenie i hierarchię. Choć opis w tej książce jest co najmniej niepokojący.
-------------------- Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta). |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 10 Pomógł: 0 Dołączył: 9.04.2013 Ostrzeżenie: (0%)
|
Mam teraz mały problem - mógłby ktoś mi pomóc rozrysować hierarchie tych elementów
Z góry dzięki za pomoc. |
|
|
|
|
Post
#5
|
|
 Grupa: Moderatorzy Postów: 36 557 Pomógł: 6315 Dołączył: 27.12.2004 |
Deklaracja, która bardziej precyzuje element, jest brana w pierwszej kolejnosci.
Ta deklaracja #sweden dl dd.img bardziej precyzuje element niż ta #sweden dd -------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 1 729 Pomógł: 346 Dołączył: 4.04.2009 Ostrzeżenie: (0%)
|
Dochodzą do tego również wagi danych selektorów http://www.stuffandnonsense.co.uk/archives...icity_wars.html
-------------------- |
|
|
|
 |
|
Aktualny czas: 21.08.2025 - 11:43 |
