Formatowanie obiektu

Karta pracy 2014/2015

Adres:
http://www.plotkarka.eu/kp/css3-positioning.html
Autor:
Radosław Kowaluk

Pozycjonowanie elementów

Czynności wstępne

Utwórz plik css3-positioning.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Pozycjonowanie elementów</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Pozycja absolutna2

W elemencie style dodaj kod.

h1, h2 {
position: absolute;
}

W elemencie body dodaj kod:

 <h1>Nagłówek h1</h1>
 <h2>Nagłówek h2</h2>

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

Odległość od prawej krawędzi3

W elemencie style dodaj kod.

h1 {
right: 100px;
}

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

Odległość od dolnej krawędzi4

W elemencie style dodaj kod.

right: 100px;
bottom: 10px;
}

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

Pozycja ustalona

W elemencie style dodaj kod.

h2 {
position: fixed;
}

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.

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

Kadrowanie

Kadrowanie1

W edytorze grafiki utwórz obraz zawierający twoje inicjały i umieść odpowiedni kod w stronie aby go wyświetlić.

W elemencie style dodaj kod:

img {
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. Popraw współrzędne aby widoczne były twoje inicjały.

Kierunek tekstu

Kierunek tekstu 2

W elemencie body w zaczniku akapitu wpisz swoje imię.

W elemencie style dodaj kod:

p {
direction: rtl; 
}

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;)