Arkusze stylów CSS Cascading Style Sheets

Transkrypt

1 Arkusze stylów CSS Cascading Style Sheets

2 HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach

3 Zalety CSS Lepsza kontrola nad czcionkami oraz układem strony Mniej pracy. Wygląd całej witryny internetowej można zmienić za jednym razem, edytując jeden arkusz stylów. Potencjalnie mniejsze dokumenty i krótszy czas pobierania. Bardziej dostępne strony. (przeglądarki nie wizualne urządzenia mobilne) Stabilna obsługa w przeglądarkach.

4 Jak działają arkusze stylów? 1. Należy rozpocząć od dokumentu, ktory został oznaczony za pomocą HTML 2. Teraz trzeba napisać reguły stylow określające, jak powinny wyglądać poszczególne elementy. 3. Należy dołączyć reguły stylow do dokumentu. Kiedy przeglądarka wyświetli dokument, będzie stosowała się do reguł wyświetlania elementow z arkusza stylow (o ile użytkownik nie zastosował własnych stylow, do czego dojdziemy za chwilę).

5 Budowa arkusza Konstrukcja stylu: selektor { cecha: wartość; } Selektor określa jakiemu elementowi przypisać wartość Cecha określa co chcemy zrobić Wartość dokładne określenie cechy body{width: 400px;} to reguła Każda reguła wybiera element i deklaruje, w jaki sposób powinien on działać.

6 Bloki deklaracji REGUŁA

7 Nawiasy średniki kropki section { float: right; margin-bottom: 10px; max-width: 450px; padding: 10px; }

8 Tworzymy arkusz i podpinamy <link href="style.css" rel="stylesheet" type="text/css" /> Tekst ten umieszczamy w head naszego nowego dokumentu html W Notepad tworzymy nowy dokument i zapisujemy go jako style.css Zapisu dokonujemy w folderze w którym mamy index html

9 Zrozumieć dziedziczenie

10 Zrozumieć dziedziczenie cd.

11 Kaskadowość Czyli określenie pierwszeństwa w stylowaniu. Kaskada odnosi się do sytuacji, kiedy kilka źrodeł informacji dotyczących stylów rywalizuje o kontrolę nad elementami znajdującymi się na stronie Informacje o stylach przekazywane są w dół, dopóki nie zostaną nadpisane przez polecenie dotyczące stylu mające większą wagę.

12 Model pojemnika Do tych pojemników mają zastosowanie właściwości dotyczące: obramowania, marginesów, dopełnienia tła. Pojemniki te można nawet przemieszczać i pozycjonować na stronie.

13 Czas na ćwiczenia

14 Czcionki

15 Czcionki cd.

16 font-family body { font-family: Arial; } tt { font-family: Courier, monospace; } p { font-family: Trebuchet MS, Verdana, sansserif; }

17 Jednostki względne Jednostki względne oparte są na jakiejś innej wielkości, na przykład domyślnej wielkości tekstu czy rozmiarze elementu rodzica. em jednostka miary odpowiadająca aktualnej czcionce ex wielkość zbliżona do wysokości litery x danej czcionki. px piksel; zaliczany do jednostek względnych, ponieważ jego wielkość różni się w zależności od rozdzielczości ekranu w szczególności w przypadku porównania niskiej rozdzielczości ekranu z wysoką rozdzielczością materiałów drukowanych % wartości procentowe; choć jako tako nie są jednostką miary, są innym sposobem na określenie wielkości w sposób względny Zaleca się wykorzystywanie em, wartości procentowych oraz połączenia tych dwóch możliwości w określaniu wielkości tekstu

18 Marginesy i obramowania Margin czyli margines zewnętrzny oddalający jeden element od drugiego. Padding czyli odstęp wewnętrzny oddalający element w pudełku od jego krawędzi

19

20 Padding dopełnienie Dopełnienie to obszar pomiędzy obszarem zawartości elementu a obramowaniem (czy też miejscem, w którym znalazłoby się obramowanie, gdyby zostało ono zdefiniowane). Dopełnienie można dodać do poszczegolnych bokow dowolnego elementu (blokowego bądź wewnętrznego). Istnieje rownież skrotowa właściwość padding pozwalająca na dodanie dopełnienia ze wszystkich stron elementu za jednym razem.

21 padding-top padding-right padding-bottom padding-left Np.. p{ padding-top: 15px; }

22 blockquote { padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; background-color: #D098D4; }

23 Marginesy margin Marginesy zapobiegają bliskiemu stykaniu się elementów ze sobą lub z krawędzią okna przeglądarki. Marginesy można nawet wykorzystać do zrobienia miejsca na dodatkową kolumnę treści margin działają dość podobnie do właściwości dotyczących dopełnienia, które już omówiliśmy

24 Zachowanie marginesów Marginesy górne oraz dolne sąsiadujących elementów składają się zamiast się kumulować, przylegające marginesy nakładają się na siebie i wykorzystana zostaje jedynie większa wartość.

25

26 Jedynym przypadkiem, kiedy marginesy górne oraz dolne nie składają się, są elementy pływające lub pozycjonowane bezwzględnie. Marginesy prawe oraz lewe nigdy się nie składają, dlatego są miłe i przewidywalne.

27 Wysokość i szerokość Za pomocą właściwości width oraz height określa się szerokość oraz wysokość obszaru zawartości elementu. Wartość szerokości oraz wysokości można podać jedynie dla elementów blokowych oraz dla nietekstowych elementów wewnętrznych, takich jak obrazki. Właściwości width oraz height nie mają zastosowania do tekstowych elementów wewnętrznych (inaczej niezastępowanych elementów wewnętrznych) i zostaną zignorowane przez przeglądarkę.

28 header { width: 400px; height: 100px; background: #C2F670; }

29 Wartości minimalne i maksymalne służące do ustalania minimalnych oraz maksymalnych wysokości i szerokości elementów blokowych. Mogą one być przydatne, jeśli chce się w jakiś sposób ograniczyć rozmiar elementu. max-height, max-width, min-height, min-width

30 Obramowanie Obramowanie to po prostu linia narysowana wokół obszaru zawartości elementu oraz jego (opcjonalnego) dopełnienia Do wyboru jest osiem stylów obramowania; dodatkowo każde z nich może mieć dowolną szerokość oraz kolor. Obramowanie może pojawić się tylko wokół elementu lub po wybranej stronie Zgodnie ze specyfikacją CSS jeśli nie podano stylu obramowania, obramowanie nie istnieje..

31 border-top-style, border-right-style, border-bottom-style, border-left-style

32 none hidden dotted dashed solid double groove ridge inset outset inherit

33 div#silly { border-top-style: solid; border-right-style: dashed; border-bottom-style: double; border-left-style: dotted; width: 300px; height: 100px; }

34 Kolor obramowania Kolory obramowania podaje się w ten sam sposob: używając właściwości dla wybranej strony elementu lub korzystając ze skrotowej właściwości border-c border-top-color, border-right-color, border-bottom-color, border-left-colorolor.

35 Połączenie stylu Właściwość border oraz właściwości określające obramowanie z każdej strony elementu mogą zawierać wartości dotyczące stylu, szerokości oraz koloru w dowolnej kolejności h1 { border-left: red.5em solid; } /* tylko obramowanie lewe */ h2 { border-bottom: 1px solid; } /* tylko obramowanie dolne */ p.example { border: 2px dotted #663; } /* wszystkie cztery strony */

36 Przypisanie ról właściwość display, która pozwala autorom wybrać sposob zachowania się elementów w układzie strony. Wartości: inline block list-item run-in inline-block table inline-table table-rowgroup table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none inherit

37 Elementy pływające i pozycjonowanie Element pływający (ang. fl oating) przesuwany jest w prawo lub lewo, a tekst po nim następujący może być wokoł niego zawijany (inaczej mowiąc, może go opływać). Pozycjonowanie (ang. positioning) to sposob określenia lokalizacji elementu w dowolnym miejscu strony z dokładnością co do piksela

38

39 float Mowiąc w skrocie, właściwość float przesuwa element na prawo lub lewo najbardziej, jak się da, pozwalając, by następująca po nim zawartość była wokoł niego zawijana ( opływała go ). Są one wykorzystywane do konstruowania układów wielokolumnowych, tworzenia pasków nawigacyjnych z list, a także wyrównania elementów podobnego do tabel bez stosowania samych tabel.

40 float Wartości: left right none inherit Stosuje się do: wszystkich elementów img{ float: left; }

41

42 Elementy pływające Tekstowe - Dla pływających elementow tekstowych należy zawsze podawać szerokość. Dlaczego nie dla img? Marginesy elementów pływających nie są składane!

43 Czyszczenie zawijania tekstu Zawijanie (czy opływanie elementu) wyłącza się w elemencie, ktory powinien zaczynać się pod elementem pływającym. Zastosowanie właściwości clear do elementu zapobiega wyświetlaniu go obok elementu pływającego i zmusza go do rozpoczynania się w kolejnym dostępnym obszarze pod tym elementem pływającym.

44 clear clear Wartości: left right both none inherit Jeśli elementow pływających jest więcej i chcemy być pewni, że dany element będzie się rozpoczynał poniżej ich wszystkich, należy skorzystać z wartości both, ktora powoduje brak zawijania się obok elementów pływających znajdujących się po dowolnej stronie

45 Pozycjonowanie Pozycjonowanie jest kolejną cechą CSS, ktora może powodować niespodziewane zachowania w przeglądarce.

46 Elementy na stronie mogą być pozycjonowane względem miejsca, w którym normalnie by się znalazły na stronie, lub też mogą zostać całkowicie wyjęte z normalnego układu strony i umieszczone w określonym miejscu na niej. Można również umieścić element względem okna przeglądarki

47 Typy pozycjonowania position Wartości: static relative absolute fixed inherit Właściwość position wskazuje, że element ma być pozycjonowany, a także podaje, jaka metoda pozycjonowania zostanie przy tym wykorzystana #gora{ Position: absolute }

48 static Pozycjonowanie statyczne (ang. static positioning) to normalny schemat pozycjonowania, w ktorym elementy rozmieszczane są zgodnie z kolejnością, w jakiej pojawiają się w źrodle dokumentu.

49 relative Pozycjonowanie względne (ang. relative positioning) przesuwa pojemnik elementu względem jego oryginalnej pozycji w układzie dokumentu. Pozycjonowanie tego typu odróżnia się od pozostałych tym, że miejsce, w którym element normalnie by się znalazł, jest zachowywane.

50 absolute Elementy pozycjonowane bezwzględnie (ang. absolute positioning) są całkowicie usuwane z normalnego układu dokumentu i umieszczane względem elementu zawierającego (więcej informacji na ten temat pojawi się nieco później). W przeciwieństwie do elementów pozycjonowanych względnie obszar, w którym powinny się znajdować elementy pozycjonowane bezwzględnie, jest zamykany. Tak naprawdę nie mają one zatem wpływu na ułożenie elementów ich otaczających.

51 fixed Cechą charakterystyczną pozycjonowania sztywnego (ang. fixed positioning) jest to, że element pozostaje w jednym miejscu okna przeglądarki, nawet jeśli cały dokument jest przewijany. Elementy sztywne usuwane są z normalnego układu dokumentu i pozycjonowane względem okna przeglądarki, a nie innego elementu w dokumencie.

52 Okreslenie pozycji Po wybraniu metody pozycjonowania sama pozycja określana jest za pomocą czterech wartości przesunięcia (ang. offset). top, right, bottom, left em { position: relative; top: 30px; left: 60px; background-color: fuchsia; }

53 Position: relative Pozycjonowanie względne przesuwa element względem oryginalnego miejsca, jakie zajmowałby on w normalnym układzie dokumentu. Miejsce, ktore zająłby element, zostaje zachowane i nadal wpływa na ułożenie otaczających go elementow.

54 Pozycjonowanie wzgledne em { position: relative; top: 30px; left: 60px; background-color: fuchsia;

55 Pozycjonowanie bezwzględne em { position: absolute; top: 30px; left: 60px; background-color: fuchsia;

56 Position:absolute Element pozycjonowany jest względem najbliższego bloku zawierającego Bloki zawierające: Jeśli element pozycjonowany nie jest zawarty wewnątrz innego elementu pozycjonowanego, zostanie on rozmieszczony względem początkowego bloku zawierającego (utworzonego przez element html). Jeśli jednak element ma przodka (to znaczy zawarty jest w innym elemencie),ktorego właściwość position ustawiona jest na relative, absolute lub fixed, element ten zostanie zamiast tego wypozycjonowany względem krawędzi tego elementu.

57 Element pozycjonowany p stał się blokiem zawierającym dla elementu em.

58 Dodajemy width: 200px; margin: 25px;

59 Określanie pozycji dodatnie wartości przesunięcia odpychają pojemnik pozycjonowanego elementu od wybranej krawędzi i spychają go w kierunku środka bloku zawierającego. Jeśli nie podano żadnych wartości dla właściwości szerokości oraz przesunięcia, szerokość ustawiana jest na auto, a przeglądarka dodaje wystarczającą ilość miejsca, by układ strony działał.

60

61