Teoria html5 css3

Katedra Informatyki i Matematyki Stosowanej opracowa: Micha Pajcki
Wybrane zagadnienia HTML5 i CSS3
Spis treci
Cz I HTML5 ......................................................................................................................... 2
1. Wprowadzenie do HTML5 ................................................................................................ 2
2. Struktura dokumentu HTML5 ............................................................................................ 3
3. Elementy blokowe i liniowe. Znaki specjalne.................................................................... 4
4. Grafika ................................................................................................................................ 7
5. Listy wypunktowane i numerowane................................................................................... 8
6. Odsyacze ........................................................................................................................... 9
7. Tabele ................................................................................................................................. 9
8. Walidacja kodu HTML .................................................................................................... 10
Cz II CSS3........................................................................................................................... 11
9. Wprowadzenie do CSS3................................................................................................... 11
10. Wybrane wasnoci arkuszy stylw ............................................................................... 12
11. Formatowanie elementw za pomoc klas i identyfikatorw ........................................ 16
12. Jednostki miar................................................................................................................. 17
13. Kolory ............................................................................................................................. 18
Cz I HTML5
1. Wprowadzenie do HTML5
HTML (ang. HyperText Markup Language) to hipertekstowy jzyk znacznikw. Suy do
okrelenia struktury dokumentu wywietlanego przez przegldark internetow i stanowi przez
to podstaw dziaania kadej strony internetowej. Do szczegowego formatowania wygldu
(np. czcionek, kolorw, obramowania i marginesw) powinno wykorzystywa si kaskadowe
arkusze stylw CSS zostan one omwione nieco pniej.
Skadni jzyka HTML stanowi znaczniki (ang. tags), ktre umieszcza si w nawiasach
ostrych, np. <html>, <div>. Najczciej uywa si ich w parach pierwszy nazywa si
znacznikiem otwierajcym, a drugi znacznikiem zamykajcym, np. <div></div> rysunek 1.
Istniej rwnie znaczniki samodzielne, np. <br>, <meta>, <hr>, w przypadku ktrych przyjto
w tej instrukcji zasad pomijania zamykajcego ukonika (przykadowo <br />), cho ta forma
zapisu rwnie jest cakowicie poprawna z punktu widzenia HTML5. Dua cz znacznikw
moe posiada atrybuty, ktre okrelaj szczegy ich wygldu lub zachowania. Umieszcza si
je przed nawiasem > znacznika otwierajcego. Skadnia atrybutu zbudowana jest z nazwy
atrybutu oraz wartoci umieszczonej w cudzysowie: nazwa=warto. Znacznik moe
posiada wicej ni jeden atrybut. Naley pamita, e kady tag posiada swoj wasn list
atrybutw dozwolonych w jzyku HTML5, a wedug nowoczesnego podejcia do ich
szczegowego formatowania wykorzystuje si kaskadowe arkusze stylw CSS. Kod HTML
powinien by formatowany z wykorzystaniem odpowiednich wci, co zwiksza jego
czytelno. Istotne jest take prawidowe uywanie znacznikw zamykajcych nie wolno
o nich zapomina!
Rysunek 1. Budowa znacznika HTML5

rdo: Opracowanie wasne.
Zadaniem przegldarki internetowej jest odczyt znacznikw i ich interpretacja w taki

sposb, aby uytkownik widzia poprawnie sformatowan stron internetow zamiast
nieczytelnego kodu. Najpopularniejsze rozszerzenie pliku zawierajcego kod HTML to .html
(cho niekiedy spotyka si jeszcze starsze rozszerzenie .htm).
Strona | 2
Strony internetowe powinno tworzy si wedug cile okrelonych standardw, za ktrych

ustanawianie odpowiada organizacja W3C (ang. World Wide Web Consortium). Nie maj one
co prawda mocy prawnej, ale gwarantuj waciwe wywietlanie zaprojektowanych stron przez
wszystkie wspczesne przegldarki internetowe (Google Chrome, Mozilla Firefox, Internet
Explorer, Opera, Safari itd.). Aktualnie najpopularniejszym standardem jest HTML5, ktry
uwaa si za rozwinicie HTML4 i XHTML1. Zosta on oficjalnie zatwierdzony przez W3C 28
padziernika 2014 roku. Napisano go z myl o kompatybilnoci wstecznej strona internetowa
stworzona w HTML5, ale wykorzystujca przestarzae znaczniki typu <font> i <frame> bdzie
wywietlana poprawnie, cho takie podejcie jest niezalecane. W HTML5 postawiono duy
nacisk na semantyk, czyli nadawanie znaczenia poszczeglnym treciom. Standard HTML5
jest wspierany przez nastpujce przegldarki:
Google Chrome 8 i pniejsze wersje,
Internet Explorer 9 i pniejsze wersje,
Mozilla Firefox 3.5 i pniejsze wersje,
Opera 10.5 i pniejsze wersje,
Safari 4 i pniejsze wersje.
Wedug StatCounter (rdo: http://gs.statcounter.com) w okresie 01.11.2015r.
19.11.2015r. najpopularniejsz przegldark internetow na komputery stacjonarne i laptopy by
Google Chrome, z ktrego korzystao a 57,70% internautw na caym wiecie. Na drugim
miejscu uplasowaa si Mozilla Firefox 5+ (wersja co najmniej 5) z udziaem w rynku na
poziomie 15,84%, na trzecim Internet Explorer 11 z wynikiem 11,40%. Z programu Internet
Explorer 8, ktry nie obsuguje jzyka HTML5, korzystao 2,07% wszystkich uytkownikw
(wedug www.ranking.pl w Polsce odsetek ten wynosi w tym samym czasie ok. 0,80%).
Powysze liczby dowodz, e jedynie niewielka liczba przegldarek internetowych uywanych
przez uytkownikw desktopw nie wspiera jzyka HTML5.
Do napisania strony internetowej w jzyku HTML5 mona wykorzysta najzwyklejszy
edytor tekstu, np. Notatnik. Istniej jednak darmowe aplikacje, ktre pozwalaj na kolorowanie
skadni kodu, edycj kilku plikw jednoczenie (dziki obsudze zakadek), czy te atwe
ustawienie kodowania znakw. Przykadem jest program Notepad++, ktry bdzie
wykorzystywany podczas zaj laboratoryjnych. Mona pobra go w wersji niewymagajcej
instalacji (portable) ze strony producenta: https://notepad-plus-plus.org.
2. Struktura dokumentu HTML5

Skadnia dokumentu napisanego w HTML5 rozpoczyna si od deklaracji typu dokumentu
<!DOCTYPE html> jej celem jest wskazanie przegldarce internetowej rodzaju dokumentu,
ktry ma przetworzy. W kolejnym kroku wyznacza si ramy strony internetowej poprzez
wprowadzenie znacznikw <html></html>. Dobrym zwyczajem jest dodanie w tym miejscu
informacji o jzyku, w ktrym tworzy si stron w tym celu wewntrz znacznika <html>
Strona | 3
umieszcza si atrybut lang wraz z odpowiedni wartoci. W przypadku jzyka polskiego jest to
pl, a angielskiego en.
Nagwek dokumentu definiuje si wewntrz znacznikw <head></head>. Mimo, e
efektw jego dziaania nie wida na pierwszy rzut oka, jest on bardzo istotny. Na pocztku
zamieszcza si w nim informacj dotyczc sposobu kodowania znakw. Nieprawidowe
kodowanie moe spowodowa bdne wywietlanie niektrych znakw (np. ).
Najpopularniejszy standard to obecnie UTF-8. W tym celu dodaje si tag <meta> z atrybutem
charset="UTF-8". Dziki temu wszystkie polskie znaki bd wywietlane poprawnie (pod
warunkiem prawidowego ustawienia sposobu kodowania znakw w edytorze tekstowym).
Uoglniajc, znacznik <meta> definiuje informacje profilowe strony, tzw. metainformacje.
Dziki niemu mona take zdefiniowa m.in. opis strony: atrybut name="opis_strony" oraz
sowa kluczowe oddzielone przecinkiem: atrybut name="sowa_kluczowe". Odpowiedni opis
i waciwie dobrane sowa kluczowe pozwalaj na prawidowe odnajdowanie utworzonych stron
przez wyszukiwarki internetowe (Google, Bing, Ask itd.). Pomidzy znacznikami
<title></title> wprowadza si tytu strony internetowej bdzie on widoczny na grnym
pasku okna przegldarki. W nagwku umieszcza si rwnie definicj stylw CSS.
Pomidzy znacznikami <body></body> wyznacza si miejsce, w ktrym umieszcza si
waciw tre strony internetowej (tzw. ciao dokumentu), czyli wszystko to, co ma zosta
wywietlone na ekranie.
Szablon strony internetowej w jzyku HTML5 prezentuje si nastpujco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Krki opis strony">
<meta name="keywords" content="Sowa, kluczowe, oddzielone, przecinkiem">
<title>Moja pierwsza strona internetowa w HTML5</title>
</head>
<body>

<p>Witaj Internecie!</p>
<p>Test polskich znakw: <p>
</body>
</html>
3. Elementy blokowe i liniowe. Znaki specjalne

Jzyk HTML zawiera znaczniki, ktre mona podzieli na tzw. elementy liniowe mog
one wystpowa w jednym wierszu obok siebie i zajmuj tylko tyle miejsca, ile potrzebuj oraz
Strona | 4
tzw. elementy blokowe s one fragmentami zajmujcymi ca, samodzieln i wydzielon

powierzchni. Nie mona ustawi w jednej linii wicej ni jednego elementu blokowego.
Umieszcza si je wycznie jeden pod drugim. Wszystkie ponisze znaczniki oprcz <br>
i <hr> posiadaj tag zamykajcy!
A. Wybrane znaczniki blokowe:

Znacznik Opis dziaania
Akapit podstawowy element zawierajcy tekst. Za jego pomoc
<p>
wydziela si fragmenty dokumentu tworzce zwart myl.
Nagwki dziel stron internetow na logiczne czci. Mona je
zobrazowa jako tytuy (nagwki) w gazecie lub ksice, gdy peni
analogiczn rol. W jzyku HTML wyrnia si sze poziomw
<h1> <h6> nagwkw, ktre naley stosowa hierarchicznie. Tytuem stopnia
pierwszego, <h1>, oznacza si treci najwaniejsze, a poza tym
domylnie s one pisane czcionk o najwikszym dopuszczalnym dla
nagwkw rozmiarze.
amanie linii znacznik ten wykorzystywany jest do przenoszenia
<br> treci do kolejnego wiersza bez koczenia biecego akapitu. Nie
posiada znacznika zamykajcego.
Pozioma linia tag rysujcy poziom lini. W HTML5 oznacza
<hr> tematyczne przejcie, np. zmian tematu artykuu. Nie posiada znacznika
zamykajcego.
Blok preformatowany tworzy blok tekstu uwzgldniajcy wszystkie
<pre> tzw. biae znaki w kodzie rdowym, np. dodatkowe spacje, tabulatory
i zamania wiersza (w przeciwiestwie do akapitu).
Blok cytowany tworzy blok tekstu, w ktrym umieszcza si cytaty.
<blockquote> Tekst zawarty pomidzy tymi znacznikami wywietlany jest
z automatycznie dodanym wciciem i cudzysowem.
Adres tworzy blok tekstu, w ktrym umieszcza si informacje
<address> kontaktowe dotyczce autora strony internetowej. Domylnie pisany
kursyw.
Blok dokumentu (kontener) za jego pomoc grupuje si
i pozycjonuje rne elementy dokumentu. Kady fragment dokumentu
objty blokiem mona swobodnie formatowa. W HTML5 straci on
<div>
jednak na znaczeniu na rzecz elementw semantycznych sucych do
nakrelenia struktury strony internetowej s one przedstawione
w kolejnych wierszach tabeli.
Strona | 5
Nagwek dokumentu tworzy blok dokumentu, w ktrym umieszcza

<header> si najczciej logo, motto, haso reklamowe oraz formularz
wyszukiwania. Nowy element semantyczny jzyka HTML5.
Nawigacja tworzy blok dokumentu zawierajcy odnoniki do innych
<nav> stron lub wyznaczonych fragmentw obecnej strony. Nowy element
semantyczny jzyka HTML5.
Artyku tworzy blok dokumentu zawierajcy samodzielny fragment
<article> treci, np. wpis na blogu lub post na forum. Nowy element semantyczny
jzyka HTML5.
Sekcja dokumentu tworzy blok dokumentu obejmujcy okrelon
<section> cz tematyczn. Powinien on ponadto zawiera nagwek. Nowy
element semantyczny jzyka HTML5.
Fragment treci tworzy blok dokumentu, w ktrym umieszcza si
treci odseparowane od gwnej zawartoci strony i niekoniecznie
<aside>
powizane z ni tematycznie, np. reklamy, panel boczny z dodatkowymi
informacjami. Nowy element semantyczny jzyka HTML5.
Stopka dokumentu tworzy blok dokumentu umieszczany na dole
<footer> strony i zawierajcy np. informacje o autorze, prawach autorskich, linki.
Nowy element semantyczny jzyka HTML5.
B. Wybrane znaczniki liniowe:

Znacznik Opis dziaania
Pogrubienie tekstu ze wzmocnieniem wagi suy do pogrubienia
<strong> fragmentu tekstu, ktry ma si wyrnia na tle pozostaych fragmentw
oraz ma istotn wag w odniesieniu do caoci znaczenie semantyczne.
Pogrubienie tekstu suy do pogrubienia tekstu, ktry nie jest
<b> waniejszy ni reszta dokumentu (w przeciwiestwie do znacznika
<strong>, cho daje on identyczny widoczny dla uytkownika efekt).
Emfaza, kursywa suy do wyrnienia kursyw wybranych
<em> fragmentw tekstu. Znaczniki te s uywane, gdy naley uwypukli
pewien fragment tekstu i podkreli jego znaczenie.
Kursywa suy do wyrnienia kursyw wybranych fragmentw
tekstu, ktre pozbawione s emfazy (w przeciwiestwie do <em>, cho
<i>
daje on identyczny widoczny dla uytkownika efekt), np. sw
obcojzycznych i terminw technicznych.
Przekrelenie suy do przekrelenia wybranego fragmentu tekstu
<s>
i zaakcentowania przez to jego nieaktualnoci lub niedokadnoci.
<u> Podkrelenie suy do podkrelenia wybranego fragmentu tekstu.
Strona | 6
Drobny druk fragment tekstu zawarty midzy tymi znacznikami jest

pisany mniejsz czcionk. Powinien by uywany tylko i wycznie do
<small>
oznaczania tych fragmentw, ktre maj by pisane drobnym
drukiem, np. klauzule u dou umowy.
<sup> Indeks grny.
<sub> Indeks dolny.
Zakres wydziela okrelony fragment dokumentu, ktry mona
<span> dowolnie formatowa (tak jak znacznik <div>, ale w przeciwiestwie do
niego jest elementem liniowym).
Niektrym elementom liniowym i blokowym, ktre nie zostay opisane powyej, zostan
powicone osobne podtematy.
Nierzadko zachodzi potrzeba, by umieci na stronie internetowej znak, ktrego nie mona
wprowadzi bezporednio z klawiatury lub posiadajcy specjalne znaczenie. Naley wtedy
skorzysta z tzw. znakw specjalnych. Kady z nich posiada unikalny kod zaczynajcy si od
znaku & i koczcy si rednikiem. Przykadowe znaki specjalne (encje):
< <
> >
& &
≤
spacja nieamliwa
Δ
€
®
∑
©
Spord wymienionych powyej, znaki <, >, & i spacja s znakami o specjalnym znaczeniu
i nie mona wstawia ich bezporednio z klawiatury. Pen list znakw specjalnych i ich
kodw mona znale na stronie http://algorytmy.pl/doc/xhtml/?id=109.
4. Grafika
Grafiki i obrazy s nieodcznym elementem stron internetowych. Najczciej uywane
w Internecie formaty plikw graficznych to JPEG (ang. Joint Photographic Experts Group),
PNG (ang. Portable Network Graphics) i GIF (ang. Graphics Interchange Format).
W HTML5 pojawi si nowy, semantyczny element blokowy <figure></figure>.
Komponent ten definiuje zbir elementw multimedialnych (obrazy, diagramy, wideo itd.) we
Strona | 7
wsplnym kontenerze, ktry nastpnie mona formatowa jako cao. Towarzyszy mu

najczciej para znacznikw <figcaption></figcaption>, dziki ktrym mona umieci
podpis pod rysunkiem.
Do umieszczenia grafiki w dokumencie suy znacznik <img>. Nie posiada on znacznika
zamykajcego. Wymaga atrybutw alt (alternatywny opis grafiki w przypadku jej niewczytania)
oraz src (adres URL grafiki). Opcjonalnie mona uy width (szeroko) i height (wysoko).
Przykady uycia:
grafika znajduje si w tym samym folderze, co strona internetowa:
<img src=grafika.jpg alt=opis_grafiki>
grafika znajduje si w folderze podrzdnym:
<img src=nazwa_folderu/grafika.jpg alt=opis_grafiki>
grafika znajduje si w folderze nadrzdnym:
<img src=../grafika.jpg alt=opis_grafiki>
grafika znajduje si na zewntrznym serwerze o znanym adresie:
<img src=http://www.tu.kielce.pl/files/eduroam_logo.jpg alt=Eduroam>
Przykadowy kod, za pomoc ktrego mona wstawi grafik wraz z podpisem:

<figure>
<img src="grafika1.jpg" alt="Obrazek 1">
<figcaption>Podpis grafiki</figcaption>
</figure>
5. Listy wypunktowane i numerowane

Za stworzenie listy wypunktowanej odpowiadaj znaczniki <ul></ul>, a numerowanej
tagi <ol></ol>. Kady kolejny punkt listy musi zawiera si midzy znacznikami
<li></li>. Tag <ol> moe posiada nastpujce atrybuty:
start numer pocztkowy,
type rodzaj numeracji (1, A, a, I, i),
reversed numerowanie w d (odwrcone: 10, 9, 8, 7).
Znacznik <ul> nie posiada adnych atrybutw dozwolonych przez jzyk HTML5. Przykadowy
kod tworzcy list numerowan:
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
<li>Punkt czwarty</li>
</ol>
Strona | 8
6. Odsyacze
Charakterystyczn cech stron internetowych jest obecno na nich odsyaczy
hipertekstowych. Tworzy si je za pomoc znacznika <a>. Uytkownik kocowy nie musi
wiedzie, gdzie umieszczone s elementy, do ktrych odwouje si dany odnonik. Odsyacze
mog prowadzi do:
fragmentw tej samej strony internetowej,
dowolnej strony w Internecie o znanym adresie:
<a href ="http://tu.kielce.pl">Politechnika witokrzyska</a>
dowolnych plikw lub stron znajdujcych na tym samym serwerze:
<a href ="podstrona1.html">Podstrona 1</a>
<a href ="podkatalog/podstrona2.html">Podstrona 2</a>
plikw innych rodzajw (np. grafiki lub skryptw).
Atrybut href definiuje adres URL, do ktrego ma nastpi przekierowanie. Inny przydatny
atrybut to target definiuje docelowe okno otwieranego dokumentu. Przykadowa warto to
_blank dokument otworzy si w nowym oknie lub na nowej karcie.
Funkcj odsyacza moe peni rwnie grafika (obrazek):

<a href ="http://tu.kielce.pl"><img src=obrazek.jpg alt=opis_grafiki></a>
7. Tabele
Tabele su do tworzenia zestawie danych tabelarycznych. Nie naley uywa ich do
tworzenia szkieletw stron internetowych, gdy do tego celu su bloki dokumentu takie jak
<header>, <nav>, <article>, <section>, <aside>, <footer>, <div>. Poniej omwiony zostanie
prostszy model tworzenia tabel, ktry zawiera pi znacznikw.
Ramy tabeli tworz znaczniki <table></table> pomidzy nimi naley umieci ca
zawarto. Para znacznikw <caption></caption> suy do nadania tytuu dla tworzonej
tabeli. Wiersze umieszcza si midzy tagami <tr></tr>. Do tworzenia poszczeglnych
komrek su znaczniki <td></td>. To wanie komrki zawieraj konkretne dane, np. tekst
lub grafik. Aby tabela posiadaa obramowanie, w znaczniku <table> umieszcza si atrybut
border z okrelon wartoci (bez podania wartoci tworzy si obramowanie o domylnej
szerokoci). Nagwki wiersza, dla podkrelenia ich wikszego znaczenia, umieszcza si midzy
znacznikami <th></th> (zamiast <td>) znaczenie semantyczne, a ponadto tekst zawarty
midzy tymi tagami jest domylnie pogrubiony. Do szczegowego formatowania tabel su
kaskadowe arkusze stylw CSS. Przykadowy kod tworzcy tabel posiadajc nagwek
i jeden wiersz:
<table border="1">
<caption>Przykadowa tabela</caption>
Strona | 9
<tr>
<th>Nagwek 1</th>
<th>Nagwek 2</th>
</tr>
<tr>
<td>Komrka 1</td>
<td>Komrka 2</td>
</tr>
</table>
8. Walidacja kodu HTML

Utworzone strony WWW, nawet pomimo poprawnego wywietlania przez przegldark
internetow, mog zawiera rne bdy. W ich odnalezieniu bardzo pomocny jest walidator,
czyli narzdzie pozwalajce sprawdzi poprawno skadni kodu HTML. Jeden z nich
udostpnia na swojej stronie organizacja W3C: http://validator.w3.org rysunek 2. Po
wybraniu opcji Validate by File Upload, wskazaniu odpowiedniego pliku i klikniciu
przycisku Check, nastpuje proces walidacji. W wyniku otrzymuje si liczb odnalezionych
bdw wraz ze wskazaniem ich umiejscowienia i krtkim opisem.
Rysunek 2. Walidator HTML

rdo: http://validator.w3.org.
Strona | 10
Cz II CSS3
9. Wprowadzenie do CSS3
Wspczesne strony internetowe powinny by budowane wedug reguy mwicej, e kod
HTML odpowiada za podzia struktury dokumentu na sekcje, czyli np. nagwki, akapity, listy,
grafiki, odsyacze, a arkusz stylw CSS jest odpowiedzialny za ich szczegowe formatowanie,
np. zdefiniowanie czcionek, kolorw, marginesw i obramowania.
Kaskadowe arkusze stylw CSS (ang. Cascading Style Sheets) umoliwiaj przeniesienie
formatowania stron internetowych (nawet tych najbardziej zoonych) do jednego dokumentu,
czyli tzw. arkusza stylw. Innymi sowy CSS suy do odseparowania struktury strony
internetowej od formy jej prezentacji. Dziki temu zabiegowi kod samej strony internetowej
pozostaje prosty i czytelny, a zmiana formatowania i ukadu caej tej strony wraz z podstronami
polega tylko i wycznie na modyfikowaniu arkusza stylw. Arkusz stylw zawiera list regu
(dyrektyw), ktre definiuj sposb, w jaki ma by wywietlona zawarto wybranego
dokumentu przez przegldark internetow.
1. Osadzanie stylw w dokumencie. Skadnia arkuszy CSS

Kaskadowe arkusze stylw CSS mona osadzi w dokumencie na trzy sposoby:
style wewntrzne (lokalne) informacje mona zagnieda wewntrz konkretnego
znacznika w atrybucie style. Takie rozwizanie moe wydawa si wygodne, lecz
powoduje nieczytelno kodu dokumentu i utrudnia pniejsz jego modyfikacj.
Przykad uycia zmieniajcy kolor tekstu na czerwony w akapicie:
<p style=color: red>Tekst pisany na czerwono</p>
wewntrzny arkusz stylw osadzenie caego kodu arkusza stylw za pomoc pary
znacznikw <style></style> umieszczonych w sekcji dokumentu <head>.
Rozwizanie to odseparowuje co prawda formatowanie od znacznikw na stronie, ale
cay kod cigle znajduje si w jednym pliku. Poniej podano przykad zmieniajcy to
strony internetowej na jasnoniebieskie i kolor tekstu w akapicie na zielony:
<head>
<style>
body {background-color: lightblue;}
p {color: green;}
</style>
</head>
zewntrzny arkusz stylw podczenie zewntrznego arkusza stylw do dokumentu

za pomoc znacznika <link> umieszczonego w sekcji <head>. Rozwizanie to wydaje
Strona | 11
si by najbardziej uyteczne, gdy dziki niemu mona uywa dokadnie tego

samego formatowania na wielu rnych stronach jednoczenie. Zewntrzny plik
arkusza stylw powinien by zwyczajnym plikiem tekstowym, posiada rozszerzenie
.css i zawiera co najmniej jedn regu. Przykad sposobu doczenia zewntrznego
pliku o nazwie style.css do dokumentu:
<head>
<link rel="stylesheet" href="style.css">
</head>
Kada regua zamieszczona w arkuszu stylw nakada co najmniej jeden styl na jeden lub
wicej elementw. Regua ta ma ogln posta:
selektor {
wasno: warto;
wasno: warto;
}
W skad powyszej reguy wchodz trzy elementy:

selektor suy do identyfikacji elementu, ktry ma zosta sformatowany,
wasno (atrybut) okrela typ formatowania (np. zmiana barwy, czcionki itd.),
ktry zostanie naoony na okrelony element. W ramach jednej reguy mona
zadeklarowa dowoln liczb wasnoci,
warto w jej miejsce wstawiany jest walor wasnoci.
10. Wybrane wasnoci arkuszy stylw

Istnieje bardzo duo wasnoci, ktre mona nadawa selektorom. W poniszej tabeli
przedstawiono jedynie ich niewielk liczb. Pen, alfabetyczn list mona znale na stronie:
http://webmaster.helion.pl/index.php/kurs-css/6/151-alfabetyczna-lista-stylow.
Kategoria Wasno Opis

definiuje kolor ta elementu, np.
background-color
background-color: aqua;
definiuje element graficzny jako to, np.
Kolor i to background-image
background-image: url(/grafika/tlo.jpg);
definiuje kolor elementu, np.
color
color: red;
definiuje rodzaj czcionki, np.
Tekst font-family
font-family: Arial;
Strona | 12
definiuje rozmiar czcionki, np.

font-size
font-size: 18px;
definiuje stopie pogrubienia czcionki; przykadowe
wartoci:
normal domylna grubo,
font-weight bold czcionka pogrubiona,
bolder czcionka grubsza ni aktualna,
fighter czcionka ciesza ni aktualna, np.
font-weight: bold;
definiuje styl czcionki; przykadowe wartoci:
normal czcionka normalna,
font-style
italic kurysywa, np.
font-style: italic;
zbiorczy zapis wasnoci czcionki, np.
font
font: 15px arial;
definiuje wyrnienie tekstu; przykadowe wartoci:
none brak,
text-decoration underline podkrelenie,
overline przekrelenie, np.
text-decoration: overline;
definiuje poziome wyrwnanie tekstu; przykadowe
wartoci:
left wyrwnanie do lewej strony,
text-align right wyrwnanie do prawej strony,
center wyrodkowanie,
justify wyrwnanie do lewej i do prawej, np.
text-align: center;
definiuje pionowe wyrwnanie tekstu; przykadowe
wartoci:
bottom wyrwnanie do dolnej czci
elementu,
middle wyrwnanie do rodkowej czci
vertical-align
elementu,
top wyrwnanie do grnej czci elementu,
sub indeks grny,
super indeks dolny, np.
vertical-align: middle;
Strona | 13
definiuje wcicie tekstu, np.

text-indent
text-indent: 3pt;
definiuje odstp midzy liniami, np.
line-height
line-height: 100%;
definiuje szeroko obramowania, np.
border-width
border-width: 4px;
definiuje kolor obramowania, np.
border-color
border-color: blue;
definiuje styl obramowania; przykadowe wartoci:
none brak obramowania,
Obramowanie
dashed linia przerywana,
border-style
solid linia ciga,
double linia podwjna, np.
border-style: dashed;
zbiorczy zapis wasnoci obramowania, np.
border
border: solid blue;
definiuje lewy margines, np.
margin-left
margin-left: 20px;
margin-right definiuje prawy margines
margin-top definiuje grny margines
margin-bottom definiuje dolny margines
zbiorczy zapis waciwoci marginesw (obszaru
Przestrze wystpujcego po zewntrznej stronie obramowania)
margin
i odstpy w kolejnoci: top, right, bottom, left, np.
margin: 10px 50px 10px 20px;
zbiorczy zapis waciwoci dopenienia (obszaru
wystpujcego po wewntrznej stronie obramowania
padding elementu, tzw. marginesu wewntrznego)
w kolejnoci: top, right, bottom, left, np.
padding: 3cm;
szeroko, np.
width
Wymiary width: 100px;
height wysoko
definiuje rodzaj pozycjonowania; przykadowe
wartoci:
Pozycjonowanie
position static pozycjonowanie tradycyjne: kady
elementw
element ma swoje miejsce,
relative pozycjonowanie wzgldne: element
Strona | 14
zmienia pozycj bez wpywu na pozosta cz

dokumentu,
absolute pozycjonowanie absolutne: okrela
sta pozycj wzgldem boku okna
przegldarki, np.
position: relative;
okrela pozycj wzgldem grnej krawdzi, np.
top
top: 15px;
right okrela pozycj wzgldem prawej krawdzi
bottom okrela pozycj wzgldem dolnej krawdzi
left okrela pozycj wzgldem lewej krawdzi
definiuje pywanie elementw: umoliwia
przepywa elementom we wskazanym kierunku;
przykadowe wartoci:
float left element znajduje si po lewej stronie,
right element znajduje si po prawej stronie,
np.
float: left;
tamowanie elementw: zrzuca element w d,
przykadowe wartoci:
left wymusza now lini pod obiektem
umiejscowionym po lewej stronie,
right wymusza now lini pod obiektem
clear
umiejscowionym po prawej stronie,
none element zajmuje pozycj domyln,
both wymusza now lini pod obiektem bez
wzgldu na jego pooenie, np.
clear: both;
definiuje styl listy; przykadowe wartoci:
disc koo,
Listy list-style-type circle okrg,
square kwadrat, np.
list-style-type: disc;
definiuje, czy obramowania poszczeglnych
komrek tabeli maj si na siebie nakada;
Tabele border-collapse przykadowe wartoci:
collapse obramowania komrek s ze sob
poczone,
Strona | 15
separate obramowania komrek pozostaj od

siebie oddzielone, np.
border-collapse: collapse;
definiuje szeroko odstpw midzy komrkami
border-spacing tabeli, np.
border-spacing: 10px;
Naley pamita, e kada grupa znacznikw ma cile okrelony zesp wasnoci (atrybutw),
ktre mona jej przypisywa. Kada wasno posiada z kolei cile okrelon list wartoci,
ktre mona im nadawa.
11. Formatowanie elementw za pomoc klas i identyfikatorw

Jeli strona internetowa jest nieco bardziej zoona, zachodzi wtedy potrzeba wybrania
konkretnych elementw, na ktre trzeba naoy formatowanie. Styl do wybranego znacznika
mona przypisa za pomoc tzw. selektora. Poniej omwione zostan take klasy
i identyfikatory.
Selektor prosty to znacznik jzyka HTML przypisany do elementu, ktry w danym
momencie podlega formatowaniu. Przykadowo styl zdefiniowany dla selektora <p> bdzie
odnosi si tylko i wycznie do akapitw znajdujcych si pomidzy znacznikami <p></p>:
p{
text-align: center;
color: blue;
}
Selektor uniwersalny umoliwia zdefiniowanie formatowania dla wszystkich elementw

strony internetowej. Dostpne s dwa takie selektory: * oraz body, np.:
body {
color: lightgreen;
}
Moliwe jest rwnie grupowanie selektorw. Jest to przydatne, gdy identyczne wartoci
maj zosta naoone na wszystkie z tych selektorw. Poszczeglne selektory naley rozdziela
przecinkami, np.:
h1, h2, h3 {
color: red;
}
Identyfikatory umoliwiaj przypisanie formatowania do konkretnego znacznika, ktry ma

wasn, unikaln nazw id. Identyfikator suy do nadania unikalnego formatowania dla
Strona | 16
wycznie jednego elementu na stronie internetowej (w przeciwiestwie do klas). W deklaracji

CSS przed nazw identyfikatora umieszcza si znak #, np.:
#Kontener {
border-width: 4px;
}
Wybrany znacznik HTML musi posiada atrybut id, np.:

<div id=Kontener>
Klasy pozwalaj na przypisywanie formatowania do wybranych elementw, ale mona

wykorzystywa je wielokrotnie (w dowolnej liczbie elementw). Skadnia reguy CSS
rozpoczyna si od kropki, a nastpnie zawiera nazw klasy, np.:
.Kontener2 {
border-width: 4px;
}
Elementy, ktre maj zosta sformatowane za pomoc klasy, musz posiada atrybut class, np.:
<div class=Kontener2>
W sytuacji, gdy do jednego znacznika odwouje si wicej ni jeden selektor, to jako

pierwszy zostanie naoony ten bardziej oglny. Wie si z tym zasada kaskadowoci. Mwi
ona, e jako pierwsze uwzgldniane s zewntrzne arkusze stylw, nastpnie style wpisane do
nagwka <head>, a dopiero na samym kocu style przypisane lokalnie poszczeglnym
znacznikom. Gdy na dany element jest naoonych kilka rnych rde stylw, jako ostatni
zostanie naoony ten, ktry znajduje si najbliej formatowanego elementu.
12. Jednostki miar

Wyrnia si dwa rodzaje jednostek miar:
jednostki wzgldne (relatywne):
o px piksele jednostka ta opiera si na pojedynczych punktach widocznych na
ekranie monitora, tzw. pikselach,
o em proporcje wysokoci w odniesieniu do czcionki danego elementu,
o ex proporcje w stosunku do wysokoci litery x (maej litery w aktualnej
czcionce),
o % procenty okrelaj wielkoci wzgldem wartoci domylnej.
jednostki bezwzgldne (absolutne):
o in cale jednostka ta wywodzi si z amerykaskiego systemu miarowego; 1 in
= 2,54 cm,
Strona | 17
o pt punkty; 1 pt = 1/72 in,

o cm centymetry; 1 cm = 0,39 in,
o mm milimetry; 10 mm = 1 cm,
o pc pika; 1 pc = 12 pt.
13. Kolory
Wartoci kolorw mona okrela za pomoc:
nazwy wasnej koloru kilkanacie kolorw podstawowych moe by zapisywanych
za pomoc ich nazw w jzyku angielskim, np. Black, Red, Green, Blue,
wartoci RGB (ang. Red, Green, Blue) zapis kolorw przyjmuje tutaj liczby
cakowite z przedziau od 0 do 255 dla kadej z wartoci skadowych, np.
rgb(255,128,0). Oznaczenie koloru jest wic zoeniem wartoci kodowych trzech
skadowych barw podstawowych: czerwonej (red), zielonej (green) i niebieskiej (blue),
warto szesnastkowej (heksadecymalnej) zapis ten zawiera sze cyfr
szesnastkowych (trzy bajty), ktre zgodnie z modelem RGB odpowiadaj kolejno za
barw czerwon, zielon oraz niebiesk. Kady bajt przyjmuje wartoci z przedziau od
0 (00) do 255 (FF), np. #0000FF.
Wybrane kolory podstawowe:

Kolor Nazwa po angielsku Zapis szesnastkowy
cyjan aqua #00FFFF
czarny black #000000
niebieski blue #0000FF
fuksja fuchsia #FF00FF
zielony green #008000
szary grey #808080
limonka lime #00FF00
winiowy maroon #800000
granatowy navy #000080
oliwkowy olive #808000
fioletowy purple #800080
czerwony red #FF0000
srebrny silver #C0C0C0
morski teal #008080
biay white #FFFFFF
ty yellow #FFFF00
Wicej o kolorach mona przeczyta na stronie http://algorytmy.pl/doc/xhtml/?id=0108.

Strona | 18
Opracowano na podstawie:
1. Danowski B., Tablice informatyczne. CSS3, Helion, Gliwice 2012.
2. MacDonald M., HTML5: Nieoficjalny podrcznik, Helion, Gliwice 2012.
3. Mazur D., HTML5 i CSS3. Definicja nowoczesnoci, Wydawnictwo Naukowe PWN SA,
Warszawa 2015.
4. HTML(5) Tutorial, http://www.w3schools.com/html.
5. Kurs jzyka HTML i CSS, http://webmaster.helion.pl.
6. Kurs HTML5, http://how2html.pl.
7. https://pl.wikipedia.org.
Strona | 19

Teoria html5 css3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Teoria html5 css3

Uploaded by

Copyright:

Available Formats

Katedra Informatyki i Matematyki Stosowanej opracowa: Micha Pajcki

Wybrane zagadnienia HTML5 i CSS3

Rysunek 1. Budowa znacznika HTML5

Zadaniem przegldarki internetowej jest odczyt znacznikw i ich interpretacja w taki

Strony internetowe powinno tworzy si wedug cile okrelonych standardw, za ktrych

2. Struktura dokumentu HTML5

3. Elementy blokowe i liniowe. Znaki specjalne

tzw. elementy blokowe s one fragmentami zajmujcymi ca, samodzieln i wydzielon

A. Wybrane znaczniki blokowe:

Nagwek dokumentu tworzy blok dokumentu, w ktrym umieszcza

B. Wybrane znaczniki liniowe:

Drobny druk fragment tekstu zawarty midzy tymi znacznikami jest

wsplnym kontenerze, ktry nastpnie mona formatowa jako cao. Towarzyszy mu

Przykadowy kod, za pomoc ktrego mona wstawi grafik wraz z podpisem:

5. Listy wypunktowane i numerowane

Funkcj odsyacza moe peni rwnie grafika (obrazek):

8. Walidacja kodu HTML

Rysunek 2. Walidator HTML

1. Osadzanie stylw w dokumencie. Skadnia arkuszy CSS

zewntrzny arkusz stylw podczenie zewntrznego arkusza stylw do dokumentu

si by najbardziej uyteczne, gdy dziki niemu mona uywa dokadnie tego

W skad powyszej reguy wchodz trzy elementy:

10. Wybrane wasnoci arkuszy stylw

Kategoria Wasno Opis

definiuje rozmiar czcionki, np.

definiuje wcicie tekstu, np.

zmienia pozycj bez wpywu na pozosta cz

separate obramowania komrek pozostaj od

11. Formatowanie elementw za pomoc klas i identyfikatorw

Selektor uniwersalny umoliwia zdefiniowanie formatowania dla wszystkich elementw

Identyfikatory umoliwiaj przypisanie formatowania do konkretnego znacznika, ktry ma

wycznie jednego elementu na stronie internetowej (w przeciwiestwie do klas). W deklaracji

Wybrany znacznik HTML musi posiada atrybut id, np.:

Klasy pozwalaj na przypisywanie formatowania do wybranych elementw, ale mona

W sytuacji, gdy do jednego znacznika odwouje si wicej ni jeden selektor, to jako

12. Jednostki miar

o pt punkty; 1 pt = 1/72 in,

Wybrane kolory podstawowe:

Wicej o kolorach mona przeczyta na stronie http://algorytmy.pl/doc/xhtml/?id=0108.

You might also like