Formatowanie obiektu

Karta pracy 2014/2015

Adres:
http://www.plotkarka.eu/kp/formatowanieobiektu.html
Autor:
Radosław Kowaluk

Pozycjonowanie elementów

 

Skopiuj plik formatowanieobiektu.zip i rozpakuj go do folderu z plikami WWW. Zapoznaj się z zawartością i źródłami plików.

Identyfikator elementu i selektor identyfikatora1

W znaczniku object dodaj kod:

 height="100"
 id="tlo">

W elemencie style dodaj kod:

}
 #tlo {
 }
 #logo {
 }
</style>

Pozycja absolutna2

W elemencie style dodaj kod.

#logo {
 position: absolute;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od prawej krawędzi3

W elemencie style dodaj kod.

position: absolute;
right: 10px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od dolnej krawędzi4

W elemencie style dodaj kod.

right: 10px;
bottom: 10px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Pozycja ustalona

W elemencie style dodaj kod.

}
#tlo {
position: fixed;
}
</style>

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od lewej krawędzi5

W elemencie style dodaj kod.

position: fixed;
left: 0px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od górnej krawędzi6

W elemencie style dodaj kod.

left: 0px;
top: 0px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Kolejność elementów7

W elemencie style dodaj kod.

top: 0px;
z-index: -1;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Rozciągnięcie tła

W znaczniku object zmień kod.

 data="tlo.swf"
 width="100%"
 height="100%"
 id="tlo">

Zapisz zmiany i odśwież podgląd w przeglądarce.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.


  1. Atrybut id – definiuje identyfikator elementu. Wartością atrybutu jest nazwa identyfikatora. Selektor identyfikatora (#nazwa) określa formatowanie elementu o danym identyfikatorze.
  2. Styl CSS {position:} – definiuje sposób pozycjonowania elementu. Wartości stylu mogą być równe: static - statyczna, relative - relatywna, absolute - absolutna, fixed - ustalona.
  3. Styl CSS {right:} – definiuje odległość elementu od prawej krawędzi. Wartości stylu mogą być równe: auto, length, percentage.
  4. Styl CSS {bottom:} – definiuje odległość elementu od dolnej krawędzi. Wartości stylu mogą być równe: auto, length, percentage
  5. Styl CSS {left:} – definiuje odległość elementu od lewej krawędzi. Wartości stylu mogą być równe: auto, length, percentage.
  6. Styl CSS {top:} – definiuje odległość elementu od górnej krawędzi. Wartości stylu mogą być równe: auto, length, percentage.
  7. Styl CSS {z-index:} – definiuje kolejność elementów. Wartości stylu mogą być równe: auto, integer - liczba całkowita.

Kadrowanie

Kadrowanie1

W elemencie style dodaj kod:

#logo {
position: absolute;
right: 10px;
bottom: 10px;
clip: rect(5px,65px,45px,0px);
z-index: 2;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Kierunek tekstu

Kierunek tekstu 2

W elemencie style dodaj kod:

}
p {
direction: rtl; 
}
</style>

Zapisz zmiany i odśwież podgląd w przeglądarce.

Kierunek liter 3

W elemencie style dodaj kod:

direction: rtl;
unicode-bidi: bidi-override;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.


  1. Styl CSS {clip:} – definiuje kadrowanie elementu. Wartości stylu mogą być równe: auto - brak kadrowania, rect(top, right, bottom, left) - funkcja definiuje prostokąt kadrujący. Argumentami są liczby z jednostką określające odpowiednio ukrycie od krawędzi: górnej, prawej, dolnej i lewej.
  2. Styl CSS {direction:} – definiuje kierunek tekstu. Wartości stylu mogą być równe: ltr - od lewej do prawej, rtl - od prawej do lewej.
  3. Styl CSS {unicode-bidi:} – definiuje kierunek liter. Wartości stylu mogą być równe: normal - litery w domyślnej kolejności, embed - litery w kolejności direction, bidi-override - litery w odwrotnej kolejności (gdy direction:rtl;)