CSS (ang. Cascading Style Sheets) czyli kaskadowe arkusze stylów

Transkrypt

krzysztof moszczyński
http://ci.swps.pl/
http://pk.uni.wroc.pl/
CSS (ang. Cascading Style Sheets) czyli kaskadowe arkusze stylów to
Utwórz dokument XHTML 1.0, np. w oparciu o poniższe źródło:
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
<?xml version="1.0" encoding="utf-8"?>
formy. Takie rozwiązanie ma wiele zalet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Stosowanie CSS i HTML/XHTML według wytycznych konsorcjum W3
poprawia 'uniwersalności' kodu HTML/XHTML. Kod HTML/XHTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"
pozbawiony informacji o formatowaniu jest mniejszy, spójny, posiada
lang="pl">
<head>
znaczenie (tzw. kod semantyczny), łatwiej go interpretować. Te cechy są o
<meta http-equiv="Content-type"
tyle istotne, iż coraz częściej do przeglądania stron internetowych służą
content="text/html;charset=UTF-8" />
różne platformy, choćby urządzenia przenośne, które dysponują własnymi
<title>tytuł</title>
przeglądarkami (ang. smartphone).
</head>
CSS umożliwia globalne i automatyczne formatowanie całych serwisów
<body>
internetowych, przez co zmiany wyglądu mogą być wprowadzane
<p>to jest dowolna treść akapitu a obok znajduje się
stosunkowo szybko i są mniej pracochłonne.
<a href="#">odsyłacz</a></p>
</body>
CSS jest rozwijany od połowy lat 90-tych i do dziś (tj. do 2010 roku)
</html>
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.
1
http://ci.swps.pl/
W Notepad++ zapisz ten dokument jako html tak aby otrzymać
Gdy odsyłacz zostanie zatwierdzony/'kliknięty', a lokalizacja do której
rozpoznawanie i interpretowanie składni języka:
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ść
Zapisz zmiany i otwórz projekt w przeglądarce internetowej:
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).
Odsyłacz jest wyświetlony przy pomocy niebieskiej czcionki.
2
http://ci.swps.pl/
Jak 'świadomie' tworzyć CSS, tak aby wpływać na prezentację/wygląd
A oto i efekt zmian:
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):
Tekst w akapicie (znacznik HTML <p>, czyli ang. paragraph) jest
<style type="text/css">
wyświetlany czcionką szarą. Dlaczego?
p {color: #999999;}
</style>
W składni CSS odnieśliśmy się do znacznika <p>
Źródło dokumentu powinno wyglądać np. jak niżej:
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/
Cecha powinna zawierać po nazwie dwukropek i wartość, np. powinniśmy
Aby sprawdzić przypiszmy jeszcze jedną wartość selektorowi p, tak aby
sprecyzować kolor:
zwiększyć czcionkę:
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
A oto i rezultat:
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ść;}
Zauważ, iż powiększyła się nie tylko czcionka frazy, ale i odsyłacza.
lub
Dlaczego? Ponieważ w kodzie HTML odsyłacz jest zawarty wewnątrz
selektor {cecha1: wartość1; cecha2: wartość2;}
elementu p.
Czasami, aby zwiększyć przejrzystość kodu spotyka się formę:
selektor {
cecha1: wartość1;
Prze tę hierarchię i przez CSS odsyłacz dziedziczy cechy akapitu (jednak
cecha2: wartość2;
nie wszystkie).
}
4
http://ci.swps.pl/
Ta właściwość CSS nazywana jest dziedziczeniem. Można ja stosować
Aby w pełni wykorzystać możliwości CSS potrzebna jest znajomość m.in.
znacznie szerzej, np. pod pierwszym akapitem dodaj drugi akapit:
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">
Zatem reguła dziedziczenia dotyczy każdego akapitu. W ten prosty sposób
p {color: #999999; font-size:2em;}
(przy pomocy zaledwie kliku deklaracji) można sformatować wszystkie
</style>
akapity w serwisie internetowym.
</head>
5
http://ci.swps.pl/
W Notepad++ utwórz (File/New lub Ctrl+N) drugi dokument. Wprowadź
Nawet po wprowadzeniu zmian i zapisaniu arkusza CSS, modyfikacje nie
tylko tę frazę:
będą widoczne w przeglądarce internetowej.
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:
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:
Poprawnie wykonana operacja spowoduje powstanie dwóch plików:
<link rel="stylesheet" type="text/css" href="styl.css"
media="all" />
i dwóch zakładek:
Sprawdź czy ta fraza przyniosła pożądany rezultat.
6
http://ci.swps.pl/
Użyta fraza zawiera atrybuty: rel, type, href, media. Sprawdź na
Prawdopodobnie posiadasz podobną strukturę plików:
stronach konsorcjum W3 (http://www.w3schools.com/tags/) jakie te
Jest powiązanie między dokumentem
atrybuty pełnia funkcje i jakie mogą przyjmować wartości.
index.html i styl.css (jaka fraza za to
powiązanie odpowiada?).
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.:
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.
Zewnętrzne arkusze CSS - importowanie
Jak to zmienić. Wystarczy do pliku styl.css zaimportować pliki:
W przypadku dużych serwisów internetowych i skomplikowanego
czcionki.css i kolory.css. Do tego celu służy fraza:
stylizowania często style CSS 'rozbija się' na pojedyncze pliki, tak aby
@import url(dowlony_plik.css);
łatwo można było strukturalizować formatowanie i organizować pracę.
Styl lokalny
Stwórz w tej samej lokalizacji co poprzednie pliki arkusze CSS:
Styl ten określany jako 'inline style' stosowany bezpośrednio jest w źródle
czcionki.css i kolory.css. Następnie wytnij zawartość pliku styl.css i
XHTML:
wklej do pliku czcionki.css. W pliku kolory.css dodaj poniższą treść:
<p style=”color: #999999; font-size: 2em;”>treść</p>
body {background-color: #6d8fe3;}
Zapisz zmiany i w przeglądarce przeładuj dokument XHTML. Dlaczego nie
Jednak z uwagi na specyfikację Strict XHTML 1.0 (patrz kurs XHTML)
działa?
'inline style' nie znajduje zastosowania. Zastanów się dlaczego?
7
http://ci.swps.pl/
<head>
Selektory
Selektor atrybutów
W CSS występuje kilka typów selektorów
(http://webmaster.helion.pl/index.php/selektory/6/145-wprowadzenie-do-
</head>
selektorow).
<body>
Pierwszym typem (str.3) był selektor elementu p, a jego zastosowanie
formatowało każdy element p, tzn. każdy akapit. Zdecydowana większość
</body>
elementów może posiadać atrybuty. Zestaw wspólnych atrybutów (ang.
</html>
core atributes) podany jest na stronach konsorcjum W3
(http://www.w3schools.com/tags/ref_standardattributes.asp). Ten zestaw
Zapisz dokument jako index.html. Zostaw/utwórz arkusz styl.css,
wspólnych atrybutów można zastosować do formatowania w CSS. Do tego
pozostałe dokumenty css usuń. Przypisz plikowi index.html odwołanie do
właśnie służy selektor atrybutów, a w tym przykładzie jako atrybutu
zewnętrznego arkusza styl.css.
użyjemy tytułu (title) (uwaga: chodzi o atrybut title, który
Uzupełnij arkusz styl.css np. poniższą frazą:
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"?>
Zapisz zmiany i przeładuj projekt w przeglądarce. Sprawdź poprawność
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
utworzonego kodu za pomocą walidatora HTML(kurs XHTML, str. 6-7) i
CSS (str. 5).
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"
lang="pl">
8
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/
Czas na precyzyjniejszą definicję w CSS. Odwołajmy się do konkretnego
Selektor – identyfikator
elementu, który ma atrybut title:
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
Tym razem zostały wybrane tylko akapity.
narzędzie budowania layout współczesnych dokumentów internetowych.
Selektory są unikatowe, tzn. w jednym dokumencie mogą zostać użyte
Można również odwołać się do tytułu o określonej wartości (w przypadku
tylko raz.
wątpliwości zobacz kod xhtml ze strony 9):
W kodzie XHTML identyfikator jest definiowany jak niżej:
<div id="container">
dowolna treść
Zadanie 1
</div>
Stwórz selektor w arkuszu CSS dla wykazu nieuporządkowanego
Warto podkreślić, że podobnie jak miało to miejsce w przypadku wartości
powołując się na jego tytuł i wartość tego tytułu.
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/
Usuń w kodzie XHTML wcześniej zadeklarowane atrybuty title. Otocz
Aby dostrzec te zmiany zainstaluj w przeglądarce firefox dodatek Web
całą treść zawartą w części body elementem div (tzw. blok dokumentu) i
Developer. Wpisz tę nazwę
przypisz temu elementowi identyfikator:
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):
Zapisz zmiany i przeładuj projekt w przeglądarce.
Wybierz z tego paska
Nie wygląda, aby cokolwiek się zmieniło. Jak zatem działa blok dokumentu
Zaznacz/Elementy
– element div?
blokowe
11
http://ci.swps.pl/
Rezultat tej operacji może wyglądać jak niżej:
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
Zielonym kolorem został zaznaczony wykaz, czerwonym akapity, a blok
W przeciwieństwie do identyfikatorów,
dokumentu (w moim przypadku o identyfikatorze 'container') został
klasy można i należy używać wielokrotnie
zaznaczony kolorem niebieskim.
w jednym dokumencie. Praca z klasami
może odrobinę przypominać pracę ze
Skoro już 'zidentyfikowaliśmy' miejsce bloku dokumentu 'container' czas na
stylami w edytorach tekstu (np. panel w
jego formatowanie. Uzupełnij arkusz CSS jak np. niżej:
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
Zapisz zmiany i sprawdź.
elementy zadeklarowane wcześniej w tym
stylu ulegną zmianie.
12
http://ci.swps.pl/
W XHTML za deklarację klasy odpowiada atrybut class. Podobnie jak id,
Można jednak sprecyzować formatowanie, np.:
class należy do 'core atributes', a jego zastosowanie może wyglądać jak
p.normal {font-weight: bold;}
poniżej:
Sprawdź efekt.
<p class=”normal”>dowolna treść</p>
Tym razem odnosimy się do wszystkich akapitów, które posiadają klasę
.normal.
Z kolei w CSS odwołanie do klasy wygląda np. tak:
.normal {font-weight: bold;}
Zachowaj projekt jako 1.html i 1.css!
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.
13
http://ci.swps.pl/
Przy stosowaniu, klasy można ze sobą łączyć.
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
Zwróć uwagę, że wykaz nieuporządkowany ma przypisane dwie klasy:
poniższego:
normal i navi. Ponadto drugi akapit ma przypisaną klasę normal.
<p class="normal">to jest pierwszy akapit o mnie</p>
<p class="normal">a to drugi akapit, w którym
Zdefiniujmy z CSS obie klasy:
dla odmiany bezpośrednio odniosę się do siebie</p>
Zaproponuj rozwiązanie
Jaki jest efekt zmian?
14
http://ci.swps.pl/
Zauważ, że obie klasy mają te same właściwości. W takim przypadku
Grupowanie selektorów
możemy zgrupować klasy, oddzielając je od siebie przecinkiem:
Zmodyfikuj/stwórz nowy dokument XHTML, tak aby jego treść zawierała
podobne elementy:
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:
Przypisz w zewnętrznym arkuszu CSS właściwości dla tych klas:
Zapisz projekt i sprawdź zmiany w przeglądarce.
Zmień dowolnie właściwość font-size dla selektora body. Jakie zmiany
Zapisz projekt, sprawdź poprawność XHMTL i CSS, otwórz dokument w
zaszły? Jaka jest relacja między właściwością font-size dla selektora
przeglądarce.
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/
Zauważ, że poza blokiem dokumentu 'container' został umieszczony inny
Dziedziczenie
element blokowy – akapit (wiadomości na temat elementów blokowych i
W zrozumieniu działania CSS kluczowe znaczenie ma struktura
liniowych znajdziesz w kursie XHTML, str. 22, str. 28). Z kolei akapit
XHTML/HTML. Zmodyfikuj/utwórz kod CSS jak niżej:
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.
Zmodyfikuj/utwórz kod XHTML jak niżej:
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/
O ile cała operacja zakończyła się powodzeniem, rezultat zmian powinien
Element head jest 'rodzicem' dla trójki 'dzieci' – elementów: meta, title,
być podobny do poniższego:
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.
Styl pozostał ten sam, ale wygląd akapitu uległ zmianie, ponieważ zmienił
się kod XHTML - akapit znalazł się wewnątrz bloku dokumentu 'container' i
Jeżeli więc jeden z elementów jest nadrzędny, a drugi podrzędny i oba
odziedziczył pewne właściwości (np. margines). Aby zrozumieć dlaczego
elementy sąsiadują bezpośrednio ze sobą, to relacje między nimi można
doszło do tych zmian warto przeanalizować kod XHTML i relacje jakie
określić jako rodzic-dziecko. Jeżeli jeden z elementów jest nadrzędny, a
występują pomiędzy poszczególnymi elementami.
drugi podrzędny, ale elementy nie sąsiadują bezpośrednio ze sobą, to
relacje między nimi można określić jako przodek-potomek.
Element html (ang. root element) jest 'rodzicem' (ang. parent) dla dwójki
'dzieci' (ang. child): elementu head i elementu body.
17
http://ci.swps.pl/
Ostatnią możliwością jest przypadek, gdy elementy nie są od siebie
Znając zasadę dziedziczenia i strukturę kodu łatwo zrozumieć wygląd
zależne (nadrzędno-podrzędne), ale są na tym samym poziomie
akapitu, który został przeniesiony do bloku dokumentu 'container'.
('partnersko'?). Przykładem może być relacja między elementami li
Zadanie 4
wewnątrz wykazu nieuporządkowanego:
Przenieś ten akapit tak, aby był rodzeństwem dla bloku dokumentu
'container'. Zapisz i sprawdź zmiany, sprawdź poprawność kodu przy
pomocy walidatora.
Dziedziczenie – specyficzność.
Te elementy są dla siebie 'rodzeństwem' (ang. sibling).
Znajomość zasady dziedziczenia pozwala na precyzyjne wskazywanie
elementów poprzez odpowiednie konstruowanie selektorów CSS.
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
Poniższy przykład oparty jest na kodzie XHTML otrzymanym w Zadaniu 4.
Zmodyfikuj/utwórz arkusz CSS jak poniżej
nieuporządkowanym.
Zauważ, że ostatni wiersz został zakomentowany przy pomocy wyrażeń /*
Zachowaj odpowiedzi w pliku tekstowym o dowolnej nazwie.
oraz */. Komentarz powoduje zignorowanie objętego nim kodu.
18
http://ci.swps.pl/
Zadanie 5
Dodaj na dole arkusza CSS poniższą frazę:
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ę
Zapisz i sprawdź zmiany, sprawdź poprawność kodu XHTML i CSS przy
wyglądem od odsyłacza w akapicie. Zapisz i sprawdź zmiany, sprawdź
pomocy walidatora.
poprawność kodu XHTML i CSS przy pomocy walidatora. Zachowaj
projekt.
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
Podsumowując zasadę specyficzności warto zwrócić uwagę na pewną
identyfikatorze 'container'?
subtelność, która może powodować błędy, szczególnie przy stawianiu
pierwszych kroków z CSS.
Zmodyfikuj arkusz CSS jak poniżej:
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, sprawdź poprawność kodu XHTML i CSS przy
pomocy walidatora.
Zapisz i sprawdź zmiany.
19
http://ci.swps.pl/
Dlaczego nic się nie zmieniło? Ponieważ składnia:
Tym razem składnię:
div#container p {font-family: Arial; ...}
div #container p {font-family: Arial; ...}
oznacza:
należy przetłumaczyć:
„dla akapitu (selektor p), który zawarty jest w bloku dokumentu (selektor
„dla akapitu (selektor p), zawartego w dowolnym elemencie o
znacznika div) o identyfikatorze 'container' (selektor #container)
identyfikatorze 'container' (selektor #container), który to element zawarty
przypisz następujące właściwości”
jest w bloku dokumentu (selektor div ) przypisz następujące właściwości”
Innymi słowy w XHTML spodziewamy się następującej relacji elementów:
Tym razem w XHTML spodziewamy się zupełnie innej relacji elementów:
<div id=”container”>
<p>cokolwiek</p>
</div>
<div>
<element id=”container”>
<p>cokolwiek</p>
</element>
</div>
rodzic dla p
dziecko div
rodzic dla element, przodek dla p
dziecko div, rodzic dla p
dziecko element, potomek div
Wstaw teraz spację jak poniżej:
Zadanie 6
Zapisz i sprawdź zmiany. Rezultat w przeglądarce wskazuje, że
Pozostaw w arkuszu CSS składnię:
skonstruowany selektor CSS nie odnosi się do żadnego z elementów w
kodzie XHTML. Dlaczego? Ponieważ wprowadzenie spacji zupełnie
Zmodyfikuj kod XHTML tak aby selektor zadziałał. Zapisz i sprawdź
zmienia sens (to właśnie ta subtelność!).
zmiany, sprawdź poprawność kodu XHTML i CSS przy pomocy walidatora.
Zachowaj projekt.
20
http://ci.swps.pl/
Utwórz/zmodyfikuj kod CSS aby wyglądał jak poniżej:
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:
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/
W przypadku konfliktu ten selektor 'wygrywa', który jest niżej, 'bliżej' źródła
Zauważ, że pomimo arkusza CSS (w postaci jak na górze tej strony)
dokumentu XHTML/HTML. Jest to konsekwencja 'kaskadowości' arkuszy
wprowadzony w kod XHTML/HTML styl 'zwyciężył'. Taki styl nosi nazwę
stylów. Aby się o tym przekonać możesz zamienić selektory miejscami:
'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.
Oczywiście przedstawiony konflikt jest jawny i do tego banalny. Jednak
podczas projektowania złożonego arkusza CSS konflikty mogą być
Innym sposobem na rozwiązywanie konfliktów jest reguła specyficzności,
znacznie bardziej skomplikowane konflikty, a ten kto potrafi rozwiązywać
tzn. precyzowanie selektorów. Zmodyfikuj arkusz CSS jak poniżej:
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
Zastosowaliśmy precyzyjne selektory i zgrupowaliśmy (str. 15 i 16). W ten
źródło jak poniżej:
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/
Specyficzność selektorów CSS można wyrazić za pomocą 4 liczb. Dla
Co oznaczają pozostałe pozycje opisujące specyficzność?
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:
Rozpatrzmy jeszcze jedno rozwiązanie przy pomocy zasady
specyficzności:
Efekt tej zmiany jest przewidywalny – wszystkie akapity będą pisane
domyślną dla systemu operacyjnego czcionką szeryfową o rozmiarze 2
Dla selektora w wierszu 3 specyficzność można opisać liczbami: 0,0,0,2
em. Jednak gdy ten kod zmodyfikujemy ja poniżej:
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
efekt będzie inny. Dlaczego selektory w wierszu 3 są ważniejsze, bardziej
jest 'większa' od 0,0,0,2, dlatego też akapit z klasą 'first' będzie miał inne
specyficzne? Dlatego, że ich opis za pomocą liczb wygląda następująco:
formatowanie niż pozostałe akapity zawarte w elemencie body.
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.
23
http://ci.swps.pl/
Zadanie 7
Konflikty – diagnoza
W oparciu o źródło XHTML (podane na stronie 21) oraz arkusz CSS:
Zmodyfikuj kod XHTML (str. 31) tak aby w części head zagnieździć styl:
a) dla elementu p stwórz 2 selektory, których specyficzność można opisać
Zmodyfikuj zewnętrzny arkusz CSS (według powyższe źródła ten arkusz
liczbami: 0,0,0,3 i 0,0,1,2.
zawarty jest w pliku styl.css) jak poniżej:
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ę
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/
rezultatu, co nierzadko jest frustrujące. Aby zbadać czy omawiana sytuacja
Często taki błąd trudno zauważyć. Jeżeli więc zastosujemy frazę
nie wynika z konfliktu można użyć poniższego wyrażenia:
!important
i taki zabieg nie przyniesie pożądanego efektu warto przyjrzeć się
Zapisz i sprawdź rezultat.
dokładnie samej składni, ewentualnie dokonać jej walidacji.
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:
25
http://ci.swps.pl/
Oto przykładowy wynik:
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ć:
Jednak wygenerowany przez
czcionkę,
http://www.typetester.org/ kod nie
uwzględnia wszystkich wybranych
jej rozmiar, odstępy między
parametrów jakie przewiduje css.
wierszami, odstępy między
literami,
wyrównanie, odstępy między
słowami, rodzaj dekoracji,
kolor oraz kolor tła
Przede wszystkim właściwość font-family może, a nawet powinna mieć
Zadeklarowane parametry można następnie pobrać w postaci kodu css, w
więcej pozycji, np.:
prawej, górnej sekcji:
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/
Skoro typografia css operuje na zainstalowanych w systemie czcionkach
Zadanie 8
pojawia się pytanie: jaki zestaw czcionek jest wspólny dla najbardziej
Przy pomocy serwisów http://www.typetester.org/ oraz
popularnych systemów operacyjnych? Taki zestaw nosi nazwę 'safe list' i
http://www.w3schools.com/css/ (sekcje font i text) wybierz jedną z pozycji z
jest między innymi wyszczególniony w serwisie http://www.typetester.org/
'safe list', stwórz klasy w których pozostanie ten sam rozmiar czcionki, ale
przy wyborze czcionki:
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
Choć prezentowany zestaw zawiera zaledwie 9 czcionek, stosując
osiągniesz
odpowiednie parametry można osiągnąć całkiem ciekawe spektrum.
przy pomocy
odpowiednich
własności css.
Zachowaj projekt
27
http://ci.swps.pl/
Dodaj do kodu XHTML poniższą frazę:
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
W tym przykładzie posłużyłem się serwisem
umożliwia załączenie czcionki której nie ma w systemie. Informacje na ten
(http://www.searchfreefonts.com/free/coca-cola-ii.htm). W polu tekstowym
temat można znaleźć np. po słowach kluczowych 'css font embedding'. W
wpisałem frazę 'To jest czcionka Coca Cola ii!' i wykonałem zrzut ekranu
praktyce jednak autorzy bardzo często zastrzegają możliwość
(do pobrania jako plik coca.png). Zapisz ten plik w katalogu images, który
wykorzystania czcionek w serwisach internetowych. Rozwiązaniem jest
to katalog będzie w tej samej lokalizacji co plik index.html
użycie darmowej czcionki, zakupienie czcionki z odpowiednią licencją lub
Sprecyzujmy nowa klasę coca:
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
Zadeklarowane własności width i height wynikają z rozmiaru pliku, który
http://www.csszengarden.com/.
w tym przykładzie został wstawiony w tło (background), deklaracja norepeat wskazuje aby obraz tła został zastosowany tylko jeden raz. A oto i
rezultat:
28
http://ci.swps.pl/
Zadanie 9
Teraz wystarczy tylko usunąć zbędny tekst:
W oparciu o przedstawioną metodę podstaw plikami graficznymi z dowolną
czcionką (zawierającymi adekwatny tekst) pozycje w menu:
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
Zachowaj projekt
stosunkowo mała elastyczność (konieczność edycji plików grafiki przy
każdej zmianie serwisu) natomiast zaletą tego rozwiązania jest wciąż
Cenne informacje dotyczące zagadnień typografii internetowej można
widoczny tekst (a więc i kod który zachowuje znaczenie), o czym można
znaleźć między innymi pod adresem: http://webtypography.net/.
się przekonać wyłączając styl css (np. dla Firefox: Widok/Styl
strony/Ignoruj style).
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/
Znany wszystkim kod binarny zawiera tylko dwie wartości, np. 0/1 lub
Przestawiona składnia dotyczy definicji w css koloru w ogóle (nie tylko dla
prawda/fałsz lub tak/nie. Z kolei stosowany powszechnie kod dziesiętny
czcionek). Budowanie palet barwnych i harmonizowanie barw, choć
zawiera dziesięć elementów (0-9). Kod szesnastkowy zawiera dziesięć cyfr
wykracza poza ramy tego kursu, to kluczowe umiejętności dla web design.
(od 0 do 9) oraz sześć liter: a, b, c, d, e, f (o jest najniższą wartością,
Zainteresowany czytelnik może jednak odwiedzić dość przydatne serwisy:
podczas gdy f najwyższą).
–
http://colorschemedesigner.com/ - poświęcony paletom barwnym
Zapis szesnastkowy opisuje każdą ze składowych RGB na podstawie
–
http://www.snook.ca/technical/colour_contrast/colour.html –
dwóch miejsc:
poświęcony ocenie czytelności poprzez analizę kontrastu między
color: #e424d9;
tłem i figurą (tekstem)
–
Gdy w kodzie szesnastkowym barwy występują pary takich samych
http://colorfilter.wickline.org/ - generuje obraz typowy dla różnych
jednostek chorobowych oczu.
wartości to całość można skrócić z sześciu do trzech pozycji jak poniżej:
color: #ff00ff;
Zadanie 10
color: #f0f;
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
W praktyce mało kto pamięta notację szesnastkową, ale można ją spotkać
znajdziesz np. na str. 24).
w większości programów graficznych podczas edycji barwy.
Zachowaj projekt
Innymi sposobami zapisu wartości RGB w css są:
color: rgb(0,255,0);
color: rgb(0%,100%,0%);
30
http://ci.swps.pl/
Czcionki – zastosowanie pseudoklas
Ten przykład budowy pseudoklas oparty jest o kod XHTML (str 21) oraz
Pseudoklasy to narzędzie pozwalające wyróżnić stan elementu.
poniższy kod css:
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
Zadanie 11
przyciskiem myszy i przycisk ten pozostaje wciąż wciśnięty).
Wprowadź zmiany i sprawdź rezultat. Następnie zmodyfikuj parametry dla
Podczas deklaracji pseudoklas kolejność w/w stanów jest kluczowa. Aby
pseudoklas tak aby osiągnąć własny efekt (w razie wątpliwości skorzystaj z
łatwiej zapamiętać te kolejność niektórzy autorzy wskazują na
serwisów: http://www.typetester.org/ oraz http://www.w3schools.com/css/).
podobieństwo do słynnego tatuażu na kostkach pięści – love/hate czyli:
Zachowaj projekt
L link
o
V visited
e
H hover
A active (focus)
t
e
31
http://ci.swps.pl/
treść – dowolny tekst jaki zawiera element;
Podstawy layout – 'Box model'
odstęp – wewnętrzny, przezroczysty obszar separujący treść od ramki,
'Box model' to termin, który określa sposób generowania elementów html
oraz sposób stylizacji ich za pomocą css
właściwością css określającą odstęp jest padding;
(http://www.w3schools.com/css/css_boxmodel.asp). Według tego modelu
ramka – właściwość wyrażana w css za pomocą border;
element generowany jest następująco:
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/
Oto przykładowy rezultat
Czas na zastosowanie właściwości. W arkuszu css umieść poniższy kod
dla przeglądarki Chrome
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
oraz dla przeglądarki Firefox;
jednak zajmiemy się za chwilę.
zauważ, że włączenie
zaznaczania elementów
Czas na ramkę. Posłużę się prostą składnią:
blokowych we wtyczce Web
border-style: dotted;
Developer (Zaznacz/Elementy
border-width: 2px;
blokowe, str.11) wskazuje dwa
border-color: #999999;
elementy: czerwony – akapit
oraz niebieski – element bloku
dokumentu
33
http://ci.swps.pl/
A to efekt zastosowanej składni:
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
Pozostał jeszcze margines, np.:
nie jest przypisany selektor wraz z określoną domyślną wartością
margin:20px;
marginesu. Rozwiąż ten problem, tak aby otrzymać poniższy rezultat:
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).
34
http://ci.swps.pl/
Podczas formatowania bloku dokumentu, określiliśmy m.in. że jego
Zadanie 12
szerokość będzie wynosiła 200px oraz przypisaliśmy mu poniższe
Na podstawie serwisu http://www.w3schools.com/css/default.asp
właściwości:
zadeklaruj właściwości css tak aby otrzymać poniższy rezultat.
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).
35
http://ci.swps.pl/
Podstawy layout – 'opływanie'
Gdy jednak obraz znajduje się
W poniższym przykładzie przeanalizujemy 'zachowanie' grafiki i tekstu.
w środku treści wyraźnie widać
Posłużyłem się fragmentem definicji egocentryzmu ze stron Wikipedii
brak odpowiedniego
(http://pl.wikipedia.org/wiki/Egocentryzm) oraz ikoną
'opływania' tekstu.
(http://iphone.iusethis.com/icon/iphone/ego.png). Zmodyfikuj źródło
poprzedniego dokumentu aby otrzymać podobny efekt.
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
Dodaj do akapitu dowolną grafikę (w przypadku gdy nie pamiętasz składni
zwiększę odstępy między
zajrzyj na instrukcji xhtml, str. 39).
wierszami oraz margines dla
obrazu.
Jeżeli obraz dodam na
początku treści całość wygląda
Dla deklaracji marginesu zastosowałem poniższą składnię:
jeszcze 'w miarę przyzwoicie'.
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/
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ń
Zmodyfikuj arkusz css tak aby wyrównać lewą krawędź obrazu i tekstu.
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/
Aby zmodyfikować domyślne reguły opływania również dla elementów
Zmień nazwę container na adekwatną nazwę do obecnej funkcji tego
blokowych użyjemy właściwości float. Zdefiniuj szerokość dla menu (np.
bloku (np. content) zarówno w kodzie html jak i css. Identyfikator
200px) i container (np. 400px). Dla menu przypisz właściwości float:
container z kolej wykorzystamy dla budowy bloku, który będzie
left, a dla container float:right;.
'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.
Zauważ, że container nie tylko pływa menu po prawej stronie ale
700px).
pozycjonuje się 'maksymalnie' do prawej. Jednym ze sposobów na
zadeklarowanie precyzyjniej pozycji container jest zamknięcie obu
elementów blokowych w kolejnym bloku.
38
http://ci.swps.pl/
Interesująca w omawianej właściwości float jest możliwość zmiany pozycji
Przypisz obu elementom blokowym właściwość float:left
(względem siebie) elementów bez zmiany kodu html. Zmodyfikuj kod css
Zauważ na różnice w
aby doprowadzić do poniższego rezultatu:
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/
Warto podkreślić, że nadanie właściwości float jednemu elementowi
Aby umieścić nową warstwę pod istniejącymi należy przerwać regułę
powoduje, że inne elementy go opływają (nawet jeśli nie mają
opływania. Do tego celu w css służy właściwość clear:both;. Dość
zadeklarowanej właściwości float). Aby zweryfikować to twierdzenie dodaj
częstym rozwiązaniem jest stworzenie w arkuszu css klasy (np. o nazwie
za container dowolny element bloku dokumentu, w css przypisz mu tylko
clear), której jest przypisana powyższa właściwość, a następnie powołanie
właściwość szerokości (która wraz z wymiarami menu i content nie
się na tą klasę w kodzie html:
powinna przekraczać szerokości container).
<br class=”clear” />
Zadanie 13
Umieść nową warstwę
W oparciu o wiadomości z sekcji Podstawy layout – 'Box model', Podstawy
obok warstwy
layout – 'Opływanie' zrealizuj poniższy układ. Zachowaj projekt
content.
40
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

CSS (ang. Cascading Style Sheets) czyli kaskadowe arkusze stylów

Transkrypt

Podobne dokumenty

Wejdź na: www.gs.uni.opole.pl - Gazeta Studencka