W zewnętrznym arkuszu stylów, który jest powiązany z określoną stroną www, znajduje się zapis:
img {border : 3px solid black ; margin: 20px},
natomiast w wewnętrznym arkuszu stylów tej strony:
img {border-color : red}.
Jeśli w sekcji body zostanie umieszczony tekst:
<img src = "obrazki/fotol9.jpg" style = "margin: 15px" />
to obrazek foto19.jpg zostanie wyświetlony z
A. czerwoną ramką oraz marginesem 15 pikseli
B. czarną ramką oraz marginesem 20 pikseli
C. czarną ramką oraz marginesem 15 pikseli
D. czerwoną ramką oraz marginesem 20 pikseli
Twoja odpowiedź jest trafna! Wiem, że korzystając z wewnętrznego arkusza stylów (CSS), zmieniasz kolor ramki na czerwony. A jak zewnętrzny arkusz ustawiał właściwości dla obrazków, takie jak szerokość ramki czy marginesy, to lokalne style mają wyższy priorytet. Więc gdy w <img> dodasz style='margin: 15px', to margines będzie wynosił 15 pikseli, a ramka na pewno pozostanie czerwona. To wszystko mówi nam o tym, jak ważne jest zrozumienie kaskadowego działania stylów i jak to wpływa na wygląd elementów. Z mojego doświadczenia, dobrze mieć porządek w arkuszach i unikać konfliktów między stylami. Zastosowanie systematycznego nazewnictwa naprawdę pomaga.
W przypadku błędnej odpowiedzi warto pomyśleć o tym, jak działa kaskadowość w CSS i jak działają selektory. Sugerowanie, że ramka powinna być czarna, jest błędne. Wiesz, że kolor czerwony z wewnętrznego arkusza dominuje nad zewnętrznymi regułami. Zdarza się, że niektórzy mylą lokalne style z tymi z arkuszy, ale to lokalne style mają pierwszeństwo. Warto zauważyć, że jeśli w zewnętrznym arkuszu byłby jakiś margines, to jego wartość zostałaby zignorowana przez ten zdefiniowany w tagu <img>. Odpowiedzi, które mówią o czarnej ramce lub marginesie 20 pikseli, wskazują na typowe nieporozumienia z priorytetami w CSS. Takie rzeczy, jak kaskadowość, specyficzność i kolejność stylów, są kluczowe. Zawsze warto sprawdzić, które reguły się stosuje i pamiętać, że lokalne style mogą przejąć kontrolę nad resztą.