Portugalskie media informują, że
Pogoń Szczecin i FC Porto doszły
do porozumienia w sprawie transferu pomocnika reprezentacji Polski
Przemysława Kaz
mierczaka.

"Smoki" miały zapłacić
za Kaz
mierczaka około 1,4 miliona euro.
Według doniesień z Portugalii Kaz
mierczak zwiąże się z drużyną
mistrza Portugalii na cztery lata.

Jeśli informacje z Portugalii potwierdzą się to Kaz
mierczak będzie czwartym
Polakiem w FC Porto. Wcześniej grali tam: Józef Młynarczyk, Andrzej Woz
niak
i Grzegorz Mielcarski.

Inni polscy zawodnicy tam nie grali. Uwaga promocja na bilety lotnicze do Portugalii. 700
PLN OD DZIÅš 500PLN.

Kilka prostych przepisów

Dynia pieczona

1 dynia makaronowa, 1 szklanka ostrego sosu pomidorowego, 1 łyżka drobno posiekanej
pietruszki, sól.

Kardy Zapiekane z Serem

1 kg kardów, 10 dag sera tartego, 3 łyżki masła, 1 łyżka octu, sos od pieczeni,
bułka tarta, przyprawy
Ugotować oczyszczone i pokrajane kardy w wodzie.

src="../images_cwiczenia/15.jpg" height="373" width="600" border="0"/>

Kukurydza Pieczona w Piekarniku

8 kolb kukurydzy, sól, 1 łyżka masła
Kolby obrać z liści i włókien, umyć i wstawić do nagrzanego piekarnika.
Piec do czasu, gdy staną się ciemnozłote.

50 dag patisonów, 1 jajko, 2 łyżki mleka, 4 łyżki mąki, 4 łyżki tartej bułki,
olej do smażenia, sól, pieprz
Patisony umyć, obrać ze skórki i pokrajać w poprzek na plasterki o grubości 1 cm.

wyglądał inaczej od innego

, to należy
używać class.
Style - zastosowanie CLASS do konkretnych znaczników HTML w zewnętrznym
arkuszu stylów CSS.
W tym przykładzie zastosuję style css do znaczników html i stworzę różne klasy
dla tych samych znaczników, co pozwoli na zróżnicowanie wyglądu w obrębie
tego samego elementu .
Potrzebuję oczywiście plik HTML z kodem np. jak poniżej i plik ze
zdefiniowanymi wyglądami. Należy go utworzyć np. w programie TopStyle
36
©www.artax.krakow.pl
XHTML CSS  skrypt
i zapisać go np. w tym samym folderze, w którym znajduje się plik hml. Plik
poniżej połączony jest z plikiem stylu styleczek.css.
Wygląd różnicujemy za pomocą CLASS.
" Przykład 11





A
ącze do pliku css, w którym zdefiniowałem wygląd dla każdego znacznika.


Pierwsza Klasa przypisana do body. Nazywa się body. zobrazkiem (patrz niżej
do arkusza sylu) i może być przypisana jedynie do znacznika body. Klasy w ten
sposób zdefiniowane dziedziczą wygląd znacznika (w tym przypadku body)
i dodają wygląd określony inaczej lub dodatkowo w klasie.

Całość wstawiamy dla lepszego panowania nad rozmiarem i położeniem
do tabelki.

użyte w kodzie html wyświetla ustawienia zdefiniowane
dla H1 i dodatkowo z klasy .zielony. Jeśli dla H1 wygląd jest zdefiniowany
45
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
inaczej niż dla klasy . zielony, to nie ma to znaczenia ponieważ klasa zielony ma
priorytet. Klasę zielony możesz oczywiście użyć do dowolnego znacznika np.<
Body class= "zielony "> ,< p class= "zielony ">
.zielony{
color : Green;
}
.wazne{
font-weight : bold;
}
.inne{
font-size: 10px;
}
.wydzielony{
color : Red;
letter-spacing : 6px;
background-color : Aqua;
}
" Przykład 12_a
Przykład poniżej obrazuje użycie klas dla znaczników DIV i formatowanie
hiperłączy, czyli znacznika A. Chodzi o sformatowanie hiperłączy tak, aby
reagowały na ruch myszy. Wprowadza klasy dla znaczników A. Klasy te tworzymy
w sposób, który może łatwo doprowadzić do błędu. Zobacz arkusz stylów
styleczek4.css.

określa ramy dokumentu. Określa jego szerokość. Jest to
konkurencyjna metoda dla tabel. Układasz na stronie za pomocą znaczników DIV.

46
©www.artax.krakow.pl
XHTML CSS  skrypt
Dla "a " została poniżej użyta klasa zewn. Okno otwiera się również w nowym
oknie.

Strona główna w nowym oknie:
class="zewn">http://www.strefanauki.pl

Redakcyjna skrzynka pocztowa: href="mailto:biuro@strefanauki.pl">biuro@strefanauki.pl

Klasyczne użycie klas. Są one zdefiniowane od kropek, co pozwala na użycie ich
z dowolnym znacznikiem

Szkolenie XHTML CSS

Znaczniki HTML

Tego wszystkiego raczej się nie używa -
Zastosowanie większości stylów logicznych html

Inne

Formularz - Jeśli nie programujesz PHP, to
nie wyciągniesz z tego 100% korzyści.

Zdjęcia i hiperłącza - Wstawianie zdjęć
i najważniejszego : linków!

Klasyczne znaczniki HTML - wieczór
wojenny

Formatowanie HTML - Zakazane dziÅ›
i właściwie traktowane jako błąd

A oto zawartość pliku styleczek3.css
47
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
body{
background-color : Black;
color : Silver;
}
Poniżej zwróć uwagę na sposób użycia komentarza w stylach CSS. Jest to
konieczne z racji dużej ilości używanych klas. A
atwo się jest pogubić i w związku
z tym lepiej napisać, co autor miał na myśli zwłaszcza, jeśli ktoś po nas będzie
przeglądał i uaktualniał kody.
/*wyglądy hiperłączy*/
Ogólna definicja hiperłącza dla wszystkich 4 stanów. Hiperłącza mają 4 stany.
Dla linków nigdy nie określaj formatów charakterystycznych dla formatu akapitu,
czyli : wyrównania, wcięcia, odstępów między wierszami itd. Nie zadziałają one
ponieważ linki działają na poziomie czcionki. Możesz więc zdefiniować : wielkość,
kolor, tło czcionki, pochylenie itd. Domyślnie hiperłącza są podkreślone, aby to
zlikwidować musisz to sprecyzować w stylu : text-decoration : none.
a{
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration : none;
}
Definicja pierwszego stanu hiperłącza. Oznacza ona wygląd linku na stronie. Link
nie był nigdy kliknięty, czyli link nie był ani otwierany, ani strona nie jest w tym
momencie otwierana (aktywna).
a:link{
color : white;
font-weight : bold;
}
48
©www.artax.krakow.pl
XHTML CSS  skrypt
Definicja następnego stanu hiperłącza. Oznacza ona wygląd linku na stronie,
który był już wcześniej odwiedzony. Jeśli klikniesz w hiperłącze i zrobisz wstecz,
to tak będzie wyglądał jak zostanie zdefiniowany w a:visited.
a:visited{
color : white;
font-weight : bold;
}
Definicja następnego stanu hiperłącza. Oznacza ona wygląd linku na stronie,
który jest aktualnie aktywny. Zobaczysz go w momencie otwierania hiperłącza
w osobnym oknie. (__target= "_blank ")
a:active{
color : white;
font-weight : bold;
}
Definicja następnego stanu hiperłącza. Oznacza ona wygląd w chwili, kiedy mysz
podchodzi do niego.
a:hover{
color : black;
background-color : white;
font-weight : bold;
}
Klasa dla hiperłącza. Klasy definiujemy, oczywiście po kropkach. Kropka i klasa
po niej umieszczona jest zaraz po " a ".
a.zewn:hover{
background-color : red;
font-weight : bold;
49
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
}
Ogólna definicja znacznika DIV. Wszystkie znaczniki DIV czerpią z niego wygląd.
Klasy mogą go definiować bardziej szczegółowo.
div{
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom :15px;
font-size : 12px;
}
.glowny{
margin-left : 100px;
}
.wysrodk{
text-align : center;
}
.tytul{
font-size : 28px;
font-family : "Arial Black";
font-style : italic;
margin-top : 28px;
margin-bottom : 18px;
text-align : center;
}
.podtytul{
font-size : 19px;
font-family : "Arial Black";
font-style : italic;
margin-top : 18px;
margin-bottom : 18px;
border-bottom : 1px solid Silver;
}
.tekst{
margin-left : 60px;
}
W przykładzie na stronie Przykład 12_a wszystkie 4 stany poza a :hoover, czyli
reagujÄ…cego na mysz, majÄ… ten sam wyglÄ…d.
" Przykład 12_b
Przykład ten dotyczy również formatowania klasami, lecz tym razem komórek
tabeli. Oczywiście niczym nie różni się to od tego, co widzieliśmy wcześniej i co
dotyczyło tekstu. Znajdziesz w tym przykładzie komórki tabelki sformatowane
50
©www.artax.krakow.pl
XHTML CSS  skrypt
klasami, klasy definiowane dla znaczników i oderwane od znaczników, rysynek
jeko tło.







Klasa dla body pozwala na dodanie nowych lub innych elementówwyglądu
w stosunku do tego, co zostało zdefiniowane dla znacznika body i z której to
definicji inne strony pobierajÄ… wyglÄ…d.

Znacniki DIV są bardzo wygodne. Powyżej kodem wyśrodkowuję rysunek i tekst.
Uwaga ! Nigdy nie używać znacznika . Jest on zdecydowanie
przestarzały. Tak, czy inaczej najlepiej wyśrodkowywać klasą utworzoną w pliku
css, która będzie miała określone wyrównanie teksu : text-align :center.

Rave 800 HO SP

width="200" />





Tabelka o szerokości 510 px.
51
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
width="510">
Pierwsza komórka pierwszego wiersza jest rozciągnięta na 4 komórki. Można
powiedziećć posługując się nomenklaturą Worda, że 4 komórki są scalone.
Uwaga ! Po rozciągnięciu komórki należy usunąć komórki, które zostaną
zastÄ…pione.

Zaczynamy drugi wiersz z klasami przypisanymi do komórek. Szerokości (width)
dla komórek podajemy w jednym wierszu w tabeli. Nie ma sensu powtarzać
szerokości we wszystkich komórkach wierszy ponieważ w razie zmian szerokości
będzie trzeba zmieniać w większej ilości komórek. Nie da się zrobić tabelki, której
pierwsza komórka np. drugiego wiersza ma 100 szerokości, a pierwsza komórka
np. trzeciego wiersza ma 200 szerokości. W takiej sytuacji należy rozpocząć
kolejną tabelkę z innymi szerokościami.








52
©www.artax.krakow.pl
XHTML CSS  skrypt





Znowu komórka rozciągnięta na 4 komórki.

Dane techniczne
Engine	793 HO	width="90">Wind shield	Low
Cyl/Displacement	799,55 cc	class="ele" width="90">Light, double	width="110">std
Carburation	2xTM 40 htd, DPM	class="ele" width="90">Seat	1
Exhaust syst.	1 pipe	width="90">Electrical start	opt
Drive pulley	TRA III	class="ele">Brake system	hydr. H.P.
Reverse	RER	class="ele">Chassi	LGF EVO III R
Track	380x3700/30	width="90">Hood	G 2
Siderail system	RCG 1	class="ele" width="90">Fuel tank	38 l
Front suspens.	LVS	width="90">Lenght	2700
Shock absorber, ski	Gas/T/P/res	class="ele">Width	1199
Rear suspension	Gas/T/P/46mm	class="ele">Height	1130
Ski	SLP/racing	class="ele">Weight	224
Ski stance	1079	class="ele">
Features: 793 H.O. engine, TRA clutch, RER Electric reverse, New Racing skis, HP-brakes, Low windshield, Racing chassi, 2-tone colour

Arkusz stylu styleczek5.css
Dla body zdefiniowane zostały kolory suwaków.
53
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
body{
scrollbar-arrow-color : #CC0033; scrollbar-face-color : #CCCCCC;
scrollbar-3dlight-color : Black; scrollbar-base-color : #666666;
scrollbar-darkshadow-color : #666666; scrollbar-highlight-color :
#CCCCCC; scrollbar-track-color : #666666;
}
Obrazek jako tło dla klasy body.a. Nie powiela się onna całej stronie dzięki
poleceniu : background-repeat : no-repeat; Powoduje to, że obrazek pozostaje
w jednym miejscu i nie kafelkuje się po całej stronie.
body.a{
background-image : url(../images_cwiczenia/tlotabel.jpg);
background-position : top;
background-repeat : no-repeat;
}
Style można grupować. Oto wspólna definicja wyglądu dla body i td.
body, td{
font-size : 11px; font-family : Arial, Helvetica, sans-serif;
}
.nazwa{
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
color: Black;
text-align : center;
padding-bottom : 7px;
letter-spacing : 1px;
font-weight : bold;
}
.tytul{
background-color : Black;
color : White; font-size : 22px;
padding : 10px;
}
td.ele{
color: #535353;
padding-left : 4px;
padding-top : 1px;
padding-bottom : 1px;
background-color : #F5F5F5;
border : 1px solid #cccccc;
border-top : 0px solid #CCCCCC;
}
td.ele1{
background-color : #F5F5F5;
54
©www.artax.krakow.pl
XHTML CSS  skrypt
border : 0px solid #cccccc;
border-bottom : 1px solid #cccccc;
color: #535353;
padding-left : 4px;
padding-top : 1px;
padding-bottom : 1px;
}
55
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
Definiowanie stylów w sekcji HEAD , A NIE w ZEWN
TRZNYM ARKUSZU
CSS.
Należy tego unikać. Dlaczego ? Ponieważ jeśli zdefiniujesz wyglądy
w zewnętrznym arkuszu, to podepniesz do niego wszystkie strony w obrębie
danego serwisu www. Jeden arkusz CSS dla wszystkich stron. Jeśli definiujesz
style w sekcji head to na każdej stronie musisz to zfrobić osobno. Wyobraz
sobie
zmiany wyglądu, które są w pewnym momencie nieuniknione. W każdym pliku
HTML z osobna trzeba będzie to przeprowadzić. Bez sensu.
" Przykład 13





W tym pliku nie ma zewnętrznego pliku css. Nie ma łącza. Cały wygląd
zdefiniowany jest poniżej w obrębie znacznika styl w sekcji HEAD. Zaraz poniżej
znajdziesz również znacznik komentarza. na ekranie przeglądarki, ale będzie widoczne w kodzie -->



57
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt

Cały układ strony umieszczony jest w znaczniku dDIV, którego szerokość
określona jest w klasie .glowny w pliku css.

Warzywa Rzadko Spotykane

Kilka prostych przepisów

Dynia pieczona

1 dynia makaronowa, 1 szklanka ostrego sosu pomidorowego, 1 łyżka
drobno posiekanej
pietruszki, sól
dynia jest upieczona, gdy widelec łatwo wchodzi w skórkę. upieczoną dynię
przeciąć w poprzek na połowę, usunąć pestki, i wygarnąć
widelcem pasemka miąższu.
posolić do smaku. wyłożyć je na półmisek i polać gorącym sosem. posypać pietruszką.

Kardy Zapiekane z Serem

1 kg kardów, 10 dag sera tartego, 3 łyżki masła, 1 łyżka octu, sos od
pieczeni,
bułka tarta, przyprawy
Ugotować oczyszczone i pokrajane kardy w wodzie.
Ułożyć warstwę kardów w naczyniu do zapiekania natłuszczonym masłem, posypać tartym serem,
położyć wiórki masła. Ponownie ułożyć warstwy kardów i sera, a na wierzchu wiórki masła. Polać
sosem od pieczeni i posypać bułką tartą. Wstawić do nagrzanego piekarnika i zapiekać 25 min.

Kukurydza Pieczona w Piekarniku

8 kolb kukurydzy, sól, 1 łyżka masła
Kolby obrać z liści i włókien, umyć i wstawić do nagrzanego piekarnika.
Piec do czasu, gdy staną się ciemnozłote. Podawać ze świeżym masłem i solą.
Patisony smażone

58
©www.artax.krakow.pl
XHTML CSS  skrypt
Definiowanie stylów bezpośrednio w znaczniku, A NIE w ZEWN
TRZNYM
ARKUSZU CSS, czy sekcji HEAD.
" Przykład 14





Style zdefiniowane bezpośrednio w każdym znaczniku html w atrybucie style="".
Ta metoda jest bardzo ważna i jest często jest używana, jako metoda
uzupełniająca zewnętrzny arkusz stylów. Na przykład potrzebujesz rozstrzelić
czcionkę w kilku pojedynczych wyrazach, to nie będziesz koniecznie chciał
tworzyć klasy w arkuszu stylów. Użyjesz po prostu znacznika STYLE= "LETTER SPACING :5PX> tu napiszesz tekst i tekst zostanie
rozstrzelony. Oczywiście z tej metody podobnie jak z metody umieszczania stylu
w sekcji HEAD możesz korzystać rzadko lub w wyjątkowych sytuacjach.

Warzywa Rzadko Spotykane

Kilka prostych przepisów

Dynia pieczona

1 dynia makaronowa, 1 szklanka ostrego sosu pomidorowego, 1 łyżka drobno posiekanej
pietruszki, sól
59
ARTAX SZKOLENIA Pl. Matejki 6, Kraków, tel. 012 422 27 05, 012 429 57 42
XHTML CSS  skrypt
dynia jest upieczona, gdy widelec łatwo wchodzi w skórkę. upieczoną dynię
przeciąć w poprzek na połowę, usunąć pestki,
i wygarnąć widelcem pasemka miąższu.
posolić do smaku. wyłożyć je na półmisek i polać gorącym sosem. posypać pietruszką.

XHTML część 2
Ramka pływająca
Ramki są generalnie używane, aby wstawić na stronę elementy innych stron lub
serwisów www. Wiele stron jest zabezpieczanych przed takim procederem. Nie
każdy życzy sobie, aby jego strona była podpięta jako fragment czyjejś strony
www. Ramki można również używać do projektowania całej swojej witryny. Nie
sięga się wtedy do innych www, lecz wstawia w ramki swoje podstrony. Rzadko
się korzysta z ramek ponieważ powodują wiele problemów i należy po prostu ich
nie używać. Pawie nigdy nie ma żadnego logicznego uzasadnienia, aby strony
budować w oparciiu o ramki. Pozorna wygoda w stosowaniu ramek dla stron,
gdzie często dodajemy podstrony traci wszelki sens, gdy osoba projektująca www
wykorzystuje php lub inne języki programowania po stronie serwera.
Ramka pływająca




62
©www.artax.krakow.pl
XHTML CSS  skrypt
Zestaw ramek pionowy
W przeciwieństwie do ramki pływającej