Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Style CSS. Rodzaje arkuszy stylów Wpisany – definicja umieszczona jest w konkretnym elemencie HTML Osadzony – definicja umieszczona jest w obrębie elementu.

Podobne prezentacje


Prezentacja na temat: "Style CSS. Rodzaje arkuszy stylów Wpisany – definicja umieszczona jest w konkretnym elemencie HTML Osadzony – definicja umieszczona jest w obrębie elementu."— Zapis prezentacji:

1 Style CSS

2 Rodzaje arkuszy stylów Wpisany – definicja umieszczona jest w konkretnym elemencie HTML Osadzony – definicja umieszczona jest w obrębie elementu Zewnętrzny (łączony) – definicja jest pobierana z pliku zewnętrznego Wszystkie typy arkuszy CSS można stosować jednocześnie

3 Hierarhia stylów 1.Styl wpisany 2.Osadzony arkusz stylów 3.Zewnętrzny arkusz stylów 4.Domyślne ustawienia przeglądarki

4 Ogólna postać CSS Zależy ona od typu arkusza ! STYL WPISANY

5 Ogólna postać CSS STYL OSADZONY Selektor – znacznik, który jest definiowany Właściwość – atrybut (zmienny, w zależności od podanej wartości)

6 Przykład body {color:black} Jeśli wartość ma postać wielowyrazową, należy umieścić ją w cudzysłowie, np.: p {font-family: sans serif}

7 Przykład 2 style type=text/css> Uwaga: powyższy styl czcionki zostanie zastosowany do tekstu w sekcji, w tym również do znaczników i, lecz tekst umieszczony w tabeli wymaga odrębnej definicji stylów

8 Określenie kilku właściwości w jednej definicji stylów p { text-align: center; color: black; font-family: arial }

9 Przypisanie jednej właściwości kilku elementom (selektorom) – grupowanie selektorów Przykład: przypisanie wszystkim poziomom nagłówka koloru czerwonego: h1, h2, h3, h4, h5, h6 { color: red }

10 Klasy stylu – atrybut class Klasy pozwalają zdefiniować różne style dla jednego elementu Postać ogólna klasy stylu: … element.nazwa_klasy {właściwość: wartość} …

11 Przykład Zastosowanie 2 różnych metod wyrównania tekstu akapitowego (do środka i do prawej) p.prawy {text-align: right} p.center {text-align: center} … tekst

12 Klasy Nazwy klas mogą być dowolne, lecz nie należy używać w nich polskich liter Nazwę selektora w klasie można pominąć:.nazwa_klasy {właściwość: wartość} Tak zdefiniowany styl można zastosować do wielu elementów

13 Przykład ….prawy {text-align: right} … nagłówek wyrównany do prawego marginesu. akapit wyrównany do prawego marginesu.

14 Narzucanie stylu pojedynczym wystąpieniom danego elementu (tzw. wyjątki) – atrybut id. #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } … … Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id

15 Metody definiowania atrybutu id Atrybut id można zdefiniować na dwa sposoby: 1. Styl stosowany jest do dowolnego elementu o określonym id 2. Styl jest stosowany do określonego elementu o danym id. Przykład 1 #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }

16 Przykład 2 p#wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } W obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #.

17 Komentarze CSS /* komentarz CSS */ p { text-align: right; /* komentarz2 CSS */ color: green; font-family: arial }

18 Style CSS: przykłady

19 Styl wpisany … Treść tytułu …

20 Przykład Styl wpisany Styl zastosowany w obrębie znacznika p. W tym akapicie nie zastosowano stylu. Styl zastosowano w obrębie znacznika p. Zawartość tego znacznika p nie jest formatowana.

21 Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu

22 Osadzony arkusz stylów <--! hr {color: red} p {margin-left: 20px} body {background-image: url("images/kot.gif")} -->

23 Przykład 2 Osadzony arkusz stylów Czerwony nagłówek na białym tle Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Ten nagłówek ma takie samo formatowanie jak poprzedni Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

24 Przykład 2

25 Przykład 3 Osadzony arkusz stylów Czerwony nagłówek na białym tle Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Ten nagłówek ma takie samo formatowanie jak poprzedni Ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

26 Przykład 3 Osadzony arkusz stylów Czerwony nagłówek na białym tle Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Ten nagłówek ma takie samo formatowanie jak poprzedni Ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

27 Przykład 3

28 Dołączanie zewnętrznego arkusza stylów

29 Rozciąganie stylu - element span Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu – na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span:

30 Przykład Ten nagłówek ma takie samo formatowanie jak poprzedni

31 Przykład

32 Stosowanie klas z elementem span Przykład: pierwszy wyraz wszystkich akapitów na stronie jest pisany czcionką o innym rozmiarze i w innym kolorze niż pozostały tekst. Czerwony nagłówek na białym tle Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

33

34 Wydzielone bloki - element div Bloki wydzielamy za pomocą pary znaczników. Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Metoda jest podobna do poprzedniej, lecz w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.

35 Element div Czerwony nagłówek na białym tle Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Fragment dokumentu objęty znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów. Ten nagłówek ma takie samo formatowanie jak poprzedni Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

36

37 Przykłady stylów CSS dla tła strony WWW Kolor tła elementu body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} Nagłówek na zielonym tle Nagłówek na transparentnym tle Tekst tego akapitu umieszczono na tle w kolorze fioletowym! Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie magenta. Ten akapit ma żółte tło, bo tak stanowi styl elementu body.

38 Przykłady stylów CSS dla tła strony WWW

39 Obraz jako tło Obraz jako tło strony body { background-image: url("images/obraz.jpg") } Tu umieszczasz resztę zawartości swojej strony!

40 Obraz jako tło Obraz jako tło strony body { background-image: url("images/obraz.jpg") } Tu umieszczasz resztę zawartości swojej strony!

41 Obraz jako tło

42 Powtórzenia obrazu w pionie (kafelkowanie) Budowanie tła z powtórzeń obrazu body { background-image: url("images/kot.gif"); background-repeat: repeat-y }

43 Powtórzenia obrazu w pionie (kafelkowanie)

44 Obraz jako tło w skali 1:1 umieszczony na środku strony Mały obraz w centrum strony body { background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center } Uwaga: Netscape 4 nie obsługuje właściwości "background-position".

45 Obraz jako tło w skali 1:1 umieszczony na środku strony

46 Formatowanie tekstu – kolejność podawania atrybutów Atrybuty grubości czcionki – font- weight, i stylu – font-style, muszą pojawić się przed innymi atrybutami czcionki rozmiar czcionki – font-size, poprzedza odstępy. Wartości atrybutów nie oddziela się przecinkami – jedyny wyjątek to rodziny czcionek.

47 kolejność podawania atrybutów - przykład

48 Upraszczanie definicji stylów –grupowanie elementów

49 Upraszczanie definicji stylów – grupowanie atrybutów W CSS można grupować również atrybuty, np.. body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; line-height: 14pt; font-weight: bold} można zapisać w następujący sposób: body {font: bold 12/14pt arial, sans-serif}

50 AtrybutPrzykład definicji color: – kontroluje kolor czcionki. h1 {color: #00ff00} – kod koloru podany jest w zapisie szesnastkowym. h2 {color: red} – korzystając ze standardowych kolorów, można posługiwać się ich nazwami, np. red, blue, white czy green, zamiast kodami heksadecymalnymi. p {color: rgb(0,0,255)} font-family: – kontroluje krój czcionki. {font-family: times} – podano nazwę czcionki Times, {font-family: times, arial} –podana została nazwa czcionki wraz z nazwą czcionki alternatywnej, {font-family: serif} – wskazano rodzinę czcionek, dzięki czemu przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu odpowiadają Twojemu wyborowi. font-size: - rozmiar czcionki. {font-size: 12pt} –rozmiar podany jest w punktach drukarskich. Jest to standard najczęściej stosowany. Rozmiar można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). font-style: - określa styl tekstu. {font-style: italic} – definiuje tekst pisany kursywą. {font-style: normal} – przywraca ustawienia domyślne. {font-style: oblique} – wprowadza pochylenie odmiany prostej danej czcionki. font-weight: - określa grubość czcionki. {font-weight; bold} – definiuje czcionkę pogrubioną (do dyspozycji są jeszcze atrybuty takie jak: extra-light, demi-light, medium, extra-bold oraz demi-bold). text-decoration: - umożliwia określenie efektów dodatkowych. {text-decoration: none} – brak efektów. {text-decoration: underline} – podkreślenie. {text-decoration: italic} – kursywa. {text-decoration: line-through} – przekreślenie. line-height: - definiuje wysokość wiersza. p {line-height: 12pt} Odstępy między wierszami w akapicie można podawać w punktach, pikselach, calach, centymetrach i w procentach, podobnie jak wielkość czcionki.

51 AtrybutPrzykład definicji margin-left określa szerokość lewego marginesu. {margin-left: 2cm} – margines wynosi 2 cm. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). margin-right określa szerokość prawego marginesu {margin-right: 2in} – tu ustawiono margines równy 2 cale. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). margin-top – ustawienie marginesu górnego. {margin-top: 20pt} – margines górny wynosi 20 punktów. Jednostki są takie same jak w przypadku marginesów bocznych. text-indent – ustawienie wcięcia. Jednostki takie jak dla marginesów. {text-indent: 0.5in} – wcięcie o głębokości 0.5 cala. Internet Explorer dopuszcza wcięcia ujemne – wysunięcia. text-align – opcja wyrównania tekstu. {text-align: right} – tekst zostanie wyrównany do prawego marginesu. Atrybut może przyjmować wartości: left (do lewej), center (wyśrodkowanie), right (do prawej) i justify (do obu marginesów). Atrybuty formatowania akapitu.


Pobierz ppt "Style CSS. Rodzaje arkuszy stylów Wpisany – definicja umieszczona jest w konkretnym elemencie HTML Osadzony – definicja umieszczona jest w obrębie elementu."

Podobne prezentacje


Reklamy Google