1 Temat 4: Klasy i identyfikatory

2 Kaskadowe arkusze stylów CSS pozwalają na formatowanie każdego ze znaczników dokumentu HTML na kilkanaście różnych sposobów. W tym celu stosuje się klasy i identyfikatory. Klasa jest atrybutem znaczników dokumentu HTML i odnosi się do selektora klasy lub klasy uniwersalnej. Atrybut class dla dowolnego znacznika prezentuje się następująco: … Selektor klasy jest nazwą klasy połączoną z innym selektorem za pomocą kropki: selektor.nazwa_klasy{cecha: wartość} Nazwa klasy może zawierać małe i wielkie litery, cyfry, dywizy (-) i znaki podkreślenia (_). Należy pamiętać, że klasa nie może zaczynać się od cyfry ani od dywizu oraz że nie powinno się używać w nazwie polskich znaków. Znając już zasadę tworzenia klas, zbudujemy za ich pomocą trzy akapity p o różnym formatowaniu: (HTML)

akapit – czerwony, courier new

3 Definiując klasę w stylach CSS, można pominąć nazwę selektoraDefiniując klasę w stylach CSS, można pominąć nazwę selektora. Wówczas powstanie tzw. Klasa uniwersalna, którą można stosować dla wszystkich znaczników dokumentu HTML. .klasa_uniwersalna {cecha:wartość} Stwórzmy klasę uniwersalną wprowadzającą dla wybranych znaczników obramowanie zielone, kreskowane:

4 Kolejny przykład: (CSS) .rameczka {border: dashed green} (HTML)

akapit p

5 Innym narzędziem do zmiany elementów strony są identyfikatoryInnym narzędziem do zmiany elementów strony są identyfikatory. Spełniają one podobną rolę jak klasy z tą różnicą, że tylko jeden element w dokumencie HTML może mieć dany identyfikator. Najczęściej stosuje się je do określania podstawowych sekcji strony, takich jak: nagłówek (logo), menu nawigacyjne, blok zawierający treść strony oraz stopka. Identyfikator wprowadzamy, stosując atrybut id dla wybranego znacznika, którego nazwa podlega takim samym zasadom jak nazwa klasy: Selektor identyfikatora jest nazwą atrybutu id połączoną z innym selektorem za pomocą krzyżyka („#”): selektor#nazwa_identyfikatora{cecha: wartość} Znając już zasadę tworzenia identyfikatorów, zbudujemy za ich pomocą logo zawarte w znacznikach div: (HTML)

6 Jeżeli chcemy zastosować atrybut id dla dowolnego znacznika, wystarczy utworzyć identyfikator uniwersalny, pomijając definicję selektora: #identyfikator_uniwersalny Wywołanie identyfikatora uniwersalnego wygląda tak samo jak w poprzednim przypadku, z tą różnicą, że można go przypisać do dowolnie wybranego znacznika w dokumencie.

7 Ćwiczenie: Zbuduj stronę, na której umieścisz wiersz. W celu sformatowania poszczególnych elementów wiersza (tytuł, autor, treść) wykorzystaj identyfikatory.