1 Style CSS
2 Rodzaje arkuszy stylówWpisany – 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 Styl wpisany Osadzony arkusz stylówZewnętrzny arkusz stylów Domyślne ustawienia przeglądarki
4 Ogólna postać CSS Zależy ona od typu arkusza ! STYL WPISANY
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’}
8 Określenie kilku właściwości w jednej definicji stylówp { text-align: center; color: black; font-family: arial }
9 Przypisanie jednej właściwości kilku elementom (selektorom) – grupowanie selektorówPrzykł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 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}
14 Narzucanie stylu pojedynczym wystąpieniom danego elementu (tzwNarzucanie 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;color: green; font-family: arial }
18 Style CSS: przykłady
19 Styl wpisany … 20
Przykład
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
23 Przykład 2
24 Przykład 2
25 Przykład 3
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.
26 Przykład 3
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.
27 Przykład 3
28 Dołączanie zewnętrznego arkusza stylów href="mojestyle.css">
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 spanPrzykł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 divBloki 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
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 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.Nagłówek na zielonym tle
Nagłówek na transparentnym tle
38 Przykłady stylów CSS dla tła strony WWW
39 Obraz jako tło
Tu umieszczasz resztę zawartości swojej strony!
40 Obraz jako tło
Tu umieszczasz resztę zawartości swojej strony!
41 Obraz jako tło
42 Powtórzenia obrazu w pionie (kafelkowanie) Uwaga:
45 Obraz jako tło w skali 1:1 umieszczony na środku strony
46 Formatowanie tekstu – kolejność podawania atrybutówAtrybuty 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 h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} h1 {font-size: 20pt} h2 {font-size: 14pt}
49 Upraszczanie definicji stylów – grupowanie atrybutówW 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 Atrybut Przykł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 Atrybuty formatowania akapitu.Przykł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 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).