Metody budowania interfejsu użytkownika CSS Bartosz Sakowicz.

Slides:



Advertisements
Podobne prezentacje
Dokument HTML jest zwykłym
Advertisements

Tworzenie stron internetowych
Tworzenie stron internetowych
Metody pozycjonowania elementów na stronie www
Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz
HTML.
Kolory, grafika, multimedia
Style CSS.
Kurs WWW – wykład 3 Paweł Rajba
„Zasady formatowania plików w formacie Microsoft Word”
Andrzej Pędzich HTML ramki, menu, odnośniki.
Narzędzia internetowe Paweł Rajba
Budowa i układ strony dokumentu
Podstawy i rozszerzenia języka HTML
Tworzenie stron internetowych www World Wide Web
OPRACOWAŁ : KONRAD MIGAŁA iz krótki tekst Krótki tekst Do formatowania tekstu użyjemy znacznika jest to znacznik który umożliwia utworzenie akapitu.
języka hipertekstowego
Tworzenie stron internetowych
Podstawy tworzenia stron WWW
Kurs języka HTML Mariusz Tomczyk.
Wstawianie stylów CSS.
Poznajemy edytor tekstu Microsoft Word
Edytor tekstu Word.
Temat 7: Tekst.
Specjalizacja "Dziennikarstwo On-line„ Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga
Cascading Style Sheets
CSS – Kolor tła.
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 3 Prowadzący: Dariusz Jaruga
Formatowanie tekstu w Microsoft Word
Czcionki, tekst, odnośniki
Ujarzmić Worda Agnieszka Terebus.
Temat 5: Pozycjonowanie elementów
HTML Hyper Text Markup Language
Wprowadzenie do CSS Okiełznać style.
Część I. Grupowanie elementów  Elementy i są używane do grupowania i strukturyzowania dokumentu. Będziesz je często wykorzystywał wraz z atrybutami class.
Temat 13: Ramki.
HTML.
Aplikacje internetowe
Selektory. Selektor elementu Selektor {własciwość:wartość}
Aplikacje internetowe
Elementy multimedialne na stronie
Aplikacje internetowe Tabele Ciąg dalszy. Wprowadzanie złamań wiersza Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań.
Aplikacje internetowe
Temat 3: Właściwości CSS
Aplikacje internetowe
Aplikacje internetowe
LISTY HTML. Listy s ą definiowane za pomoc ą znacznika podstawowego innego dla ka ż dego rodzaju list Specyfikacja XHTML, zawiera specjalne znaczniki.
HTML.
Aplikacje internetowe CSS - style fontów, tekstu Ciąg dalszy.
Treści multimedialne - kodowanie, przetwarzanie, prezentacjaOdtwarzanie treści multimedialnych Andrzej Majkowski informatyka +
Temat 9: Obrazy i multimedia
Aplikacje internetowe
Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Wprowadzenie do kaskadowych arkuszy stylów Informatyka.
Temat 4: Klasy i identyfikatory
XHTML Tworzenie stylów CSS Damian Urbańczyk. Zewnętrzny plik CSS Aby ułatwić sobie pracę ze stylami, najlepiej utworzyć osobny plik, w którym będą przechowywane.
CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące.
C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów.
Temat 1: CSS Dołączanie stylów do dokumentu
HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie.
Temat 2: Składnia kaskadowych arkuszy stylów. Za zmianę wyglądu witryny w kaskadowych arkuszach stylów odpowiadają reguły stylów. Każda z reguł powiązana.
Technologie internetowe
Drzewo dokumentu html.
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
XHTML + CSS Style definiujące tekst Damian Urbańczyk.
Wykład 2 Mechatronika PWSW Informatyka. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari.
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
Zasady formatowania szkolnej pracy pisemnej
Wprowadzenie do edytorów tekstu.
Arkusz stylów CSS Cascading Style Sheet.
Style definiujące tekst
Zapis prezentacji:

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 H1 {font-size: 20pt} - 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: 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}

Umieszczanie styli na stronie Styl lokalny Treść akapitu Umieszczanie definicji w sekcji <!-- body {margin-left: 2cm; margin-right: 2cm} P {font-size: 14pt; font-family: Arial, Helvetica; font- weight: normal} -->

Umieszczanie styli na stronie(2) Importowanie stylu z zewnętrznego arkusza url(" --> lub

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

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.

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.

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

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.

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}

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

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}

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: Tekst czcionką Arial Tekst czcionką Courier Tekst czcionką Arial

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.

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

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:

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

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

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.

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.

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ść).

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.

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

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).

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}

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%

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

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.

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), upper- alpha (duże litery arabskie), none (brak wyróżnika), np: pierwszy punkt drugi punkt Obrazek będący wyróżnikiem wykazu, np:

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

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:

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

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.

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