1 Kaskadowe arkusze stylów CSS - Cascading Style Sheets

2  Przy tworzeniu strony WWW należy pamiętać, że kod HTML opisuje strukturę i zawartość dokumentu (elementy akapitów p, nagłówków h1, h2, tabel,sekcji), a wygląd strony definiujemy w pliku CSS ( Cascading Style Sheets), czyli pliku kaskadowych arkuszy stylów.  W przypadku braku stylów przeglądarka zastosuje style domyślne, które zazwyczaj są dość ubogie.

3 Teoretycznie style można umieszczać w trzech miejscach:  w oddzielnym pliku (style zewnętrzne)  w pliku HTML w nagłówku strony – między oraz ( style wewnętrzne)  w pliku HTML przy konkretnych elementach – między oraz (atrybut style )

4  Przy projektowaniu witryny najlepiej korzystać z pierwszego sposobu.  Wynika to z faktu, że wiele podstron może mieć jeden wspólny plik ze stylami, czyli w razie modyfikacji musimy dokonać zmiany w jednym miejscu. Ponadto pliki HTML są rozmiarowo mniejsze, bo nie są dołączone do pliku linie zawierające formatowanie elementów, a witryna zużywa mniej transferu, bo plik CSS zostanie pobrany z serwera tylko raz.  W chwili obecnej style dokumentów XHTML są opisywane wyłącznie w języku CSS. Jest to język domyślny stosowany przez wszystkie przeglądarki.

5 Style zewnętrzne  Style zapisujemy w osobnym pliku  Plik ze stylami ma zazwyczaj rozszerzenie.css  Zakładamy, że plik style.css znajduje się w tym samym folderze co plik index.html.  Tak zdefiniowane style dołączamy do dokumentu XHTML, umieszczając w nagłówku strony element link  Ctrl+B+Z, Ctrl+B+S

6 Style zewnętrzne Lorem ipsum dolor sit amet... W kodzie XHTML pojawia się element link z atrybutem href, którego wartością jest nazwa pliku ze stylami.

7 p { background: yellow; font-size: 16px; font-family: Arial; color: red; } Podany zapis oznacza, że wszystkie akapity (selektor p) mają mieć żółte tło, czcionkę Arial, czerwoną o wielkości 16 pikseli.

8 Style zewnętrzne 2 WITAJ

9 h1 { margin: 20px; background: blue; color: white; border: 4px solid black; text-align: center; }

10 Tworząc kolejne wpisy (reguły) do pliku ze stylami trzymamy się schematu: selektor { własność_1 : wartość; własność_2 : wartość; itd. }  Uwaga! Selektory, własności i wartości piszmy małymi literami, aby uniknąć błędu.

11 Składnia kaskadowych arkuszy stylów

12 Terminologia  Arkusze stylów składają się z reguł (ang. rule). Pojedyncza reguła ma postać: p { font-size: 120%; font-family: Arial; }  Składa się ona z SELEKTORA- p oraz BLOKU DEKLARACJI zawartego między nawiasami klamrowymi { oraz }.  Selektor p mówi o tym, że reguła dotyczy elementu p, czyli treści zawartej wewnątrz znaczników oraz.  W bloku ujętym w nawiasy { i } występują dwie deklaracje. Pierwsza składa się z właściwości font-size i wartości 120%, a druga z właściwości font-family i wartości Arial.

13

14 Komentarze  Komentarze w CSS oznaczamy parami znaków /* oraz */ h1 { /*wyśrodkowanie poziome */ text-align: center; }  Komentarze można umieszczać wewnątrz oraz na zewnątrz bloków  Komentarz może rozciągać się na dowolną liczbę linii, ale nie może być zagnieżdżany

15

16

17 Przy własnościach dotyczących koloru można używać kilku sposobów jego określenia:  za pomocą stałych np. red, blue itd. – pełna lista znajduje się w pliku pod adresem www.w3.org/TR/css3-color i znajdziemy tu również niestandardowe kolory takie jak crimson czy cornflowerblue  ustalając nasycenie czerwieni, zieleni i niebieskiego: → w kodzie RGB, np. rgb(20%,15%, 88%) lub rgb(12,54,233), gdzie liczby w nawiasie przyjmują wartości od 0 do 255 → w kodzie szesnastkowym, np. #273cfe, gdzie każda dwójka znaków jest liczbą dziesiętną z zakresu 0..255

18

19 Przy własności margin, odnoszącej się do marginesu, można podać wartości na kilka sposobów:  jedna wartość - wtedy wszystkie marginesy będą jednakowe, np. margin: 2cm; wszystkie marginesy równe 2cm  dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy, np. margin: 2cm 1cm; górny i dolny margines równy 2cm, a lewy i prawy 1cm  trzy wartości - z których pierwsza oznacza górny margines, druga - jednocześnie lewy i prawy, a ostatnia – dolny, np. margin: 2cm 1cm 3cm ) górny równy 2cm, lewy i prawy 1cm, a dolny 3cm  cztery wartości - które oznaczają kolejno marginesy: górny, prawy, dolny, lewy, np. margin: 2cm 5mm 3cm 1cm; górny 2cm, prawy 5mm, dolny 3cm, lewy 1cm

20  Każdy element HTML może mieć atrybut class. Wartością atrybutu jest nazwa klasy lub ciąg nazw kilku klas oddzielonych białymi znakami. Użycie atrybutu class pozwala nadać wspólne formatowanie grupie elementów. Przykład. …

21  Atrybut id nadaje elementowi HTML unikalny identyfikator, tzn. w jednym pliku nie ma dwóch elementów z taką samą wartością atrybutu id. Atrybut id wykorzystujemy w arkuszach stylów do nadania unikalnego formatowania dla danego elementu oraz do tworzenia odsyłaczy wewnętrznych na stronie. Przykład. …

22 Załóżmy, że mamy następujący kod HTML: Kaskadowe arkusze stylów Język służący do opisu formy prezentacji (wyświetlania) stron WWW HTML Język służący do tworzenia stron WWW

23 Aby nadać formatowanie każdej z klas użyjemy zapisu selektor.nazwa_klasy, czyli: h2.tytul { font-weight: bold; color: blue; text-align: center; } p.opis { background: green; border: 2px; text-align: left; }

24  Oznacza to, że wszystkie nagłówki h2, które mają przypisaną klasę tytul będą wyśrodkowane, pogrubione i w kolorze niebieskim, a wszystkie akapity p, które są klasy opis będą wyrównane do lewej, będą mieć obramowanie 2px z każdej strony i będą na zielonym tle.  Wszystkie inne akapity i nagłówki występujące w tym dokumencie (bez przypisanych klas) będą miały standardowe formatowanie.

25 Ćwiczenie Ene, due, rike, fake Torbe, borbe, ósme, smake Deus, deus, kosmateus I morele baks. Dołączmy style zewnętrzne. Style te ustalają krój Georgia, rozmiar czcionki dwa razy większy (200%) od ustawień domyślnych. Tekst napisany wytłuszczoną kursywą.

26 p { font-family: Georgia, serif; font-size: 200%; font-style: italic; font-weight: bold; }

27 Ćwiczenie Wykonaj witrynę z tekstem wyliczanki pt. Siedzi baba na cmentarzu. Stosując style CSS ustal margines akapitów na 200 pikseli. Rozmiar czcionki dwa razy większy (200%) od ustawień domyślnych.

28 p { margin: 200px; font-size: 200%; }

29 Ćwiczenie Wykonaj witrynę z tekstem rymowanki „Poszła Ola do przedszkola”. Stosując style CSS, ustal kolor tekstu na żółty, a tła na niebieski.

30 body { color: yellow; background: blue; }

31 Ćwiczenie Wykonaj witrynę z tekstem piosenki „Jedną noc spędzili w cichym barze…” Stosując style CSS nadaj wszystkim akapitom obramowanie 5 pikseli.

32 p { border: 5px solid black; }

33 Atrybut class  W jednym dokumencie można użyć tej samej klasy w odniesieniu do różnych elementów XHTML: Lorem ipsum… Dolor sit Amet… Consectetuer…  Mamy elementy body klasy wstep, h1 klasy wstep, h2 klasy opis oraz dwa akapity p klasy opis. Mamy zatem dwie klasy: wstep oraz opis. Klasa wstep jest użyta w odniesieniu do elementów body oraz h1, zaś opis- w odniesieniu do elementów h2 oraz p (dwukrotnie).

34 Selektory dotyczące klas  Do elementów, które mają atrybut class o wartości wstep, można odwoływać się w stylach przy użyciu selektora:.wstep { font-family: Verdana, sans-serif; }  Zwróćmy uwagę na kropkę przed nazwą klasy. Selektor.wstep dotyczy każdego elementu, który posiada atrybut class o wartości wstep.  Drugim rodzajem selektora jest selektor, który składa się z nazwy elementu XHTML oraz nazwy klasy (oddzielonych kropką): h1.wstep { … }  Dotyczy on wyłącznie elementu h1 klasy wstep: …  Nie obejmuje elementów p czy h2: …

35 Stosowanie klas  Reguła p { text-align: center; } powoduje, że wszystkie akapity w dokumencie zostaną wyśrodkowane.  Jeśli w jednym dokumencie część akapitów ma być wyśrodkowana, część wyrównana do prawej, część wyrównana do lewej, a część wyjustowana, to zadanie takie możemy wykonać wykorzystując klasy.

36 Ćwiczenie Wykonaj stronę WWW, która będzie zawierała cztery akapity z tekstem Lorem ipsum. Tekst pierwszego akapitu wyrównaj do lewej, drugiego do prawej, trzeciego wyśrodkuj, a czwartego wyjustuj. Do zróżnicowania formatu kolejnych akapitów wykorzystaj klasy. *Najpierw wprowadź kod XHTML nadając czterem elementom p klasy lewa, prawa, srodek i justuj: Lorem ipsum...

37 Następnie dodaj style CSS zawierające selektory:.lewa,.prawa,.srodek oraz.justuj.lewa { text-align: left; }.prawa { text-align: right; }.srodek { text-align: center; }.justuj { text-align: justify; }

38 Atrybut id  Atrybut id nadaje elementowi XHTML identyfikator: …  Można go używać, podobnie jak atrybutu class, w odniesieniu do każdego elementu XHTML  W odróżnieniu od klas identyfikator musi być- w ramach pojedynczego pliku XHTML- unikalny.  Atrybuty id służą do identyfikacji elementów w kodzie strony. Wykorzystujemy je do: 1. Definiowania stylów CSS konkretnych elementów 2. Tworzenia odsyłaczy wewnętrznych.

39 Selektory dotyczące identyfikatorów  Do elementu, który ma atrybut id o wartości opis, można odwoływać się w stylach CSS przy użyciu selektora: #opis { … }  Jeśli jest to element h1, to selektor może przyjąć postać: h1#opis { … }  Z powodu unikalności identyfikatorów stosowanie tego zapisu nie przynosi żadnej korzyści- oba powyższe identyfikatory dotyczą wyłącznie jednego elementu w kodzie XHTML: tego, który ma atrybut id o wartości opis: …

40 Stosowanie identyfikatorów  Identyfikatory mają zastosowanie w odniesieniu do elementów, które występują na stronie jeden jedyny raz.  Elementami takimi są bardzo często menu główne, nagłówek czy stopka strony.  Stosowanie identyfikatorów w stosunku do powtarzających się elementów (np. akapitów tekstu, które mają mieć specjalny format) byłoby bardzo niewygodne, gdyż wymagałoby nadania osobnego identyfikatora każdemu akapitowi.