Czy zdarzyło Ci się zastosować do elementu styl CSS, który po prostu nie działa?
Za pomocą Narzędzi deweloperskich Chrome możesz szybko wykrywać problemy z kodem CSS, a następnie je debugować i testować.
Obejrzyj film, aby dowiedzieć się, jak panel Elementy > Style wyróżnia różne problemy związane z CSS:
Właściwość o nieprawidłowej składniWłaściwość zastąpionaNieaktywna usługa
Odziedziczone z
parent
Właściwość odziedziczona
Właściwość nieodziedziczona
Rozwijana właściwość skrótu
Zastąpiona właściwość w wersji szczegółowejAktywna własność w widoku długim
arkusz stylów klienta użytkownika
- Właściwość, której nie można edytować
Zastąpiona właściwość, której nie można edytować
Więcej wskazówek dotyczących debugowania:
- Aby skupić się na jednej interesującej Cię właściwości, użyj filtra w panelu Style.
- W panelu Obliczone możesz zobaczyć wszystkich zwycięzców Cascade i ich obliczone wartości.
- W panelu Obliczone rozwiń właściwość i kliknij link, aby znaleźć jej źródło w panelu Style.
Więcej informacji o tym, jak narzędzia dla deweloperów wskazują problemy z CSS, znajdziesz w artykule Znajdowanie nieprawidłowego, zastąpionego, nieaktywnego i innego kodu CSS.
Aby pogłębić swoją wiedzę na temat CSS, przeczytaj artykuł Uczenie się CSS.
Aby dowiedzieć się, jak tworzyć witryny, które wyglądają świetnie i są przydatne dla wszystkich użytkowników, przeczytaj artykuł Elastyczne projektowanie – wprowadzenie.