instrukcja4

Zadanie
Wykonać stronę zarządzaną zewnętrznym plikiem css o wyglądzie:
Tekst w pierwszym akapicie, który wyświetlony ma
być dużymi literami, czcionka Verdana, 14pkt, na
zielono
Tekst w drugim akapicie, który wyświetlony ma być
małymi literami, czcionka Verdana, 14pkt, na niebiesko,
tło tekstu żółty, tło boxa pomarańczowy
Box – obramowany, linią przerywaną, 2pkt
grubości
Box – obramowany, linią kropkowaną, 2pkt grubości
Margines wewnętrzny 1cm
Margines wewnętrzny 2cm
Box o wymiarach 8cm na 8cm
Umiejscowienie ta sama wysokość co
box1, 20 px od prawej
Box o wymiarach 8cm na 8cm
Umiejscowienie 20,20 px
Margines wewnętrzny 1cm,
Wklejone zdjęcie auta
Po najechaniu myszką nad zdjęcie wokół niego
pojawia się czarne tło boxu
Box wyśrodkowany
Tekst1:
Mocą chwilową nazywamy iloczyn wartości chwilowych napięcia i prądu. Napięcie i prąd
sinusoidalny zmieniają w funkcji czasu swoją wartość bezwzględną i znak, moc chwilowa też
zmienia się w funkcji czasu, zarówno co do wartości bezwzględnej, jak i co do znaku.
Tekst2:
Ze względu na zastosowanie transformatory można podzielić na trzy podstawowe grupy:
- Transformatory energetyczne - stosowane przy przesyłaniu i rozdzielaniu energii
elektrycznej (zwane też transformatorami mocy),
- Transformatory małej mocy - stosowane w urządzeniach elektrycznych i elektronicznych w
automatyce, łączności, teletechnice,
- Transformatory specjalne budowane dla różnych celów specjalnych, np. przekładniki
pomiarowe, transformatory spawalnicze, probiercze, piecowe, prostownikowe,
bezpieczeństwa itd.
Zarządzanie tekstem:
Odstępy między literami, np:
<p style="letter-spacing: 3mm">3-milimetrowe odstępy między literami.</p>
Dekoracja tekstu, np:
<a style ="text-decoration: none" href="http://www.wp.pl"> To link do WP </a>
Możliwe wartości: underline,overline,line-through.
Transformacja tekstu, np:
Istnieją cztery transformacje tekstu: none (brak), capitalize (pierwsze litery duże), uppercase
(wszystko dużymi literami), lowercase (wszystko małymi literami). Np:
<p style ="text-transform: capitalize">To jest jakiś tekst.</p>
Zarządzanie tłem
body {
color: #2D45A9;
background-color: #DDDDDD;
background-image: url("tlo.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
Albo
<h3 style ="background-image: url(kot.gif); background-repeat: repeat-x">Tytuł 3</h3>
Marginesy:
Możemy definiować następujące marginesy: margin-top (górny), margin-bottom (dolny),
margin-left (lewy), margin-right (prawy), np:
<p style="margin-top: 1cm">Akapit</p>
<p style="margin: 2cm"> Dwucentymetrowy margines ze wszystkich stron </p>
<p style="margin: 2cm 3cm"> Dwucentymetrowy margines z góry i dołu oraz
trzycentymetrowy z lewej i prawej </p>
<p style="margin: 2cm 3cm 1cm 4cm"> Indywidualne marginesy dla każdej ze stron.</p>
Można także zdefiniować tzw. wewnętrzne marginesy posługując się poleceniem padding-x,
gdzie x jest analogiczne do polecenia margin-x. Sposób mieszania atrybutów jest identyczny.
Obramowanie
Pozycjonowanie względne:
<SPAN style="position: relative; left: 200px; top: 300px; width: 100px"> jakiś tam
akapit……..</SPAN>
Pozycjonowanie absolutne
<div style="position: absolute; left:0%; top:0%"><img src="obrazek.gif" border="0"
alt="Obrazek"></div>