1 Metody budowania interfejsu użytkownika CSS Bartosz Sakowicz

2 Składnia CSS Podstawowa składnia CSS ma postać: selektor { cecha: wartość } np: P {font-family: Arial} - przypisanie czcionki Arial do znacznika nowego akapitu H1 {font-size: 20pt} - przypisanie czcionki o rozmiarze 20 pikseli do nagłówka pierwszego rzędu

3 Składnia CSS(2) Poszczególne pary cecha:wartość rozdziela się od siebie średnikami: Czcionka 20pt, pogrubiona, koloru czerwonego na zielonym tle Jeżeli chcemy przypisać konkretny styl dla większej ilości selektorów, oddzielamy je przecinkami: H1, H2, H3 {font-family:Helvetica; color:yellow}

6 Drzewo dokumentu html head body titlepformimg input selecttextarea Document tree (drzewo dokumentu) Child (dziecko) Descendant (potomek) Parent (rodzic) Ascendant (przodek)

7 Descendant selector (selektor potomka) H1 H2 B {color: blue} Jeżeli pod elementem znajdzie się element i pod znajdzie się element, to fragment objęty znacznikiem uzyska kolor niebieski. ul ul li {color:green} Zagnieżdżony wykaz uzyska kolor zielony.

8 Selektor dziecka i braci Child selector (selektor dziecka): P>U {color: green} Jeżeli podkreślenie wystąpi wewnątrz akapitu, będzie miało kolor zielony. Sibling selector (selektor braci): H1 + P{margin-left: +30 mm) Jeżeli i mają wspólnego rodzica, to akapit zostanie odsunięty w prawo o 30 mm.

10 Selektory atrybutów(2) Selektor atrybutu o określonej wartości Ogólna składnia: element [atrybut="wartość"] { deklaracja stylu } lub [atrybut="wartość"] { deklaracja stylu } lub [atrybut~="wartość"] { deklaracja stylu } W powyższym przypadku "wartość" może stanowić część wartości atrybutu, aby warunek był spełniony.

11 Klasy elementów *.klasa1 {font-family:Arial} Przykładowe wykorzystanie: Ten tekst będzie wypisany z użyciem czcionki Arial Przykład definicji różnych stylów dla tego samego znacznika: P {font-family: Arial; font-size: 12pt} P.uwagi {font-family: Arial; font-size: 12pt; font-weight: bold} P.wykrzyknik {font-family: Verdana; font-size: 12pt; color: red} P.suplement {font-family: Arial; font-size: 8pt}

12 Selektor ID #[etykieta ID] {deklaracja stylu} np: H1#title {color: red} Przykładowe wykorzystanie na stronie: Tytuł

13 Selektory odsyłaczy Stan odsyłaczaPrzykładowa definicja Odsyłacz na stronieA:link {color:blue; background: red} Odwiedzony odsyłaczA:visited {color:yellow} Odsyłacz reagujący na pojawienie się nad nim kursora myszki A:hover {background:yellow; color:red} Odsyłacz aktywny w danym momencieA:active {background:blue; color:red}

14 Selektory specyficzne dla tekstu Selektor first-line Pozwala na wyróżnienie pierwszej linii akapitu. Przykładowe użycie: P:first-line {text-transform: uppercase} Selektor first-letter Pozwala na wyróżnienie pierwszej litery akapitu. Przykładowe użycie: P:first-letter { font-size: 300%; color:blue }

15 Dziedziczenie styli Dziedziczenie polega na tym, że elementy leżące niżej w drzewie dziedziczą cechy elementów leżących nad nimi, chyba że je specjalnie przedefiniujemy. Przykład: Tekst czcionką Arial Tekst czcionką Courier Tekst czcionką Arial

16 Kaskadowość styli Kaskadowość polega na tym, że style mogą być przedefiniowywane. Style mogą być umieszczane w trzech miejscach dokumentu HTML: importowane w nagłówku, umieszczane w sekcji, lokalnie definiowane. Dla danego elementu liczy się zawsze "najbliższa" definicja. Zastosowanie: ogólne arkusze dla całego serwisu, bardziej szczegółowe dla konkretnych działów, jeszcze bardziej szczegółowe dla poszczególnych stron.

17 Czcionki Rodziny czcionek, np: Treść akapitu Styl czcionki, np: Treść akapitu Dostępne słowa kluczowe: italic, obligue.

18 Czcionki(2) Wielkość czcionki, np: a) podawane jako słowa kluczowe: Treść akapitu Słowa kluczowe: xx-small, x-small, small, medium, large, x- large, xx-large. Wielkości relatywne: larger, smaller (w stosunku do domyślnej). b) podawane w jednostkach miary: Dopuszczalne jednostki miar: centymetry (cm), cale (in), milimetry (mm), punkty (pt). c) podawane w procentach:

19 Czcionki(3) Waga czcionki, np: Treść akapitu wyświetlana za pomocą wybranej wagi Waga czcionki decyduje o stopniu pogrubienia. Dopuszczalne są następujące wartości: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

20 Czcionki(4) Umieszczanie i kolejność atrybutów W jednej definicji czcionki można chcieć zawrzeć dużą ilość jej atrybutów. Np: Akapit małe kapitaliki, pogrubiony, 14 pkt, 18 pkt odstępu między liniami bazowymi wierszy, Times. Według specyfikacji atrybuty związane z czcionkami powinny być podawane w następującej kolejności: font-style->font-variant->font-weight->font-size->line- height->font-family

21 Tekst Odstępy między literami, np: 3-milimetrowe odstępy między literami. Dekoracja tekstu, np: To jest odsyłacz do Katedry DMCS. Możliwe wartości: underline,overline,line-through.

22 Tekst(2) Transformacja tekstu, np: Istnieją cztery transformacje tekstu: none (brak), capitalize (pierwsze litery wyrazów będą duże), uppercase (wszystko dużymi literami), lowercase (wszystko małymi literami). Np: To jest jakiś tekst. Efekt w przeglądarce: To Jest Jakiś Tekst.

23 Tekst(3) Wyrównanie tekstu, np: To jest tekst wyrównany do prawego marginesu. Dopuszczalne wartości: left (do lewej), right (do prawej), center (wyśrodkowanie), justify (rozciągnięcie na całą dostępną szerokość).

24 Tekst(4) Wcięcie tekstu, np: Możemy decydować o przesunięciu początku pierwszej linii tekstu względem pozostałych: To jest akapit, w którym pierwszy wiersz będzie wcięty o 10% szerokości strony. To jest akapit, w którym pierwszy wiersz będzie wcięty o 10% szerokości strony. Efekt w przeglądarce: To jest akapit, w którym pierwszy wiersz będzie wcięty o 10% szerokości strony. Odległość można także podawać posługując się jednostkami miar.

25 Kolor i tło Kolor tekstu, np: Zielony tytuł trzeciego stopnia Czerwony tekst Kolor tła, np: Akapit na tle niebieskim

26 Tło w postaci grafiki Pod każdy element możliwe jest podłożenia obrazka w charakterze tła: Tytuł na tle obrazka Powtarzanie tła (gdy obrazek jest mniejszy od tła obiektu): Tytuł na tle obrazka Możliwe wartości: repeat-x (powtarzanie w poziomie), repeat-y (powtarzanie w pionie), repeat (powtarzanie w poziomie i w pionie), no- repeat (bez powtarzania).

27 Tło w postaci grafiki(2) Zaczepienie tła Obrazek będący tłem może być "zaczepiony" na dwa sposoby:  może tkwić nieruchomo w stosunku do treści strony  może tkwić nieruchomo w stosunku do ekranu Zachowanie pierwsze jest zachowaniem domyślnym. Aby je zmienić należy zastosować definicję jak poniżej: body {background: url(nazwa_obrazka); background- attachment: fixed}

28 Tło w postaci grafiki(3) Pozycja tła Jeżeli tło jest mniejsze od wypełnianego obszaru można ustalić jego pozycję względem obszaru (można stosować także w tabelkach): background-position: wartość, gdzie wartość może być następującymi słowami kluczowymi: top (góra), bottom (dół), center (wyśrodkowany), left (po lewej), right (po prawej) lub ich kombinacją, np: background-position: top right. Można także podać wartości liczbowe lub procentowe (liczone od lewego górnego rogu wypełnianego obszaru)(x,y), np: background-position: 2cm 3cm background-position: 30% 50%

29 Suwaki Nazwa atrybutuOpis Scrollbar-Base-ColorKolor powierzchni suwaka i strzałek oraz rynny suwaka. Scrollbar-Face-ColorKolor powierzchni suwaka i strzałek, a także kolor składowy rynny suwaka Scrollbar-Arrow-ColorKolor strzałek Scrollbar-Highlight- Color Kolor składowy rynny suwaka Scrollbar-Shadow-ColorKolor płytszego cienia Scrollbar-Dark-Shadow- Color Kolor głębszego cienia Scrollbar-3dLight-ColorKolor zewnętrznego cienia

30 Marginesy Możemy definiować następujące marginesy: margin-top (górny), margin- bottom (dolny), margin-left (lewy), margin-right (prawy), np: Akapit Dwucentymetrowy margines ze wszystkich stron Dwucentymetrowy margines z góry i dołu oraz trzycentymetrowy z lewej i prawej Indywidualne marginesy dla każdej ze stron. Można także zdefiniować tzw. wewnętrzne marginesy posługując się poleceniem padding-x, gdzie x jest analogiczne do polecenia margin-x. Sposób mieszania atrybutów jest identyczny.

31 Obramowania Są bardzo różnie realizowane przez różne przeglądarki. Najbardziej uniwersalne wartości są następujące: border-x-width - grubość obramowania, gdzie x może być: top, bottom, left, right. border-color - kolor obramowania border-style - styl obramowania, może przyjmować następujące wartości: none (brak), dotted (kropkowane), dashed (z przerywanych linii), solid (z linii ciągłej), double (z podwójnej linii ciągłej), a także kilka innych, których kształt jest dość skomplikowany do opisania: groove, ridge, inset, outset.

32 Wykazy Rodzaj wyróżnika wykazu Służy do tego definicja list-style-type i może ona przyjmować następujące wartości: disc (wypełnione koło), circle (okrąg), square (kwadrat), decimal (liczby dziesiętne), lower-roman (małe liczby rzymskie), upper-roman (duże liczby rzymskie), lower-alpha (małe litery arabskie), upper- alpha (duże litery arabskie), none (brak wyróżnika), np: pierwszy punkt drugi punkt Obrazek będący wyróżnikiem wykazu, np:

33 Rozmiary elementów a) szerokość: Akapit o szerokości 150 pikseli. b) wysokość: "> Akapit o wysokości 150 pikseli.

34 Pozycjonowanie absolutne Pozycjonowanie absolutne powoduje wstawienie danego elementu w określoną część strony bez względu na obecność innych elementów na stronie. Można w ten sposób uzyskiwać efekty nakładania się elementów na siebie. Np: Obrazek umieszczony na stałe w lewym górnym rogu ekranu:

35 Pozycjonowanie względne Pozycjonowanie względne odnosi się do miejsca wstawiania elementu na stronie. Jest łatwiejsze do kontrolowania i raczej należy używać tego sposobu. Np: Ten akapit jest odsunięty od lewego górnego rogu miejsca jego zamocowania o 200 pikseli w poziomie i 300 pikseli w pionie i ma szerokość 100 pikseli

36 Kursory Przykład definicji: Możliwe wartości:  crosshair - krzyżyk, hand - ręka  wait - klepsydra, text - typowy kursor tekstowy  default - typowy dla danego elementu  auto - zgodny z domyślnymi ustawieniami przeglądarki  x-resize - powoduje zmianę kierunku pokazywania strzałki kursora. Dozwolone są cztery kierunki świata oraz ich kombinacje. X może przyjmować następujące wartości: n,w,e,s lub kierunki pośrednie, np: ne.

37 Drukowanie stron WWW Strony można przełamywać za pomocą jednego z dwóch poleceń: page-break-before: wartość - przełamanie strony przed danym elementem page-break-after: wartość - przełamanie strony po danym elemencie W obecnej chwili jedyną możliwą wartością jest always. Np: Rozdział 7