krzysztof moszczyński ...pk.uni.wroc.pl/wp-content/uploads/2015/04/css.pdf · język, który...

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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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>




<style type="text/css">

p {color: #999999; font-size:2em;}

</style>

</head>

5

http://ci.swps.pl/

http://www.w3.org/Style/CSS/

http://jigsaw.w3.org/css-validator/

http://www.w3schools.com/css/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/

http://www.w3schools.com/tags/



http://ci.swps.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>




</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

http://ci.swps.pl/

http://www.w3schools.com/tags/ref_standardattributes.asp

http://webmaster.helion.pl/index.php/selektory/6/145-wprowadzenie-do-selektorow

http://webmaster.helion.pl/index.php/selektory/6/145-wprowadzenie-do-selektorow



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/

http://www.w3schools.com/tags/ref_standardattributes.asp



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/

http://www.typetester.org/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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ę:


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ę:


Zmodyfikuj kod XHTML tak aby selektor zadziałał. Zapisz i sprawdź

zmiany, sprawdź poprawność kodu XHTML i CSS przy pomocy walidatora.

Zachowaj projekt.

20

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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:


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ść:


22

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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:


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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/





http://ci.swps.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

http://ci.swps.pl/






http://ci.swps.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

http://ci.swps.pl/

http://www.searchfreefonts.com/free/coca-cola-ii.htm

http://www.csszengarden.com/



http://ci.swps.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

http://ci.swps.pl/

http://pl.wikipedia.org/wiki/RGB

http://webtypography.net/



http://ci.swps.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

http://ci.swps.pl/

http://colorfilter.wickline.org/

http://www.snook.ca/technical/colour_contrast/colour.html

http://colorschemedesigner.com/



http://ci.swps.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

http://ci.swps.pl/





http://ci.swps.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

http://ci.swps.pl/

http://www.w3schools.com/css/css_boxmodel.asp



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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;


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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/

http://www.w3schools.com/css/default.asp



http://ci.swps.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

http://ci.swps.pl/

http://iphone.iusethis.com/icon/iphone/ego.png

http://pl.wikipedia.org/wiki/Egocentryzm



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/



http://ci.swps.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

http://ci.swps.pl/

http://www.w3schools.com/css/css_background.asp


krzysztof moszczyński ...pk.uni.wroc.pl/wp-content/uploads/2015/04/css.pdf · język, który...

Documents

Transcript of krzysztof moszczyński ...pk.uni.wroc.pl/wp-content/uploads/2015/04/css.pdf · język, który...