Ćwiczenie 3 - Style kaskadowe
1. Zapoznać się z hierarchią stylów:
- Styl zewnętrzny stosuje się dla prezentacji wielu stron. Umieszcza się go w pliku zewnętrznym z rozszerzeniem css. Każda strona musi zawierać link do strony ze stylami w sekcji <head> .
- Styl wewnętrzny powinien być używany w pojedynczym dokumencie. Przesłania on właściwości umieszczone w stylu zewnętrznym. Jego definicję umieszcza się w sekcji<head>w znaczniku<style>
- Styl inline umieszcza się wewnątrz znacznika, którego dotyczy. Zmienia on właściwości stylu nadrzędnego. Należy stosować go sporadycznie tylko dla pojedynczych elementów. Może zawierać każdą z właściwości css.
Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:
- domyślny arkusz przeglądarki WWW (niezależny od autora strony)
- domyślny arkusz użytkownika przeglądarki (jak wyżej)
- zewnętrzne arkusze stylów i definicje stylów w nagłówku dokumentu
- definicje stylów w atrybucie <style> elementu
2. Zapoznać się z teorią tworzenia stylów kaskadowych dotyczących tła, koloru, czcionki, grupowania elementów, zastosowania atrybutów class i id, pozycjonowania elementów na stronie (względne i bezwzględne), jednostek określających rozmiary
3. Utworzyć style (zewnętrzny, wewnetrzny i inline) do TWOJEJ STRONY:
a) Utworzyć style dla body, nagłówków, paragrafu.
b) Zmienić konstrukcję strony w taki sposób, by grupowanie jej elementów oparte było na blokach <div> i <spam>.
c) Wypozycjonować wszystkie elementy strony stosując style zewnętrzne.
d) Wykorzystać atrybuty class i id w stylach dotyczących odsyłaczy i akapitów. Wypozycjonować 3 akapity tak aby:
- pierwszy miał tekst wyrównany do lewego marginesu i zwiększone odstępy miedzy wierszami,
- drugi był wycentrowany i zaczynał się ozdobną literą znacznie większą od pozostałych,
- trzeci był wyrównany do prawego marginesu i jego pierwszy wiersz był napisany inną czcionką.
e) Wyświetlić listę wypunktowaną własnymi punktorami (obrazkami gif).
f) Na stronie umieścić obrazek tak by zajmował dokładnie 70 % szerokości bloku, w którym jest umieszczony i był oblany tekstem.
g) Wyświetlić tabelę zawierającą:
- nagłówki napisane ozdobną czcionką, wielkimi literami,
- obramowanie różnymi rodzajami linii,
- co drugi wiersz pokolorowany (tło lub czcionka).
h) Zmienić domyślne formatowanie odsyłacza.
Strony:
http://pl.html.net/
http://pl.wikipedia.org/wiki/Kaskadowe_arkusze_stylów
http://www.csszengarden.com/tr/polish/
2014-03-10 T. Wiśniewska
TECHNIKI INTERNETOWE - laboratorium
INFORMATYKA III rok
studia stacjonarne I stopnia
sem. letni r. a. 2013/2014