Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?
| <style> td {padding: 30px; } </style> … <td style="padding: 10px;">Anna</td> <td>Ewa</td> |
Odpowiedzi
Informacja zwrotna
Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.
Analizując podane odpowiedzi, konieczne jest zrozumienie, jak działa specyficzność w CSS. Częstym błędem jest zakładanie, że reguły zdefiniowane w sekcji style zawsze przeważają nad innymi. Jednak style inline, czyli te bezpośrednio przypisane do elementu HTML, mają wyższy priorytet. Dlatego komórka z napisem Anna, mimo że wszystkie komórki td mają globalnie zdefiniowany padding 30px, będzie mieć padding 10px, ponieważ zapis style="padding: 10px;" bezpośrednio przypisany do niej nadpisuje regułę globalną. Myślenie, że marginesy wszystkich komórek będą równe 30px, jest błędem wynikającym z niezrozumienia priorytetów CSS. Podobnie, założenie, że wszystkie komórki mają padding 10px, ignoruje fakt, że tylko dla jednej komórki użyto stylu inline. Zrozumienie tych mechanizmów jest kluczowe dla efektywnego stylowania stron internetowych. Zasadą dobrych praktyk jest stosowanie zewnętrznych arkuszy stylów, co nie tylko poprawia czytelność kodu, ale także pozwala na lepsze zarządzanie stylem całej witryny. Użycie stylów inline powinno być ograniczone do wyjątkowych przypadków, gdzie konieczne jest szybkie nadpisanie stylu, co jednak może prowadzić do mniej optymalnego kodu w dłuższej perspektywie.