Kaskadowe arkusze stylw CSS Cascading Style Sheets Przy

Kaskadowe arkusze stylów CSS - Cascading Style Sheets

Przy tworzeniu strony WWW należy pamiętać, że kod HTML opisuje strukturę i zawartość

Teoretycznie style można umieszczać w trzech miejscach: w oddzielnym pliku (style zewnętrzne) w pliku

Przy projektowaniu witryny najlepiej korzystać z pierwszego sposobu. Wynika to z faktu, że

Style zewnętrzne Style zapisujemy w osobnym pliku Plik ze stylami ma zazwyczaj rozszerzenie. css

<!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3.

p { background: yellow; font-size: 16 px; font-family: Arial; color: red; } Podany zapis

h 1 { margin: 20 px; background: blue; color: white; border: 4 px solid

$Tworząc kolejne wpisy (reguły) do pliku ze stylami trzymamy się schematu: selektor { własność_1$

Terminologia Arkusze stylów składają się z reguł (ang. rule). Pojedyncza reguła ma postać: p

Komentarze w CSS oznaczamy parami znaków /* oraz */ h 1 { /*wyśrodkowanie poziome

Przy własnościach dotyczących koloru można używać kilku sposobów jego określenia: za pomocą stałych np.

Przy własności margin, odnoszącej się do marginesu, można podać wartości na kilka sposobów: jedna

Każdy element HTML może mieć atrybut class. Wartością atrybutu jest nazwa klasy lub

Atrybut id nadaje elementowi HTML unikalny identyfikator, tzn. w jednym pliku nie ma

Załóżmy, że mamy następujący kod HTML: <h 2 class="tytul">Kaskadowe arkusze stylów</h 2> <p class="opis">Język

Aby nadać formatowanie każdej z klas użyjemy zapisu selektor. nazwa_klasy, czyli: h 2. tytul

Oznacza to, że wszystkie nagłówki h 2, które mają przypisaną klasę tytul będą

Ćwiczenie <p> Ene, due, rike, fake Torbe, borbe, ósme, smake Deus, deus, kosmateus I

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

Ćwiczenie Wykonaj witrynę z tekstem rymowanki „Poszła Ola do przedszkola”. Stosując style CSS, ustal

body { color: yellow; background: blue; }

Ćwiczenie Wykonaj witrynę z tekstem piosenki „Jedną noc spędzili w cichym barze…” Stosując style

Atrybut class W jednym dokumencie można użyć tej samej klasy w odniesieniu do różnych

Selektory dotyczące klas Do elementów, które mają atrybut class o wartości wstep, można odwoływać

Stosowanie klas Reguła p{ text-align: center; } powoduje, że wszystkie akapity w dokumencie zostaną

Ćwiczenie Wykonaj stronę WWW, która będzie zawierała cztery akapity z tekstem Lorem ipsum. Tekst

Następnie dodaj style CSS zawierające selektory: . lewa, . prawa, . srodek oraz. justuj.

Atrybut id nadaje elementowi XHTML identyfikator: <h 1 id=„tytul”>…</h 1> <h 2 id=„wstep”>…</h 2>

Selektory dotyczące identyfikatorów Do elementu, który ma atrybut id o wartości opis, można odwoływać

Stosowanie identyfikatorów Identyfikatory mają zastosowanie w odniesieniu do elementów, które występują na stronie jeden

Ćwiczenie Wykonaj stronę WWW z tekstem bajki Krasickiego „Lew i zwierzęta”. Stronę wykonaj w

<body> <h 1>Ignacy Krasicki</h 1> <h 2>Lew i zwierzęta</h 2> <p> Gdy się wszystkie

body { margin: 100 px 200 px; font-family: "Trebuchet MS", sans-serif; background: rgb(255, 251,

Projekt 1 Wykonaj stronę WWW zawierającą kilka zadań z treścią przeznaczonych dla czwartoklasistów. Na

<body> <h 1>Zadania</h 1> <h 2>zad. 1</h 2> <p> Zosia kupiła 5 kolorowych długopisów

body { font-family: "Comic Sans MS", sans-serif; line-height: 200%; font-size: 160%; margin: 100 px

<h 1>The Call of the Wild</h 1> <h 2>by Jack London</h 2> <p id="wprowadzenie">

body { font-family: Verdana, sans-serif; color: rgb(41, 90, 50); background : rgb(211, 235, 216);

Projekt 4 <h 1>Cyprian Kamil Norwid</h 1> <h 2>Moja piosnka</h 2> <p> Do kraju

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

<h 1>Jan Kochanowski</h 1> <h 2>Treny</h 2> <p id="intro 1"> style. css body {

Ćwiczenie Stwórz stronę spełniającą poniższe warunki: - nagłówek h 4 z odstępem pomiędzy literami

Ćwiczenia Wykonaj stronę prezentującą kilka definicji z dowolnej dziedziny nauki. Wykorzystaj znaczniki em i

Slides: 59

Download presentation

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 h 1, h 2, 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 <head> oraz </head>(style wewnętrzne) w pliku HTML przy konkretnych elementach – między <body> oraz </body> (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 <link rel="stylesheet" type="text/css" href="style. css" /> Ctrl+B+Z, Ctrl+B+S

p { background: yellow; font-size: 16 px; 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.

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

$Tworząc kolejne wpisy (reguły) do pliku ze stylami trzymamy się schematu: selektor { własność_1$

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 w CSS oznaczamy parami znaków /* oraz */ h 1 { /*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 www. w 3. org/TR/css 3 -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. #273 cfe, gdzie każda dwójka znaków jest liczbą dziesiętną z zakresu 0. . 255

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: 2 cm; wszystkie marginesy równe 2 cm dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy, np. margin: 2 cm 1 cm; górny i dolny margines równy 2 cm, a lewy i prawy 1 cm trzy wartości - z których pierwsza oznacza górny margines, druga - jednocześnie lewy i prawy, a ostatnia – dolny, np. margin: 2 cm 1 cm 3 cm) górny równy 2 cm, lewy i prawy 1 cm, a dolny 3 cm cztery wartości - które oznaczają kolejno marginesy: górny, prawy, dolny, lewy, np. margin: 2 cm 5 mm 3 cm 1 cm; górny 2 cm, prawy 5 mm, dolny 3 cm, lewy 1 cm

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. … <div class=”glowny zielona”> … </div>

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. <div id=”glowny”> …</div>

Załóżmy, że mamy następujący kod HTML: <h 2 class="tytul">Kaskadowe arkusze stylów</h 2> Język służący do opisu formy prezentacji (wyświetlania) stron WWW <h 2 class="tytul">HTML</h 2> Język służący do tworzenia stron WWW

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

Oznacza to, że wszystkie nagłówki h 2, 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 2 px 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: 200 px; 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: 5 px solid black; }

Atrybut class W jednym dokumencie można użyć tej samej klasy w odniesieniu do różnych elementów XHTML: <body class=„wstep”> <h 1 class=„wstep”>Lorem ipsum…</h 1> <h 2 class=„opis”>Dolor sit</h 2> Amet… Consectetuer… </body> Mamy elementy body klasy wstep, h 1 klasy wstep, h 2 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 h 1, zaś opis- w odniesieniu do elementów h 2 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ą): h 1. wstep { … } Dotyczy on wyłącznie elementu h 1 klasy wstep: <h 1 class=„wstep”>…</h 1> Nie obejmuje elementów p czy h 2: <h 2 class=„wstep”>…</h 2> …

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. . . Lorem ipsum. . . Lorem ipsum. . . 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 nadaje elementowi XHTML identyfikator: <h 1 id=„tytul”>…</h 1> <h 2 id=„wstep”>…</h 2> … 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 h 1, to selektor może przyjąć postać: h 1#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: <h 1 id=„opis”>…</h 1>

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.

<body> <h 1>Ignacy Krasicki</h 1> <h 2>Lew i zwierzęta</h 2> Gdy się wszystkie zwierzęta u lwa znajdowały, . . . „ Według mnie ten najlepszy, co się najmniej chwali” . Tekst pochodzi ze strony http: //monika. univ. gda. pl/~literat/ikbajk/015. htm. </body>

body { margin: 100 px 200 px; font-family: "Trebuchet MS", sans-serif; background: rgb(255, 251, 196); font-size: large; } p{ margin: 100 px 0; } #stopka { font-size: 60%; margin-top: 100 px; 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 h 1 z tekstem Zadania. Poszczególne zadania oznacz elementami h 2 z tekstem zad. 1, zad. 2 itd. Treść każdego zadania jest jednym akapitem tekstu ujętym w znaczniki oraz .

<body> <h 1>Zadania</h 1> <h 2>zad. 1</h 2> 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? . . . </body>

Projekt 2

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

<!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: lang="pl"> <head> <title>Ignacy Krasicki: Bajki i przypowieści. Wybór</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style. css" /> </head> <body> <h 1>Ignacy Krasicki</h 1> <h 2>Bajki i przypowieści. Wybór</h 2> <h 3>Abuzei i Tair</h 3> „ 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ł. … </body> </html>

Projekt 3

<h 1>The Call of the Wild</h 1> <h 2>by Jack London</h 2> Old longing, nomadic leap Chafing at customs chain Again from its brumal sleep Wakens the ferine strain. <h 3>Chapter I</h 3> <h 3>Into the Primitive</h 3> Buck did not read the newspapers. . . <h 3>Chapter II</h 3> <h 3>The Law of Club and Fang</h 3> Buck's first day on the Dyea beach. . . <h 3>Chapter III</h 3> <h 3>The Dominant Primordial Beast</h 3> 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: 100 px; line-height: 160%; } h 1 { text-align: center; } h 2 { text-align: center; margin-bottom: 100 px; } h 3 { text-align: center; margin-top: 40 px; } p{ text-align: justify; text-indent: 2 em; line-height: 160%; margin-top: 40 px; margin-bottom: 40 px; } #gwiazdki { text-align: center; margin: 40 px; font-family: Georgia, serif; font-size: 300%; } #wprowadzenie { margin-left: 70%; text-indent: 0; font-style: italic; }

Projekt 4 <h 1>Cyprian Kamil Norwid</h 1> <h 2>Moja piosnka</h 2> 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: 7 em; font-style: normal; }. gwiazdka { margin-left: 5 em; }

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

Projekt 5

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

Ćwiczenie Stwórz stronę spełniającą poniższe warunki: - nagłówek h 4 z odstępem pomiędzy literami 4 px - 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 30 px - 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).