ćwiczenie 4, Szkoła


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




Wyszukiwarka