Metody budowania interfejsu uytkownika CSS Bartosz Sakowicz Skadnia

Metody budowania interfejsu użytkownika CSS Bartosz Sakowicz

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

Składnia CSS(2) Poszczególne pary cecha: wartość rozdziela się od siebie średnikami: <p style="font-size: 20 pt; font-weight: bold; background: green; color: red">Czcionka 20 pt, pogrubiona, koloru czerwonego na zielonym tle</p> Jeżeli chcemy przypisać konkretny styl dla większej ilości selektorów, oddzielamy je przecinkami: H 1, H 2, H 3 {font-family: Helvetica; color: yellow}

Umieszczanie styli na stronie Styl lokalny <p style="font-size: 12 pt; font-weight: bold; ">Treść akapitu</p> Umieszczanie definicji w sekcji <head><style type="text/css"><!-body {margin-left: 2 cm; margin-right: 2 cm} P {font-size: 14 pt; font-family: Arial, Helvetica; fontweight: normal} --></style></head>

Umieszczanie styli na stronie(2) Importowanie stylu z zewnętrznego arkusza <style type=”text/css”> <!-@import url("http: //www. dmcs. pl/style. css"); --> </style> lub <link type="text/css" rel=”stylesheet” href="/style. css">

Drzewo dokumentu html head title body p form img input select textarea • Document tree (drzewo dokumentu) • Child (dziecko) • Descendant (potomek) • Parent (rodzic) • Ascendant (przodek)

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

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): H 1 + P{margin-left: +30 mm) Jeżeli <h 1> i <p> mają wspólnego rodzica, to akapit zostanie odsunięty w prawo o 30 mm.

Selektory atrybutów Ogólna postać: element [atrybut relacja wartość] {deklaracja stylu} np: P [align=right] {color: blue} Prosty selektor atrybutu: H 3 [title] {color: #000000 }

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 } W powyższym przypadku "wartość" może stanowić część wartości atrybutu, aby warunek był spełniony.

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

Selektor ID #[etykieta ID] {deklaracja stylu} np: H 1#title {color: red} Przykładowe wykorzystanie na stronie: <h 1 id="title">Tytuł</h 1>

Selektory odsyłaczy Stan odsyłacza Przykładowa definicja Odsyłacz na stronie A: link {color: blue; background: red} Odwiedzony odsyłacz A: 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 momencie A: active {background: blue; color: red}

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 }

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: <table class="czcionka_arial"> <tr> <td>Tekst czcionką Arial</td> <td class="czcionka_courier">Tekst czcionką Courier</td> </tr> <td>Tekst czcionką Arial</td> </tr> </table>

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 <head>, • 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.

Czcionki Rodziny czcionek, np: <p style="font-family: Times, serif">Treść akapitu</p> <p style="font-family: Times, 'Times New Roman', 'Times New Roman CE', serif">Treść akapitu</p> Styl czcionki, np: <p style="font-style: normal">Treść akapitu</p> Dostępne słowa kluczowe: italic, obligue.

Wielkość czcionki, np: Czcionki(2) a) podawane jako słowa kluczowe: <p style ="font-size: słowo kluczowe">Treść akapitu</p> Słowa kluczowe: xx-small, medium, large, xx-large. Wielkości relatywne: larger, smaller (w stosunku do domyślnej). b) podawane w jednostkach miary: <p style ="font-size: 1 cm"></p> Dopuszczalne jednostki miar: centymetry (cm), cale (in), milimetry (mm), punkty (pt). c) podawane w procentach: <p style ="font-size: 150%"></p>

Czcionki(3) Waga czcionki, np: <p style ="font-weight: waga">Treść akapitu wyświetlana za pomocą wybranej wagi</p> Waga czcionki decyduje o stopniu pogrubienia. Dopuszczalne są następujące wartości: normal, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Czcionki(4) Umieszczanie i kolejność atrybutów W jednej definicji czcionki można chcieć zawrzeć dużą ilość jej atrybutów. Np: <p style ="font: small-caps bold 14 pt/18 pt Times, 'Times New Roman', serif"> Akapit małe kapitaliki, pogrubiony, 14 pkt, 18 pkt odstępu między liniami bazowymi wierszy, Times. </p> 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->lineheight->font-family

Tekst Odstępy między literami, np: <p style="letter-spacing: 3 mm">3 -milimetrowe odstępy między literami. </p> Dekoracja tekstu, np: <a style ="text-decoration: none" href="http: //www. dmcs. p. lodz. pl">To jest odsyłacz do Katedry DMCS. </a> Możliwe wartości: underline, overline, line-through.

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: <p style ="text-transform: capitalize">To jest jakiś tekst. </p> Efekt w przeglądarce: To Jest Jakiś Tekst.

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

Tekst(4) Wcięcie tekstu, np: Możemy decydować o przesunięciu początku pierwszej linii tekstu względem pozostałych: <p style ="text-indent: 10%">To jest akapit, w którym pierwszy wiersz będzie wcięty o 10% szerokości strony. </p> 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 jednostkami miar. także podawać posługując się

Kolor i tło Kolor tekstu, np: <h 3 style ="color: #00 FF 00">Zielony tytuł trzeciego stopnia</h 3> <table> <tr> <td style="color: #FF 0000">Czerwony tekst</td> </tr> </ table > Kolor tła, np: <p style="background-color: niebieskim</p> blue">Akapit na tle

Tło w postaci grafiki Pod każdy element możliwe jest podłożenia obrazka w charakterze tła: <h 3 style="background-image: url(obrazek. gif)">Tytuł na tle obrazka</h 3> Powtarzanie tła (gdy obrazek jest mniejszy od tła obiektu): <h 3 style ="background-image: url(obrazek. gif); background-repeat: repeat-x">Tytuł na tle obrazka</h 3> 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).

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: attachment: fixed} url(nazwa_obrazka); background-

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: 2 cm 3 cm background-position: 30% 50%

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

Marginesy Możemy definiować następujące marginesy: margin-top (górny), marginbottom (dolny), margin-left (lewy), margin-right (prawy), np: <p style="margin-top: 1 cm">Akapit</p> <p style="margin: 2 cm"> Dwucentymetrowy margines ze wszystkich stron </p> <p style="margin: 2 cm 3 cm"> Dwucentymetrowy margines z góry i dołu oraz trzycentymetrowy z lewej i prawej </p> <p style="margin: 2 cm 3 cm 1 cm 4 cm"> Indywidualne marginesy dla każdej ze stron. </p> 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.

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.

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), upperalpha (duże litery arabskie), none (brak wyróżnika), np: <ul style="list-style-type: disc"> <li>pierwszy punkt</li> <li>drugi punkt</li> </ul> Obrazek będący wyróżnikiem wykazu, np: <ul style="list-style-image: url(dot. gif)">

Rozmiary elementów a) szerokość: <p style="width: 150 px"> Akapit o szerokości 150 pikseli. </p> b) wysokość: <p style="height: 150 px"> "> Akapit o wysokości 150 pikseli. </p>

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: <div style="position: absolute; left: 0%; top: 0%"><img src="obrazek. gif" border="0" alt="Obrazek"></div>

Pozycjonowanie względne odnosi się do miejsca wstawiania elementu na stronie. Jest łatwiejsze do kontrolowania i raczej należy używać tego sposobu. Np: <SPAN style="position: relative; left: 200 px; top: 300 px; width: 100 px"> 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</SPAN>

Przykład definicji: Kursory <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="obrazek. gif" border="0" style="cursor: help" alt="Obrazek"> Możliwe wartości: · crosshair

Przykład definicji: Kursory <img src="obrazek. gif" border="0" style="cursor: help" alt="Obrazek"> Możliwe wartości: · crosshair - krzyżyk, hand - ręka · wait - klepsydra, · default - typowy dla danego elementu · auto - zgodny z domyślnymi ustawieniami przeglądarki text - typowy kursor tekstowy · 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.

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: <h 1 style="page-break-before: always">Rozdział 7</h 1>