Zapis CSS w postaci
ul { list-style-type: square; }spowoduje, że na stronie internetowej
A. elementy listy nienumerowanej zostaną ponumerowane
B. punktorem listy nienumerowanej będzie wypełniony kwadrat
C. tło listy nienumerowanej zostanie wypełnione wzorem w kratkę
D. każdy element listy nienumerowanej zostanie otoczony kwadratową ramką
Deklaracja CSS ul { list-style-type: square; } ustawia wygląd punktorów dla listy nieuporządkowanej, czyli elementu ul. Wartość square oznacza, że markerem przy każdym elemencie li będzie wypełniony kwadrat. To dotyczy samego znacznika listy, a dokładniej tak zwanego list marker, nie obramowania elementów ani tła. W praktyce taki zapis stosuje się, gdy chcemy trochę zmienić wygląd zwykłej listy z kropkami, na przykład w menu pomocniczym, liście cech produktu albo krótkim zestawieniu informacji na stronie. Zgodnie ze standardami CSS właściwość list-style-type może przyjmować też wartości takie jak disc, circle, decimal czy none. Moim zdaniem warto zapamiętać, że list-style-type odpowiada za symbol lub sposób numeracji listy, a nie za układ całego elementu. Dobra praktyka jest taka, żeby style list kontrolować w CSS, a nie kombinować z ręcznym wpisywaniem znaków kwadratu w HTML, bo wtedy kod jest czytelniejszy i łatwiejszy do utrzymania.
W tym fragmencie CSS kluczowe jest rozróżnienie, czego dotyczy właściwość list-style-type. Ona nie modyfikuje pudełka elementu, tylko marker listy, czyli symbol wyświetlany przed elementami li. Dlatego pomysł z kwadratową ramką wokół każdego elementu listy wynika zwykle z pomylenia słowa square z właściwościami odpowiedzialnymi za obramowanie. Do ramek służy border, na przykład border: 1px solid black, a kształt narożników można zmieniać przez border-radius. Sama wartość square przy list-style-type nie tworzy żadnej ramki, tylko zmienia punktor na mały, wypełniony kwadrat. Podobnie tło w kratkę nie ma z tym zapisem związku. Za tło odpowiadają właściwości background, background-color, background-image, ewentualnie powtarzanie obrazka przez background-repeat. Jeśli ktoś kojarzy kwadrat z kratką, to jest to raczej skojarzenie graficzne, ale nie działanie tej konkretnej deklaracji CSS. Numerowanie listy również nie nastąpi, bo selektor ul odnosi się do listy nienumerowanej. Numerację typowo uzyskuje się przez element ol albo przez ustawienie list-style-type: decimal. Z mojego doświadczenia najczęstszy błąd jest taki, że uczniowie tłumaczą wartość CSS dosłownie, bez sprawdzenia, do jakiej właściwości ona należy. W CSS zawsze patrzymy na parę: właściwość i wartość, bo sama wartość square może brzmieć graficznie, ale tutaj ma bardzo konkretne znaczenie w kontekście stylu listy.