W kodzie CSS zdefiniowano cztery klasy formatowania, których następnie użyto do formatowania paragrafów. .format1 { text-decoration: overline; }
.format2 { text-decoration: line-through; }
.format3 { text-decoration: underline; }
.format4 { text-decoration: none; }
Efekt widoczny poniżej powstał po zastosowaniu klasy o nazwie:
formatowanie
Przekreślenie tekstu linią biegnącą przez jego środek daje w CSS wartość line-through właściwości text-decoration, a w podanym kodzie ma ją klasa format2. Warto zapamiętać cały zestaw, bo wszystkie cztery wartości pojawiają się na egzaminie wymiennie: underline podkreśla tekst od dołu, overline prowadzi linię nad tekstem, line-through przekreśla go w połowie wysokości, a none usuwa dekoracje – w praktyce najczęściej po to, żeby odebrać podkreślenie odnośnikom. Nazwy klas nie mają tu żadnego znaczenia dla efektu: format1 czy format2 to dowolne etykiety wybrane przez autora kodu, więc odpowiedzi trzeba szukać wyłącznie w wartości właściwości, nie w nazwie selektora.
Klucz podpowiada sam wygląd napisu: linia przechodzi przez środek liter, a nie nad nimi ani pod nimi. Klasa format1 z wartością overline poprowadziłaby linię nad tekstem, format3 z underline podkreśliłaby go od dołu, a format4 z none nie dałaby żadnej dekoracji – tekst wyglądałby zwyczajnie. Najczęstsza pomyłka polega na wybraniu underline, bo podkreślenie jest najbardziej znaną dekoracją tekstu, albo na zgadywaniu po numerze klasy. Tymczasem nazwa klasy jest tu bez znaczenia i można ją zmienić na dowolną inną bez wpływu na wygląd strony. Rozstrzyga tylko wartość właściwości text-decoration, a przekreślenie to line-through.