Kaskadowe arkusze stylów CSS - Cascading Style Sheets

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

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 )

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

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

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.

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.

Style zewnętrzne 2 WITAJ

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

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.

Składnia kaskadowych arkuszy stylów

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.

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

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

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

 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. …

 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. …

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

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; }

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

Ć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ą.

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

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

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

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

body { color: yellow; background: blue; }

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

p { border: 5px solid black; }

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

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: …

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.

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

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; }

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.

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: …

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.

Ćwiczenie Wykonaj stronę WWW z tekstem bajki Krasickiego „Lew i zwierzęta”. Stronę wykonaj w taki sposób, by zawierała stopkę. Formatowanie stopki stylami CSS wykonaj, stosując identyfikator.

Ignacy Krasicki Lew i zwierzęta Gdy się wszystkie zwierzęta u lwa znajdowały,... „Według mnie ten najlepszy, co się najmniej chwali”. Tekst pochodzi ze strony

body { margin: 100px 200px; font-family: "Trebuchet MS", sans-serif; background: rgb(255,251,196); font-size: large; } p { margin: 100px 0; } #stopka { font-size: 60%; margin-top: 100px; font-family: Verdana, sans-serif; }

Projekt 1 Wykonaj stronę WWW zawierającą kilka zadań z treścią przeznaczonych dla czwartoklasistów. Na stronie umieć nagłówek h1 z tekstem Zadania. Poszczególne zadania oznacz elementami h2 z tekstem zad. 1, zad. 2 itd. Treść każdego zadania jest jednym akapitem tekstu ujętym w znaczniki oraz.

Zadania zad. 1 Zosia kupiła 5 kolorowych długopisów po 1,20 zł za sztukę i 2 zeszyty po 1,00 zł. Ania kupiła o dwa długopisy więcej niż Zosia, ale nie kupiła żadnego zeszytu. Która z dziewczynek zapłaciła więcej i o ile?...

Projekt 2

body { font-family: "Comic Sans MS", sans-serif; line-height: 200%; font-size: 160%; margin: 100px 150px; background: rgb(255,215,255); color: rgb(0,0,108); } h1 { text-align: center; } h2 { font-style: italic; text-align: center; } h3 { margin-top: 150px; margin-left: 100px; }

Ignacy Krasicki: Bajki i przypowieści. Wybór Ignacy Krasicki Bajki i przypowieści. Wybór Abuzei i Tair „Winszuj, ojcze — rzekł Tair — w dobrym jestem stanie: Jutrom szwagier sułtana i na polowanie Z nim wyjeżdżam”. Rzekł ojciec: „Wszystko to odmienne: Łaska pańska, gust kobiet, pogody jesienne”. Jakoż zgadł, piękny projekt wcale się nie nadał: Sułtan siostrę odmówił, cały dzień deszcz padał. …

Projekt 3

The Call of the Wild by Jack London Old longing, nomadic leap Chafing at customs chain Again from its brumal sleep Wakens the ferine strain. Chapter I Into the Primitive Buck did not read the newspapers... Chapter II The Law of Club and Fang Buck's first day on the Dyea beach... Chapter III The Dominant Primordial Beast The dominant primordial beast was strong in Buck ***...

body { font-family: Verdana, sans-serif; color: rgb(41,90,50); background : rgb(211,235,216); margin: 100px; line-height: 160%; } h1 { text-align: center; } h2 { text-align: center; margin-bottom: 100px; } h3 { text-align: center; margin-top: 40px; } p { text-align: justify; text-indent: 2em; line-height: 160%; margin-top: 40px; margin-bottom: 40px; } #gwiazdki { text-align: center; margin: 40px; font-family: Georgia, serif; font-size: 300%; } #wprowadzenie { margin-left: 70%; text-indent: 0; font-style: italic; }

Projekt 4 Cyprian Kamil Norwid Moja piosnka Do kraju tego, gdzie kruszynę chleba Podnoszą z ziemi przez uszanowanie Dla darów Nieba.... Tęskno mi, Panie... * Do kraju tego, gdzie winą jest dużą Popsować gniazdo na gruszy bocianie, Bo wszystkim służą... Tęskno mi, Panie... *....refren { margin-left: 7em; font-style: normal; }.gwiazdka { margin-left: 5em; }

.refren { margin-left: 7em; font-style: normal; }.gwiazdka { margin-left: 5em; }

Projekt 5

Jan Kochanowski Treny Tales sunt... ORSZULI KOCHANOWSKIEJ... Tren I Wszytki płacze... Tren II Jeslim kiedy style.css body { color: white; background: black; } p { font-family: Georgia, serif; line-height: 200%; margin-left: 20%; }

Ćwiczenie Stwórz stronę spełniającą poniższe warunki:  - nagłówek h4 z odstępem pomiędzy literami 4px  - tekst złożony z 10 akapitów  - akapity mają tło żółte i są wyśrodkowane  - wszystkie akapity mają tekst czerwony oraz margines dolny 30px  - piąty akapit ma obramowanie niebieskie wykreskowane, a lewa krawędź obramowania ma być niewidoczna

Ćwiczenia  Wykonaj stronę prezentującą kilka definicji z dowolnej dziedziny nauki. Wykorzystaj znaczniki em i strong do wyróżnienia fragmentów tekstu.  Wykonaj stronę prezentującą nierówność matematyczną, równanie kwadratowe oraz cytat korzystając ze znaków specjalnych (encji).