Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:
<STYLE type="text/css"> <!-- P {color:blue; font-size:14pt; font-style:italic} A { font-size: 16pt ; text-transform:lowercase; } TD.niebieski { color: blue} TD.czerwony { color: red} --> </STYLE>
A. Akapit będzie transponowany na małe litery.
B. Zdefiniowano dwie klasy.
C. Jest to styl lokalny.
D. Odnośnik będzie pisany czcionką 14 punktów.
Pytanie z egzaminu CKE, wrzesień 2014 (arkusz E.14-X-14.08).
W tej definicji stylu rzeczywiście zdefiniowano dwie klasy CSS: niebieski oraz czerwony, zapisane jako selektory TD.niebieski i TD.czerwony. Kropka w selektorze oznacza klasę, a zapis TD.niebieski mówi dokładniej: zastosuj ten styl tylko do komórek tabeli TD, które mają przypisaną klasę niebieski. W praktyce taki styl zadziałałby np. dla komórki tabeli z atrybutem class='niebieski' i ustawiłby jej tekst na kolor niebieski. Analogicznie class='czerwony' w elemencie TD da czerwony tekst. To jest typowy sposób zawężania klas do konkretnych elementów HTML, choć we współczesnym kodzie zwykle pisze się selektory małymi literami, np. td.niebieski, bo HTML i CSS w praktyce tak się dziś czyta wygodniej. W arkuszu są też selektory elementów P i A, ale one nie są klasami, tylko regułami dla wszystkich akapitów i wszystkich odnośników. Moim zdaniem to pytanie dobrze sprawdza, czy ktoś odróżnia selektor elementu od selektora klasy, a to w CSS jest absolutna podstawa przy budowaniu czytelnych stylów strony.
Warto tu spokojnie rozdzielić kilka pojęć, bo w CSS łatwo pomylić rodzaj stylu z rodzajem selektora. Pokazany fragment znajduje się wewnątrz znacznika STYLE, więc jest to arkusz stylów osadzony w dokumencie, często nazywany stylem wewnętrznym. Styl lokalny, w szkolnym nazewnictwie bardzo często oznacza zapis bezpośrednio w konkretnym elemencie HTML, na przykład przez atrybut style. Tutaj takiego zapisu nie ma, więc samo umieszczenie reguł w sekcji STYLE nie czyni ich stylem lokalnym. Odnośnik, czyli element A, ma w tej definicji ustawione font-size: 16pt oraz text-transform: lowercase. Nie ma tam wartości 14pt dla odnośnika. Wartość 14pt dotyczy selektora P, czyli akapitów. To typowy błąd myślowy: ktoś widzi pierwszą regułę i przenosi jej właściwości na inne elementy, mimo że każda reguła CSS działa tylko na elementy pasujące do swojego selektora. Podobnie akapit P nie będzie zamieniany na małe litery, bo text-transform: lowercase przypisano do selektora A, a nie do P. Akapit będzie niebieski, pisany kursywą i rozmiarem 14pt. Dwie klasy są rozpoznawalne po kropce w selektorach TD.niebieski i TD.czerwony. W praktyce przy pracy nad stroną dobrze jest zawsze patrzeć na selektor po lewej stronie nawiasu klamrowego, a dopiero potem na deklaracje wewnątrz. To oszczędza masę dziwnych pomyłek przy debugowaniu wyglądu strony.