krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
CSS (ang. Cascading Style Sheets) czyli kaskadowe arkusze stylów to
język, który służy do prezentacji m.in. elementów HTML, XHTML. CSS
służy odseparowaniu treści/znaczenia zawartego w HTML, XHTML od
formy. Takie rozwiązanie ma wiele zalet.
Stosowanie CSS i HTML/XHTML według wytycznych konsorcjum W3
poprawia 'uniwersalności' kodu HTML/XHTML. Kod HTML/XHTML
pozbawiony informacji o formatowaniu jest mniejszy, spójny, posiada
znaczenie (tzw. kod semantyczny), łatwiej go interpretować. Te cechy są o
tyle istotne, iż coraz częściej do przeglądania stron internetowych służą
różne platformy, choćby urządzenia przenośne, które dysponują własnymi
przeglądarkami (ang. smartphone).
CSS umożliwia globalne i automatyczne formatowanie całych serwisów
internetowych, przez co zmiany wyglądu mogą być wprowadzane
stosunkowo szybko i są mniej pracochłonne.
CSS jest rozwijany od połowy lat 90-tych i do dziś (tj. do 2010 roku)
doczekał się wersji: 1.0, 2.0, 2.1. Obecnie trwają prace nad wersją 3.0.
Niniejszy kurs operuje przykładami CSS w wersji 2.0 oraz dokumentem
XHTML 1.0 według specyfikacji konsorcjum W3. Przykłady są realizowane
w darmowym edytorze Notepad ++. Szczegóły instalacji i pracy znajdziesz
w kursie XHTML.
Utwórz dokument XHTML 1.0, np. w oparciu o poniższe źródło:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"
lang="pl">
<head>
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8" />
<title>tytuł</title>
</head>
<body>
<p>to jest dowolna treść akapitu a obok znajduje się
<a href="#">odsyłacz</a></p>
</body>
</html>
1
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
W Notepad++ zapisz ten dokument jako html tak aby otrzymać
rozpoznawanie i interpretowanie składni języka:
Zapisz zmiany i otwórz projekt w przeglądarce internetowej:
Odsyłacz jest wyświetlony przy pomocy niebieskiej czcionki.
Gdy odsyłacz zostanie zatwierdzony/'kliknięty', a lokalizacja do której
odsyła zostanie odwiedzona, odsyłacz będzie wyświetlony przy pomocy
czcionki w kolorze zbliżonym do fioletowego.
Pomimo że nie deklarowaliśmy obu kolorów, automatycznie się pojawiły.
Za te domyślne formy prezentacji odsyłaczy odpowiada CSS przeglądarki,
który określany jest jako styl przeglądarki (ang. browser style). Większość
producentów przeglądarek umożliwia własne ustawienia np. kolorów czy
krojów domyślnych czcionek poprzez odpowiednie menu. Te operacje to de
facto modyfikacja ustawień fabrycznych CSS przeglądarek. Gdy CSS
przeglądarki zostanie zmieniony i zastąpiony własnymi ustawieniami
nazywany jest stylem użytkownika (ang. user style).
2
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Jak 'świadomie' tworzyć CSS, tak aby wpływać na prezentację/wygląd
tworzonych stron internetowych? Aby odpowiedzieć na to pytanie w
pierwszej kolejności warto zwrócić uwagę na składnię języka CSS i sposób
jej stosowania.
CSS załączony
Do stworzonego dokumentu XHTML dodamy/załączymy CSS. Miejscem
załączenia CSS jest część head. Zmodyfikuj dokument dodając poniższą
frazę (przed końcem części head):
<style type="text/css">
p {color: #999999;}
</style>
Źródło dokumentu powinno wyglądać np. jak niżej:
A oto i efekt zmian:
Tekst w akapicie (znacznik HTML <p>, czyli ang. paragraph) jest
wyświetlany czcionką szarą. Dlaczego?
W składni CSS odnieśliśmy się do znacznika <p>
p {color: #999999;}
Takie odniesienie do znacznika/elementu HTML w CSS nazywamy
selektorem. Innymi słowy w CSS określiliśmy selektor p. Pojęcie selektor
'zaznacza/wybiera' i formatuje określony element HTML.
Selektor zawiera cechę lub cechy, które otoczone są klamrą. W
omawianym przykładzie cechą jest kolor:
p {color
3
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Cecha powinna zawierać po nazwie dwukropek i wartość, np. powinniśmy
sprecyzować kolor:
p {color: #999999}
Wartość #999999 wyraża natężenie trzech składowych: RGB (ang. Red
Green Blue). Każda ze składowych kodowana jest przez 2 miejsca w
kodzie 16-stkowym (ang. hexadecimal code).
Zawarte w klamrach cechy i ich wartości powinny być odseparowane
średnikiem. Dobrą praktyka jest stosowanie średnika, nawet gdy
posiadamy tylko jedną cechę i wartość:
p {color: #999999;}
Zatem schemat składni można uogólnić:
selektor {cecha: wartość;}
lub
selektor {cecha1: wartość1; cecha2: wartość2;}
Czasami, aby zwiększyć przejrzystość kodu spotyka się formę:
selektor {
cecha1: wartość1;
cecha2: wartość2;
}
Aby sprawdzić przypiszmy jeszcze jedną wartość selektorowi p, tak aby
zwiększyć czcionkę:
A oto i rezultat:
Zauważ, iż powiększyła się nie tylko czcionka frazy, ale i odsyłacza.
Dlaczego? Ponieważ w kodzie HTML odsyłacz jest zawarty wewnątrz
elementu p.
Prze tę hierarchię i przez CSS odsyłacz dziedziczy cechy akapitu (jednak
nie wszystkie).
4
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Ta właściwość CSS nazywana jest dziedziczeniem. Można ja stosować
znacznie szerzej, np. pod pierwszym akapitem dodaj drugi akapit:
Zatem reguła dziedziczenia dotyczy każdego akapitu. W ten prosty sposób
(przy pomocy zaledwie kliku deklaracji) można sformatować wszystkie
akapity w serwisie internetowym.
Aby w pełni wykorzystać możliwości CSS potrzebna jest znajomość m.in.
możliwych cech i ich wartości. Te informacje konsorcjum W3 przedstawia
na stronach: http://www.w3schools.com/css/
Jeżeli chcesz sprawdzić poprawność własnego arkusza odwiedź adres:
http://jigsaw.w3.org/css-validator/
Dla zainteresowanych: http://www.w3.org/Style/CSS/ - pod tym adresem
znajdziesz dokumentację i specyfikację CSS
Zewnętrzne arkusze CSS
Powszechnie stosowaną praktyką jest oddzielenie kodu CSS i
HTML/XHTML. W pierwszej kolejność usuń z części head poniższą
deklarację CSS:
<head>
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8" />
<title>tytuł</title>
<style type="text/css">
p {color: #999999; font-size:2em;}
</style>
</head>
5
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
W Notepad++ utwórz (File/New lub Ctrl+N) drugi dokument. Wprowadź
tylko tę frazę:
p {color: #999999; font-size:2em;}
Zmodyfikuj rozmiar i kolor
Następnie, w tej samej lokalizacji/folderze co plik HTML, zapisz nowo
utworzony dokument jako arkusz CSS:
Poprawnie wykonana operacja spowoduje powstanie dwóch plików:
i dwóch zakładek:
Nawet po wprowadzeniu zmian i zapisaniu arkusza CSS, modyfikacje nie
będą widoczne w przeglądarce internetowej.
Dlaczego? Ponieważ dokument XHTML 'nie wie nic' o nowo powstałym
arkuszu CSS. Nie ma między tymi dokumentami powiązania. Fraza, która
'dowiąże' arkusz CSS powinna się znaleźć z część head dokumentu
XHTML:
<link rel="stylesheet" type="text/css" href="styl.css"
media="all" />
Sprawdź czy ta fraza przyniosła pożądany rezultat.
6
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Użyta fraza zawiera atrybuty: rel, type, href, media. Sprawdź na
stronach konsorcjum W3 (http://www.w3schools.com/tags/) jakie te
atrybuty pełnia funkcje i jakie mogą przyjmować wartości.
Dyskutowane wyżej rozwiązanie określane jest jako 'linked style'. W części
head można użyć więcej niż jeden zewnętrzny arkusz CSS, np.:
Zewnętrzne arkusze CSS - importowanie
W przypadku dużych serwisów internetowych i skomplikowanego
stylizowania często style CSS 'rozbija się' na pojedyncze pliki, tak aby
łatwo można było strukturalizować formatowanie i organizować pracę.
Stwórz w tej samej lokalizacji co poprzednie pliki arkusze CSS:
czcionki.css i kolory.css. Następnie wytnij zawartość pliku styl.css i
wklej do pliku czcionki.css. W pliku kolory.css dodaj poniższą treść:
body {background-color: #6d8fe3;}
Zapisz zmiany i w przeglądarce przeładuj dokument XHTML. Dlaczego nie
działa?
Prawdopodobnie posiadasz podobną strukturę plików:
Jest powiązanie między dokumentem
index.html i styl.css (jaka fraza za to
powiązanie odpowiada?).
Jednak styl.css jest pusty. Natomiast
informacje o formatowaniu zawierają
pliki czcionki.css i kolory.css.
czcionki.css i kolory.css nie mają jednak powiązań z pozostałymi plikami.
Jak to zmienić. Wystarczy do pliku styl.css zaimportować pliki:
czcionki.css i kolory.css. Do tego celu służy fraza:
@import url(dowlony_plik.css);
Styl lokalny
Styl ten określany jako 'inline style' stosowany bezpośrednio jest w źródle
XHTML:
<p style=”color: #999999; font-size: 2em;”>treść</p>
Jednak z uwagi na specyfikację Strict XHTML 1.0 (patrz kurs XHTML)
'inline style' nie znajduje zastosowania. Zastanów się dlaczego?
7
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Selektory
Selektor atrybutów
W CSS występuje kilka typów selektorów
(http://webmaster.helion.pl/index.php/selektory/6/145-wprowadzenie-do-
selektorow).
Pierwszym typem (str.3) był selektor elementu p, a jego zastosowanie
formatowało każdy element p, tzn. każdy akapit. Zdecydowana większość
elementów może posiadać atrybuty. Zestaw wspólnych atrybutów (ang.
core atributes) podany jest na stronach konsorcjum W3
(http://www.w3schools.com/tags/ref_standardattributes.asp). Ten zestaw
wspólnych atrybutów można zastosować do formatowania w CSS. Do tego
właśnie służy selektor atrybutów, a w tym przykładzie jako atrybutu
użyjemy tytułu (title) (uwaga: chodzi o atrybut title, który
przypisywany jest elementom, a nie o element title, który pojawia się w
części head dokumentu XHTML/HTML).
Utwórz dokument XHTML 1.0, np. w oparciu o poniższe źródło:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"
lang="pl">
<head>
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8" />
<title>tytuł</title>
</head>
<body>
</body>
</html>
Zapisz dokument jako index.html. Zostaw/utwórz arkusz styl.css,
pozostałe dokumenty css usuń. Przypisz plikowi index.html odwołanie do
zewnętrznego arkusza styl.css.
Uzupełnij arkusz styl.css np. poniższą frazą:
Zapisz zmiany i przeładuj projekt w przeglądarce. Sprawdź poprawność
utworzonego kodu za pomocą walidatora HTML(kurs XHTML, str. 6-7) i
CSS (str. 5).
8
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
W treści dokumentu umieść wykaz nieuporządkowany, który będzie
zawierał 5 odsyłaczy o dowolnych adresach/odwołaniach i nazwach
(konstrukcja wykazów nieuporządkowanych: kurs XHTML, str. 25-26, 35).
Ponadto dwa akapity z dowolną treścią.
Nadaj wykazowi nieuporządkowanemu i jednemu z akapitów dwa różne
tytuły (atrybut title).
Wykorzystajmy teraz w styl.css zdefiniowany w index.html atrybut title.
Oto rezultat (zauważ, że odsyłacze nie zmieniły koloru):
Ta deklaracja
spowodowała, że każdy
element, który zawiera
atrybut tilte będzie
formatowany w
określony sposób.
9
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Czas na precyzyjniejszą definicję w CSS. Odwołajmy się do konkretnego
elementu, który ma atrybut title:
Tym razem zostały wybrane tylko akapity.
Można również odwołać się do tytułu o określonej wartości (w przypadku
wątpliwości zobacz kod xhtml ze strony 9):
Zadanie 1
Stwórz selektor w arkuszu CSS dla wykazu nieuporządkowanego
powołując się na jego tytuł i wartość tego tytułu.
Selektor – identyfikator
Analizując wspólny dla większości znaczników/elementów zestaw
atrybutów można m.in. spotkać atrybut id (identyfikator). Identyfikatory
wraz ze elementami div (kurs XHTML, str. 27) stanowią podstawowe
narzędzie budowania layout współczesnych dokumentów internetowych.
Selektory są unikatowe, tzn. w jednym dokumencie mogą zostać użyte
tylko raz.
W kodzie XHTML identyfikator jest definiowany jak niżej:
<div id="container">
dowolna treść
</div>
Warto podkreślić, że podobnie jak miało to miejsce w przypadku wartości
atrybutu title, wartość id może być ciągiem znaków (najlepiej unikać
stosowania znaków diaktrycznych).
W kodzie CSS odwołanie do identyfikatora 'container' może wyglądać tak:
#container {}
Aby poprawnie odwołać się, pamiętaj o wielkości liter - zdecydowana
większość przeglądarek rozpoznaje i odróżnia wielkość liter dla wartość.
10
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Usuń w kodzie XHTML wcześniej zadeklarowane atrybuty title. Otocz
całą treść zawartą w części body elementem div (tzw. blok dokumentu) i
przypisz temu elementowi identyfikator:
Zapisz zmiany i przeładuj projekt w przeglądarce.
Nie wygląda, aby cokolwiek się zmieniło. Jak zatem działa blok dokumentu
– element div?
Aby dostrzec te zmiany zainstaluj w przeglądarce firefox dodatek Web
Developer. Wpisz tę nazwę
jako hasło w wyszukiwarce,
odwiedź pierwszy odsyłacz,
zatwierdź instalację,
a następnie zrestartuj
przeglądarkę.
Efekt instalacji to niewielki, ale bardzo pożyteczny pasek na górze
(dostępny również z menu Narzędzia/Web Developer):
Wybierz z tego paska
Zaznacz/Elementy
blokowe
11
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Rezultat tej operacji może wyglądać jak niżej:
Zielonym kolorem został zaznaczony wykaz, czerwonym akapity, a blok
dokumentu (w moim przypadku o identyfikatorze 'container') został
zaznaczony kolorem niebieskim.
Skoro już 'zidentyfikowaliśmy' miejsce bloku dokumentu 'container' czas na
jego formatowanie. Uzupełnij arkusz CSS jak np. niżej:
Zapisz zmiany i sprawdź.
CSS umożliwia, aby blok dokumentu 'container' faktycznie był
'kontenerem'.
margin:auto pozwala na wyśrodkowanie;
width określa szerokość za pomocą różnych jednostek (tu w pikselach),
określ szerokość w procentach
Selektor – klasa
W przeciwieństwie do identyfikatorów,
klasy można i należy używać wielokrotnie
w jednym dokumencie. Praca z klasami
może odrobinę przypominać pracę ze
stylami w edytorach tekstu (np. panel w
MS Word 2007 ).
Style w edytorach tekstu mają znacznie
(np. Nagłówek 1) i mogą być w różny
sposób formatowane. Gdy zmienimy w
panelu np. format Nagłówka 1, wszystkie
elementy zadeklarowane wcześniej w tym
stylu ulegną zmianie.
12
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
W XHTML za deklarację klasy odpowiada atrybut class. Podobnie jak id,
class należy do 'core atributes', a jego zastosowanie może wyglądać jak
poniżej:
<p class=”normal”>dowolna treść</p>
Z kolei w CSS odwołanie do klasy wygląda np. tak:
.normal {font-weight: bold;}
W ramach eksperymentów zmodyfikuj wcześniejszy kod, tak aby wykazowi
nieuporządkowanemu i jednemu z akapitów nadać tę sama klasę.
Następnie zadeklaruj klasę w CSS (np. w oparciu o w/w składnię dla klasy
.normal).
Zapisz zmiany i sprawdź efekt.
W tym wypadku zarówno wykaz nieuporządkowany jak i akapit zostały
podobnie sformatowane (np. czcionka pogrubiona). Decyduje o tym
wyrażenie:
.normal {font-weight: bold;}
tzn. każdy element opatrzony klasą .normal będzie pisany czcionką
pogrubioną. To dość ogólne.
Można jednak sprecyzować formatowanie, np.:
p.normal {font-weight: bold;}
Sprawdź efekt.
Tym razem odnosimy się do wszystkich akapitów, które posiadają klasę
.normal.
Zachowaj projekt jako 1.html i 1.css!
13
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Stosowanie klas
'Semantyczny' XHTML i 'logiczny/hierarchiczny' CSS to nie tylko standardy,
ale przede wszystkimi łatwość administracji. Takie podejście powoduje, że
dokumenty zawierają mniej kodu, mają więc mniejszy rozmiar, a co za tym
idzie skraca się czas potrzebny na ich załadowanie.
Dość teorii, czas na antyprzykład. Znając klasy trudno oprzeć się pokusie,
aby ich nie nadużyć. Łatwo wpaść w pułapkę precyzyjnego 'zaklasowania'
elementów.
Chcemy, aby każdy akapit w serwisie zawierał pewne atrybuty (np.
czcionkę pogrubioną). Czy w takim wypadku musimy uciekać się do
poniższego:
<p class="normal">to jest pierwszy akapit o mnie</p>
<p class="normal">a to drugi akapit, w którym
dla odmiany bezpośrednio odniosę się do siebie</p>
Zaproponuj rozwiązanie
Przy stosowaniu, klasy można ze sobą łączyć.
Zwróć uwagę, że wykaz nieuporządkowany ma przypisane dwie klasy:
normal i navi. Ponadto drugi akapit ma przypisaną klasę normal.
Zdefiniujmy z CSS obie klasy:
Jaki jest efekt zmian?
14
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Grupowanie selektorów
Zmodyfikuj/stwórz nowy dokument XHTML, tak aby jego treść zawierała
podobne elementy:
Przypisz w zewnętrznym arkuszu CSS właściwości dla tych klas:
Zapisz projekt, sprawdź poprawność XHMTL i CSS, otwórz dokument w
przeglądarce.
Zauważ, że obie klasy mają te same właściwości. W takim przypadku
możemy zgrupować klasy, oddzielając je od siebie przecinkiem:
Zadanie 2
Stwórz kilka akapitów, przypisz im różne klasy. Za pomocą portalu
http://www.typetester.org/ skonfiguruj dla każdej z klas właściwości.
Postaraj się aby część właściwości pokrywała się dla części klas.
Wygeneruj kod CSS (opcja Get CSS for:) i wklej go do własnego arkusza
CSS. Za pomocą metody grupowania zaproponuj skrócenie kodu CSS.
Dodaj w pierwszym wierszu do arkusza CSS:
Zapisz projekt i sprawdź zmiany w przeglądarce.
Zmień dowolnie właściwość font-size dla selektora body. Jakie zmiany
zaszły? Jaka jest relacja między właściwością font-size dla selektora
body wyrażoną w jednostkach px (piksele), a właściwością font-size dla
klas wyrażoną w jednostkach względnych em?
15
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Dziedziczenie
W zrozumieniu działania CSS kluczowe znaczenie ma struktura
XHTML/HTML. Zmodyfikuj/utwórz kod CSS jak niżej:
Zmodyfikuj/utwórz kod XHTML jak niżej:
Zauważ, że poza blokiem dokumentu 'container' został umieszczony inny
element blokowy – akapit (wiadomości na temat elementów blokowych i
liniowych znajdziesz w kursie XHTML, str. 22, str. 28). Z kolei akapit
zawiera element liniowy – odsyłacz (wiadomości na temat odsyłaczy
znajdziesz w kursie XHTML, str. 30). Ponieważ dodany akapit jest
'wydzielony' (poza blokiem 'container') nie dotyczą go reguły formatowania
zawarte w arkuszu CSS.
Przenieś akapit, tak aby znalazł się wewnątrz bloku dokumentu 'container'.
Zapisz i sprawdź zmiany, sprawdź poprawność kodu przy pomocy
walidatora.
16
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
O ile cała operacja zakończyła się powodzeniem, rezultat zmian powinien
być podobny do poniższego:
Styl pozostał ten sam, ale wygląd akapitu uległ zmianie, ponieważ zmienił
się kod XHTML - akapit znalazł się wewnątrz bloku dokumentu 'container' i
odziedziczył pewne właściwości (np. margines). Aby zrozumieć dlaczego
doszło do tych zmian warto przeanalizować kod XHTML i relacje jakie
występują pomiędzy poszczególnymi elementami.
Element html (ang. root element) jest 'rodzicem' (ang. parent) dla dwójki
'dzieci' (ang. child): elementu head i elementu body.
Element head jest 'rodzicem' dla trójki 'dzieci' – elementów: meta, title,
link. Innymi słowy elementy meta, title, link są dziećmi elementu
head.
Jednak elementy meta, title, link nie są dziećmi elementu html, ale
są potomkami (ang. descendant) elementu html! Z kolei element html
jest przodkiem (ang. ancestor) dla elementów meta, title, link.
Jeżeli więc jeden z elementów jest nadrzędny, a drugi podrzędny i oba
elementy sąsiadują bezpośrednio ze sobą, to relacje między nimi można
określić jako rodzic-dziecko. Jeżeli jeden z elementów jest nadrzędny, a
drugi podrzędny, ale elementy nie sąsiadują bezpośrednio ze sobą, to
relacje między nimi można określić jako przodek-potomek.
17
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Ostatnią możliwością jest przypadek, gdy elementy nie są od siebie
zależne (nadrzędno-podrzędne), ale są na tym samym poziomie
('partnersko'?). Przykładem może być relacja między elementami li
wewnątrz wykazu nieuporządkowanego:
Te elementy są dla siebie 'rodzeństwem' (ang. sibling).
Zadanie 3
W oparciu o źródło na str. 16 ustal relacje między:
– blokiem dokumentu 'container' i elementem body;
– blokiem dokumentu 'container' i elementem ul;
– blokiem dokumentu 'container' i elementami li;
– elementami akapitów o klasach first i second i wykazem
nieuporządkowanym.
Zachowaj odpowiedzi w pliku tekstowym o dowolnej nazwie.
Znając zasadę dziedziczenia i strukturę kodu łatwo zrozumieć wygląd
akapitu, który został przeniesiony do bloku dokumentu 'container'.
Zadanie 4
Przenieś ten akapit tak, aby był rodzeństwem dla bloku dokumentu
'container'. Zapisz i sprawdź zmiany, sprawdź poprawność kodu przy
pomocy walidatora.
Dziedziczenie – specyficzność.
Znajomość zasady dziedziczenia pozwala na precyzyjne wskazywanie
elementów poprzez odpowiednie konstruowanie selektorów CSS.
Poniższy przykład oparty jest na kodzie XHTML otrzymanym w Zadaniu 4.
Zmodyfikuj/utwórz arkusz CSS jak poniżej
Zauważ, że ostatni wiersz został zakomentowany przy pomocy wyrażeń /*
oraz */. Komentarz powoduje zignorowanie objętego nim kodu.
18
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Dodaj na dole arkusza CSS poniższą frazę:
Zapisz i sprawdź zmiany, sprawdź poprawność kodu XHTML i CSS przy
pomocy walidatora.
Powyższa deklaracja jest na tyle ogólna, że dotyczy każdego akapitu. W
jaki sposób określić tylko akapity, które są zawarte w elemencie o
identyfikatorze 'container'?
Zmodyfikuj arkusz CSS jak poniżej:
Zapisz i sprawdź zmiany, sprawdź poprawność kodu XHTML i CSS przy
pomocy walidatora.
Zadanie 5
Na podstawie reguły specyficzności zbuduj w CSS selektory dla odsyłaczy
w taki sposób, aby odsyłacze w menu (o mnie, o mnie znów itd.) różniły się
wyglądem od odsyłacza w akapicie. Zapisz i sprawdź zmiany, sprawdź
poprawność kodu XHTML i CSS przy pomocy walidatora. Zachowaj
projekt.
Podsumowując zasadę specyficzności warto zwrócić uwagę na pewną
subtelność, która może powodować błędy, szczególnie przy stawianiu
pierwszych kroków z CSS.
W arkuszu CSS na początku frazy w piątym wierszu:
#container p {font-family: Arial; ...}
dodaj wyrażenie div jak poniżej:
div#container p {font-family: Arial; ...}
Zapisz i sprawdź zmiany.
19
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Dlaczego nic się nie zmieniło? Ponieważ składnia:
div#container p {font-family: Arial; ...}
oznacza:
„dla akapitu (selektor p), który zawarty jest w bloku dokumentu (selektor
znacznika div) o identyfikatorze 'container' (selektor #container)
przypisz następujące właściwości”
Innymi słowy w XHTML spodziewamy się następującej relacji elementów:
<div id=”container”> rodzic dla p <p>cokolwiek</p> dziecko div</div>
Wstaw teraz spację jak poniżej:
div #container p {font-family: Arial; ...}
Zapisz i sprawdź zmiany. Rezultat w przeglądarce wskazuje, że
skonstruowany selektor CSS nie odnosi się do żadnego z elementów w
kodzie XHTML. Dlaczego? Ponieważ wprowadzenie spacji zupełnie
zmienia sens (to właśnie ta subtelność!).
Tym razem składnię:
div #container p {font-family: Arial; ...}
należy przetłumaczyć:
„dla akapitu (selektor p), zawartego w dowolnym elemencie o
identyfikatorze 'container' (selektor #container), który to element zawarty
jest w bloku dokumentu (selektor div ) przypisz następujące właściwości”
Tym razem w XHTML spodziewamy się zupełnie innej relacji elementów:
<div> rodzic dla element, przodek dla p <element id=”container”> dziecko div, rodzic dla p <p>cokolwiek</p> dziecko element, potomek div </element></div>
Zadanie 6
Pozostaw w arkuszu CSS składnię:
div #container p {font-family: Arial; ...}
Zmodyfikuj kod XHTML tak aby selektor zadziałał. Zapisz i sprawdź
zmiany, sprawdź poprawność kodu XHTML i CSS przy pomocy walidatora.
Zachowaj projekt.
20
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Konflikty
Podczas tworzenia arkusza CSS często dochodzi do powstawania
konfliktów, czyli deklaracji które są ze sobą sprzeczne.
Utwórz/zmodyfikuj kod XHTML aby wyglądał jak poniżej:
Utwórz/zmodyfikuj kod CSS aby wyglądał jak poniżej:
Czas wywołać konflikt! Zmodyfikuj arkusz CSS aby wyglądał jako poniżej:
Zauważ, że wiersz 3 i 4 zawiera selektor określający właściwości tego
samego elementu – p. Jednak deklaracje te są różne. Powstaje więc
pytanie, który z selektorów p jest 'aktualny'. Sprawdź to.
21
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
W przypadku konfliktu ten selektor 'wygrywa', który jest niżej, 'bliżej' źródła
dokumentu XHTML/HTML. Jest to konsekwencja 'kaskadowości' arkuszy
stylów. Aby się o tym przekonać możesz zamienić selektory miejscami:
Oczywiście przedstawiony konflikt jest jawny i do tego banalny. Jednak
podczas projektowania złożonego arkusza CSS konflikty mogą być
znacznie bardziej skomplikowane konflikty, a ten kto potrafi rozwiązywać
konflikty panuje nad CSS.
Istnieje kilka sposobów na rozwiązywanie konfliktów. Pierwszym jest
skorzystanie z zasady 'kaskadowości' i wprowadzenie stylu, który jest
'jeszcze' bliżej źródła bezpośrednio w kod XHTML/HTML. Zmodyfikuj
źródło jak poniżej:
Zapisz i sprawdź zmiany.
Zauważ, że pomimo arkusza CSS (w postaci jak na górze tej strony)
wprowadzony w kod XHTML/HTML styl 'zwyciężył'. Taki styl nosi nazwę
'inline style', a jego stosowanie jest powszechnie odradzane ponieważ
złamana jest podstawowa reguła separacji treści i formy. Dlatego też
zastosowany w tym przykładzie 'inline style' został użyty jedynie do celów
dydaktycznych.
Usuń 'inline style' ze źródła.
Innym sposobem na rozwiązywanie konfliktów jest reguła specyficzności,
tzn. precyzowanie selektorów. Zmodyfikuj arkusz CSS jak poniżej:
Zastosowaliśmy precyzyjne selektory i zgrupowaliśmy (str. 15 i 16). W ten
sposób każdy akapit, któremu przypisana jest klasa 'first' i 'second' będzie
formatowany w określony sposób.
Przytoczony przykład może Cie jednak nie przekonać ponieważ
formatowanie może nie wynikać ze specyficzności ale z
kolejności/'kaskadowości' stylów (patrz lewa kolumna). W takim wypadku
zamieńmy kolejność:
Zapisz i sprawdź zmiany.
22
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Specyficzność selektorów CSS można wyrazić za pomocą 4 liczb. Dla
przykładu deklarację:
można wyrazić jako 0,0,0,1
Ostatnia pozycja (w tym wypadku 1) określa liczbę elementów do jakich się
odnosimy.
Zmodyfikuj arkusz CSS jak poniżej:
Efekt tej zmiany jest przewidywalny – wszystkie akapity będą pisane
domyślną dla systemu operacyjnego czcionką szeryfową o rozmiarze 2
em. Jednak gdy ten kod zmodyfikujemy ja poniżej:
efekt będzie inny. Dlaczego selektory w wierszu 3 są ważniejsze, bardziej
specyficzne? Dlatego, że ich opis za pomocą liczb wygląda następująco:
0,0,0,2
Wartość 2 wskazuje, że tym razem określiliśmy 2 elementy. Wartość
0,0,0,2 dla wiersza 3 jest 'większa' od wartości 0,0,0,1 dla wiersza 4 i
dlatego też 'wygrywa' konflikt.
Co oznaczają pozostałe pozycje opisujące specyficzność?
Rozpatrzmy jeszcze jedno rozwiązanie przy pomocy zasady
specyficzności:
Dla selektora w wierszu 3 specyficzność można opisać liczbami: 0,0,0,2
Dla selektora w wierszu 4 specyficzność można opisać liczbami: 0,0,1,1
(mamy tu przypadek 1 klasy -'first' i jednego elementu – p). Liczba 0,0,1,1
jest 'większa' od 0,0,0,2, dlatego też akapit z klasą 'first' będzie miał inne
formatowanie niż pozostałe akapity zawarte w elemencie body.
23
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Zadanie 7
W oparciu o źródło XHTML (podane na stronie 21) oraz arkusz CSS:
a) dla elementu p stwórz 2 selektory, których specyficzność można opisać
liczbami: 0,0,0,3 i 0,0,1,2.
b) dla elementu p, stwórz 2 selektory, których specyficzność można opisać
liczbami: 0,1,1,1 oraz 0,1,1,3; dla obu selektorów powołaj się na tę
samą klasę
Konflikty – diagnoza
Zmodyfikuj kod XHTML (str. 31) tak aby w części head zagnieździć styl:
Zmodyfikuj zewnętrzny arkusz CSS (według powyższe źródła ten arkusz
zawarty jest w pliku styl.css) jak poniżej:
Zapisz i sprawdź zmiany.
Według stylu zawartego w XHTML wszystkie akapity powinny być pisane
czcionką pogrubioną Arial o rozmiarze 1em, podczas gdy według kodu
CSS wszystkie akapity zawarte w części body powinny być pisane
domyślą, pogrubioną czcionką szeryfową o rozmiarze 2em. Oczywiście
'wygrywa' selektor zawarty w zewnętrznym arkuszu (body p) ponieważ
jego specyficzność wynosi 0,0,0,2, podczas gdy selektor (p) zawarty w
stylu w kodzie XHTML ma specyficzność 0,0,0,1. Załóżmy jednak, że nie
pamiętamy o zewnętrznym arkuszu stylów. Wszelkie zmiany
wprowadzone w zawartym w kodzie XHTML stylu nie będą przynosiły
24
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
rezultatu, co nierzadko jest frustrujące. Aby zbadać czy omawiana sytuacja
nie wynika z konfliktu można użyć poniższego wyrażenia:
Zapisz i sprawdź rezultat.
Fraza !important okazała się ważniejsza, nadała pożądany atrybut, czyli
rozmiar 1em. Fraza !important nie służy do 'wymuszania'
specyficzności w przypadku konfliktu, a jedynie do jego diagnozy. Nie jest
więc dobrą praktyką pozostawienie jej. Konflikt powinien zostać rozwiązany
poprzez wprowadzenie specyficzności – zaproponuj rozwiązanie.
Warto zwrócić uwagę, że fraza !important może również służyć do
wykrycia zwykłego błędu literowego, np. podczas pisania definicji zamiast
otworzenia klamry został wprowadzony z lewej strony zwykły nawias:
Często taki błąd trudno zauważyć. Jeżeli więc zastosujemy frazę
!important
i taki zabieg nie przyniesie pożądanego efektu warto przyjrzeć się
dokładnie samej składni, ewentualnie dokonać jej walidacji.
25
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Czcionki
Doskonałym narzędziem do testowania i wyboru odpowiednich czcionek
jest omawiany wcześniej serwis http://www.typetester.org/, za pomocą
którego można wybrać:
czcionkę,
jej rozmiar, odstępy między
wierszami, odstępy między
literami,
wyrównanie, odstępy między
słowami, rodzaj dekoracji,
kolor oraz kolor tła
Zadeklarowane parametry można następnie pobrać w postaci kodu css, w
prawej, górnej sekcji:
Oto przykładowy wynik:
Jednak wygenerowany przez
http://www.typetester.org/ kod nie
uwzględnia wszystkich wybranych
parametrów jakie przewiduje css.
Przede wszystkim właściwość font-family może, a nawet powinna mieć
więcej pozycji, np.:
font-family: Verdana, Arial, Helvetica, sans;
Taką deklarację można wytłumaczyć następująco:
użyj pierwszej czcionki (Verdana), a jeżeli nie ma jej zainstalowanej w
systemie operacyjnym użyj kolejnej (Arial, Helvetica). W przypadku
gdy żadna z powyższych nie jest obecna w systemie, użyj domyślnej dla
tego systemu bezszeryfowej czcionki (sans).
26
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Skoro typografia css operuje na zainstalowanych w systemie czcionkach
pojawia się pytanie: jaki zestaw czcionek jest wspólny dla najbardziej
popularnych systemów operacyjnych? Taki zestaw nosi nazwę 'safe list' i
jest między innymi wyszczególniony w serwisie http://www.typetester.org/
przy wyborze czcionki:
Choć prezentowany zestaw zawiera zaledwie 9 czcionek, stosując
odpowiednie parametry można osiągnąć całkiem ciekawe spektrum.
Zadanie 8
Przy pomocy serwisów http://www.typetester.org/ oraz
http://www.w3schools.com/css/ (sekcje font i text) wybierz jedną z pozycji z
'safe list', stwórz klasy w których pozostanie ten sam rozmiar czcionki, ale
dodaj/zmień inne właściwości tak aby osiągnąć podobny rezultat jak
poniżej:
Pamiętaj aby
w testowym
tekście zostały
użyte tylko
małe litery.
Różną
pisownie
osiągniesz
przy pomocy
odpowiednich
własności css.
Zachowaj projekt
27
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Czcionki – zastępowanie tekstu obrazem.
Mimo, że w powyższym przykładzie został zastosowany zaledwie jeden
krój udało się osiągnąć dość zróżnicowany zestaw czcionek. Często
jednak manipulacja parametrami w css nie wystarcza. Teoretycznie css
umożliwia załączenie czcionki której nie ma w systemie. Informacje na ten
temat można znaleźć np. po słowach kluczowych 'css font embedding'. W
praktyce jednak autorzy bardzo często zastrzegają możliwość
wykorzystania czcionek w serwisach internetowych. Rozwiązaniem jest
użycie darmowej czcionki, zakupienie czcionki z odpowiednią licencją lub
zaprojektowanie własnej czcionki.
Innym rozwiązaniem dyskutowanego problemu jest zastąpienie tekstu
obrazem. Rozwiązanie to jest dość powszechne i można je spotkać np. w
wielu demonstracyjnych kompozycjach serwisu
http://www.csszengarden.com/.
Dodaj do kodu XHTML poniższą frazę:
W tym przykładzie posłużyłem się serwisem
(http://www.searchfreefonts.com/free/coca-cola-ii.htm). W polu tekstowym
wpisałem frazę 'To jest czcionka Coca Cola ii!' i wykonałem zrzut ekranu
(do pobrania jako plik coca.png). Zapisz ten plik w katalogu images, który
to katalog będzie w tej samej lokalizacji co plik index.html
Sprecyzujmy nowa klasę coca:
Zadeklarowane własności width i height wynikają z rozmiaru pliku, który
w tym przykładzie został wstawiony w tło (background), deklaracja no-
repeat wskazuje aby obraz tła został zastosowany tylko jeden raz. A oto i
rezultat:
28
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Teraz wystarczy tylko usunąć zbędny tekst:
Dokonaliśmy tego poprzez własność wcięcia, której wartość jest tak duża,
że tekst jest 'wcięty' poza obszar monitora. Wadą tego rozwiązania jest
stosunkowo mała elastyczność (konieczność edycji plików grafiki przy
każdej zmianie serwisu) natomiast zaletą tego rozwiązania jest wciąż
widoczny tekst (a więc i kod który zachowuje znaczenie), o czym można
się przekonać wyłączając styl css (np. dla Firefox: Widok/Styl
strony/Ignoruj style).
Zadanie 9
W oparciu o przedstawioną metodę podstaw plikami graficznymi z dowolną
czcionką (zawierającymi adekwatny tekst) pozycje w menu:
Zachowaj projekt
Cenne informacje dotyczące zagadnień typografii internetowej można
znaleźć między innymi pod adresem: http://webtypography.net/.
Czcionki – stosowanie koloru
Na ekranie monitorów barwy generowane są według modelu RGB
(http://pl.wikipedia.org/wiki/RGB). Model ten zakłada zastosowanie trzech
składowych R (czerwonego, ang. red), G (zielonego, ang. green), B
(niebieskiego, ang. blue). Definiowany w css kolor dla czcionki może mieć
np. postać:
.dowolna_klasa {
color: #e424d9;
}
Ten zapis to tzw. zapis szesnastkowy.
29
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Znany wszystkim kod binarny zawiera tylko dwie wartości, np. 0/1 lub
prawda/fałsz lub tak/nie. Z kolei stosowany powszechnie kod dziesiętny
zawiera dziesięć elementów (0-9). Kod szesnastkowy zawiera dziesięć cyfr
(od 0 do 9) oraz sześć liter: a, b, c, d, e, f (o jest najniższą wartością,
podczas gdy f najwyższą).
Zapis szesnastkowy opisuje każdą ze składowych RGB na podstawie
dwóch miejsc:
color: #e424d9;
Gdy w kodzie szesnastkowym barwy występują pary takich samych
wartości to całość można skrócić z sześciu do trzech pozycji jak poniżej:
color: #ff00ff;
color: #f0f;
W praktyce mało kto pamięta notację szesnastkową, ale można ją spotkać
w większości programów graficznych podczas edycji barwy.
Innymi sposobami zapisu wartości RGB w css są:
color: rgb(0,255,0);
color: rgb(0%,100%,0%);
Przestawiona składnia dotyczy definicji w css koloru w ogóle (nie tylko dla
czcionek). Budowanie palet barwnych i harmonizowanie barw, choć
wykracza poza ramy tego kursu, to kluczowe umiejętności dla web design.
Zainteresowany czytelnik może jednak odwiedzić dość przydatne serwisy:
– http://colorschemedesigner.com/ - poświęcony paletom barwnym
– http://www.snook.ca/technical/colour_contrast/colour.html –
poświęcony ocenie czytelności poprzez analizę kontrastu między
tłem i figurą (tekstem)
– http://colorfilter.wickline.org/ - generuje obraz typowy dla różnych
jednostek chorobowych oczu.
Zadanie 10
Posługując się dowolnym programem graficznym zapisz za pomocą dwóch
innych formatów kolor tła elementu #container ze strony (wartości te
znajdziesz np. na str. 24).
Zachowaj projekt
30
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Czcionki – zastosowanie pseudoklas
Pseudoklasy to narzędzie pozwalające wyróżnić stan elementu.
Przykładem może być odsyłacz, który przyjmuje następujące stany:
– link (stan spoczynku);
– visited (odwiedzony);
– hover (stan, w którym kursor myszy znajduje się nad odsyłaczem);
– active lub focus (stan, w którym odsyłacz został zatwierdzony
przyciskiem myszy i przycisk ten pozostaje wciąż wciśnięty).
Podczas deklaracji pseudoklas kolejność w/w stanów jest kluczowa. Aby
łatwiej zapamiętać te kolejność niektórzy autorzy wskazują na
podobieństwo do słynnego tatuażu na kostkach pięści – love/hate czyli:
L link
o
V visited
e
H hover
A active (focus)
t
e
Ten przykład budowy pseudoklas oparty jest o kod XHTML (str 21) oraz
poniższy kod css:
Zadanie 11
Wprowadź zmiany i sprawdź rezultat. Następnie zmodyfikuj parametry dla
pseudoklas tak aby osiągnąć własny efekt (w razie wątpliwości skorzystaj z
serwisów: http://www.typetester.org/ oraz http://www.w3schools.com/css/).
Zachowaj projekt
31
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Podstawy layout – 'Box model'
'Box model' to termin, który określa sposób generowania elementów html
oraz sposób stylizacji ich za pomocą css
(http://www.w3schools.com/css/css_boxmodel.asp). Według tego modelu
element generowany jest następująco:
treść – dowolny tekst jaki zawiera element;
odstęp – wewnętrzny, przezroczysty obszar separujący treść od ramki,
właściwością css określającą odstęp jest padding;
ramka – właściwość wyrażana w css za pomocą border;
margines – zewnętrzny, przezroczysty obszar między ramką i innym
elementem, w css wyrażany jest jako właściwość margin;
Uprość istniejące źródło lub stwórz nowy dokument XHTML tak aby część
body zawierała jeden element bloku dokumentu, który z kolei zawiera
dowolną treść. W css określ właściwości tego elementu blokowego tak
aby:
– był środkowany względem strony;
– posiadał tło w dowolnym kolorze;
– jego szerokość i wysokość wynosiła 200 px (jeżeli nie pamiętasz
tych właściwości zobacz str. 16).
32
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Oto przykładowy rezultat
dla przeglądarki Chrome
oraz dla przeglądarki Firefox;
zauważ, że włączenie
zaznaczania elementów
blokowych we wtyczce Web
Developer (Zaznacz/Elementy
blokowe, str.11) wskazuje dwa
elementy: czerwony – akapit
oraz niebieski – element bloku
dokumentu
Czas na zastosowanie właściwości. W arkuszu css umieść poniższy kod
tak aby odnosił się do bloku dokumentu:
padding: 10px;
Oto i efekt:
Udało się uzyskać odstęp. Po prawej i
lewej stronie odstęp wydaje się równy
i wynosi 10 px (kto nie jest
usatysfakcjonowany tą argumentacją,
może zmierzyć tę przestrzeń za
pomocą linijki: Zakładka
Różne/Wyświetl linijkę). Nie ma jednak
wątpliwości, że odstęp między górną
krawędzią bloku dokumentu i tekstem jest zdecydowanie większy. Tym
jednak zajmiemy się za chwilę.
Czas na ramkę. Posłużę się prostą składnią:
border-style: dotted;
border-width: 2px;
border-color: #999999;
33
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
A to efekt zastosowanej składni:
Pozostał jeszcze margines, np.:
margin:20px;
Jeżeli wyśrodkowanie bloku
dokumentu zostało osiągnięte
poprzez właściwość margin:
auto; to teraz
doprowadziliśmy do konfliktu –
deklarując inną wartość dla tej
samej własności. Jeżeli ta
ostatnia własność została
dodana na dole to właśnie ona
'wygrywa' konflikt (str. 21).
Podobnie jak w przypadku deklaracji właściwości padding, także i tu
odległości od lewej krawędzi i górnej krawędzi są różne (zainteresowanych
odsyłam do narzędzia linijka). Skąd te różnice?
W obu przypadkach za te różnice odpowiada domyślny arkusz css
przeglądarki. Aby tego dowieść wprowadź lub zmodyfikuj we własnym
arkuszu css selektor body który będzie miał przypisaną właściwość:
margin: 0;
Zapisz i sprawdź zmiany.
Idąc tym tokiem rozumowania można również zapytać, czy elementowi p
nie jest przypisany selektor wraz z określoną domyślną wartością
marginesu. Rozwiąż ten problem, tak aby otrzymać poniższy rezultat:
34
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Podczas formatowania bloku dokumentu, określiliśmy m.in. że jego
szerokość będzie wynosiła 200px oraz przypisaliśmy mu poniższe
właściwości:
padding: 10px;
border-style: dotted;
border-width: 2px;
border-color: #999999;
margin: 0;
Jednak pomiar tego bloku (za pomocą narzędzia linijka) wskazuje, że jego
szerokość jest większa niż 200 px. Warto więc zapamiętać, że szerokość
200px odnosi się do treści elementu.
Aby więc prawidłowo wymiarować
elementy należy uwzględnić nie tylko
zadeklarowany rozmiar ich treści, ale
należy również uwzględnić wszystkie
ich właściwości zadeklarowane w
css.
W tym przypadku dokładna szerokość bloku dokumentu wynosi: 200px
(szerokość treści) + 10px (odstęp z lewej) +10 px (odstęp z prawej).
Zadanie 12
Na podstawie serwisu http://www.w3schools.com/css/default.asp
zadeklaruj właściwości css tak aby otrzymać poniższy rezultat.
35
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Podstawy layout – 'opływanie'
W poniższym przykładzie przeanalizujemy 'zachowanie' grafiki i tekstu.
Posłużyłem się fragmentem definicji egocentryzmu ze stron Wikipedii
(http://pl.wikipedia.org/wiki/Egocentryzm) oraz ikoną
(http://iphone.iusethis.com/icon/iphone/ego.png). Zmodyfikuj źródło
poprzedniego dokumentu aby otrzymać podobny efekt.
Dodaj do akapitu dowolną grafikę (w przypadku gdy nie pamiętasz składni
zajrzyj na instrukcji xhtml, str. 39).
Jeżeli obraz dodam na
początku treści całość wygląda
jeszcze 'w miarę przyzwoicie'.
Gdy jednak obraz znajduje się
w środku treści wyraźnie widać
brak odpowiedniego
'opływania' tekstu.
Aby zadeklarować opływanie posłużymy się właściwością float, która
może przyjąć dwie wartości: left lub right. Stwórz selektor dla elementu
obrazu i przypisz mu właściwość foat.
Dla poprawienia czytelności
zwiększę odstępy między
wierszami oraz margines dla
obrazu.
Dla deklaracji marginesu zastosowałem poniższą składnię:
margin: 10px 10px 10px 10px;
Tak zapisane wartości należy odczytywać zgodnie z ruchem wskazówek
zegara zaczynając od góry, czyli góra, prawo, dół, lewo.
36
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Zmodyfikuj arkusz css tak aby wyrównać lewą krawędź obrazu i tekstu.
Podstawy layout – 'opływanie' bloków dokumentu
Zastosowanie elementów bloku dokumentu (znacznik div) pozwala na
budowanie layout dokumentów HTML/XHTML.
Przed zastosowanym elementem bloku dokumentu (container) dodaj
menu (w postaci wykazu nieuporządkowanego, str. 29), które również
będzie elementem bloku dokumentu (np. o identyfikatorze menu). Usuń
właściwość margin:auto dla elementu container.
Aby dostrzec granice bloku
menu możesz w zakładce Web
Developer wybrać:
Zaznacz/Elementy blokowe
Domyślnie bloki wstępują jeden pod drugim, co wskazuje na
'naturalny'/liniowy przebieg dokumentu. Ten przebieg jest tym bardziej
widoczny gdy wyłączymy css (np. Widok/Styl strony/Ignoruj).
37
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Aby zmodyfikować domyślne reguły opływania również dla elementów
blokowych użyjemy właściwości float. Zdefiniuj szerokość dla menu (np.
200px) i container (np. 400px). Dla menu przypisz właściwości float:
left, a dla container float:right;.
Zauważ, że container nie tylko pływa menu po prawej stronie ale
pozycjonuje się 'maksymalnie' do prawej. Jednym ze sposobów na
zadeklarowanie precyzyjniej pozycji container jest zamknięcie obu
elementów blokowych w kolejnym bloku.
Zmień nazwę container na adekwatną nazwę do obecnej funkcji tego
bloku (np. content) zarówno w kodzie html jak i css. Identyfikator
container z kolej wykorzystamy dla budowy bloku, który będzie
'pojemnikiem' dla menu i content. Kod realizujący ten zamiar będzie miał
postać:
Zauważ, że przez zwinięcie
(klawisz -) nie są pokazane
zamknięcia niektórych
znaczników div.
Zbuduj selektor dla
container i zadeklaruj
jego szerokość (np.
700px).
38
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Interesująca w omawianej właściwości float jest możliwość zmiany pozycji
(względem siebie) elementów bez zmiany kodu html. Zmodyfikuj kod css
aby doprowadzić do poniższego rezultatu:
Przypisz obu elementom blokowym właściwość float:left
Zauważ na różnice w
pozycji elementów w
stosunku do przykładu
z poprzedniej strony.
Tego typu rozwiązanie
jest szczególnie
przydatne gdy mam
do czynienia z
większą liczbą
elementów
blokowych, które
chcemy umieścić obok
siebie.
39
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Warto podkreślić, że nadanie właściwości float jednemu elementowi
powoduje, że inne elementy go opływają (nawet jeśli nie mają
zadeklarowanej właściwości float). Aby zweryfikować to twierdzenie dodaj
za container dowolny element bloku dokumentu, w css przypisz mu tylko
właściwość szerokości (która wraz z wymiarami menu i content nie
powinna przekraczać szerokości container).
Umieść nową warstwę
obok warstwy
content.
Aby umieścić nową warstwę pod istniejącymi należy przerwać regułę
opływania. Do tego celu w css służy właściwość clear:both;. Dość
częstym rozwiązaniem jest stworzenie w arkuszu css klasy (np. o nazwie
clear), której jest przypisana powyższa właściwość, a następnie powołanie
się na tą klasę w kodzie html:
<br class=”clear” />
Zadanie 13
W oparciu o wiadomości z sekcji Podstawy layout – 'Box model', Podstawy
layout – 'Opływanie' zrealizuj poniższy układ. Zachowaj projekt
40
krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
Tło
Odwiedź stronę serwisu W3
http://www.w3schools.com/css/css_background.asp i poeksperymentuj z
tłem. Skorzystaj z poprzedniego layout oraz z pliku flower.png tak aby
osiągnąć poniższy rezultat:
41