W tym ćwiczeniu należy zastosować własności CSS czcionek i tekstu do sformatowania plików HTML. Zadanie polega na sformatowaniu dwóch plików HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą wszystkie własności dotyczące czcionek i tekstu. W pliku plik_2.html zostanie dokonana również lokalna modyfikacja wewnątrzwierszowymi arkuszami stylów. Konieczne będzie także użycie klas selektorów.
1. Należy zacząć od przygotowania struktury folderów i plików:
foldery:
ćwiczenie 4 - główny
pliki - zawarty w głównym
style - zawarty w głównym
pliki:
plik_1.html - w folderze pliki
plik_2.html - w folderze pliki
style.css - w folderze style
2. W obu plikach HTML należy umieścić taką samą treść:
zawartość plików HTML:
w sekcji <head>...</head>:
łącze do arkusza stylów
w znaczniku <title>...</title> nazwa pliku
w sekcji <body>...</body>:
jedna linia
napis: Menu nawigacyjne w znaczniku <p>...</p>
przypisać temu znacznikowi klasę: klasa_1
wzajemne łącza do plików - umieszczone w znaczniku <div>...</div>
przypisać temu znacznikowi klasę: klasa_2
jedna linia
nazwa pliku w znaczniku <p>...</p>
przypisać temu znacznikowi klasę: klasa_3
tekst:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
w znaczniku <p>...</p>
przypisać temu znacznikowi klasę: klasa_4
środkowe zdanie tej wstawki w znaczniku <span>...</span>
przypisać temu znacznikowi klasę: klasa_5
3. W pliku CSS należy przygotować dla wszystkich pięciu klas, pięć różnych reguł formatujących czcionki i tekst, uwzględniających wszystkie ich właściwości.
zawartość pliku CSS:
klasa_1:
wielkość czcionki: 20px;
rodzaj czcionki: Verdana, Tahoma, Arial, Helvetica, sans-serif;
styl czcionki: normal;
waga czcionki: 100;
wariant czcionki: normal;
kolor tekstu: #0000ff; (blue)
dekoracja tekstu: overline;
transformacja tekstu: lowercase;
wyrównanie tekstu: center;
wcięcie tekstu: 20px;
odstęp między wierszami: 20px;
odstęp między wyrazami: 20px;
odstęp między literami: 20px;
klasa_2:
wielkość czcionki: 18px;
rodzaj czcionki: Arial, Verdana, Tahoma, Helvetica, sans-serif;
styl czcionki: normal;
waga czcionki: 300;
wariant czcionki: small-caps;
dekoracja tekstu: none;
transformacja tekstu: none;
wyrównanie tekstu: left;
wcięcie tekstu: 18px;
odstęp między wierszami: 18px;
odstęp między wyrazami: 18px;
odstęp między literami: 18px;
klasa_3:
wielkość czcionki: 16px;
rodzaj czcionki: 'Courier New', Courier, monospace;
styl czcionki: italic;
waga czcionki: 500;
wariant czcionki: normal;
kolor tekstu: #ff00ff; (fuchsia)
dekoracja tekstu: line-through;
transformacja tekstu: normal;
wyrównanie tekstu: right;
wcięcie tekstu: 16px;
odstęp między wierszami: 16px;
odstęp między wyrazami: 16px;
odstęp między literami: 16px;
klasa_4:
wielkość czcionki: 14px;
rodzaj czcionki: 'Times New Roman', Bodoni, serif;
styl czcionki: oblique;
waga czcionki: 700;
wariant czcionki: normal;
kolor tekstu: #ff0000; (red)
dekoracja tekstu: underline;
transformacja tekstu: capitalize;
wyrównanie tekstu: justify;
wcięcie tekstu: 14px;
odstęp między wierszami: 14px;
odstęp między wyrazami: 14px;
odstęp między literami: 14px;
klasa_5:
wielkość czcionki: 12px;
rodzaj czcionki: Helvetica, Verdana, Tahoma, Arial, sans-serif;
styl czcionki: italic;
waga czcionki: 900;
wariant czcionki: small-caps;
kolor tekstu: #008000; (green)
dekoracja tekstu: none;
transformacja tekstu: lowercase;
wyrównanie tekstu: right;
odstęp między wierszami: 12px;
odstęp między wyrazami: 12px;
odstęp między literami: 12px;
Efekt powinien być taki, że oba pliki HTML będą tak samo sformatowane.
4. W pliku: plik_2.html należy dokonać lokalnych wewnątrzwierszowych modyfikacji:
wewnątrzwierszowe modyfikacje w pliku: plik_2.html:
usunąć górną linię (podkreślenie górne)
w wyrażeniu Menu nawigacyjne pogrubić czcionkę do 900
i zmienić nadkreślenie na podkreślenie
odsyłacze wyrównać do prawej
zmniejszyć odstęp między literami w menu z odsyłaczami do 4px
zwiększyć czcionkę w nazwie pliku 300%
usunąć przekreślenie w nazwie pliku
i zmienić kolor na #00ff00; (lime)
w akapicie z tekstem zamienić kolory ze znacznikiem <span>...</span>
zwiększyć wcięcie do 2cm
zmienić dekorację na przekreślenie
zmienić czcionkę na Tahoma
zwiększyć odstęp między wierszami do 0.7cm
w znaczniku <span>...</span> zmienić wariant czcionki na normal
powiększyć czcionkę do 5mm
zwiększyć odstęp między wierszami do 1cm