Ćwiczenia 2.2

Rok szkolny:
2010/2011
Autor:
Radosław Kowaluk

Formatowanie elementów blokowych

Skopiuj plik formatowanieakapitu.html w folderze WWW i zmień nazwę na formatowanieakapitu2.html.

Punktor graficzny1

W edytorze grafiki utwórz własny graficzny znak wypunktowania o wielkości 10 na 10 pikseli. Zapisz go w formacie GIF pod nazwą punktor.gif.
W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

<style type="text/css">
ul { 
list-style: circle url(punktor.gif);
}
</style>

Pozycja znaku listy2

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce. Dodaj w akapitach lity dłuższy fragment tekstu.

ul { 
list-style: circle url(punktor.gif) outside;
}

Odstępy międzyliterowe3

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

h1 { 
letter-spacing: 20px;
}

Spacje międzywyrazowe4

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

h2 { 
word-spacing: 20px;
}

Znaki specjalne5

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce. Przetestuj wartości stylu.

p {
white-space: pre;
}

Transformacja tekstu6

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

h3 {
text-transform: capitalize;
}

Marginesy wewnętrzne: górny7, prawy8, dolny9, lewy10.

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce. 

p {
white-space: normal;
padding-top: 10px;
padding-right: 10%;
}
h4 {
padding-bottom: 10px;
padding-left: 10%;
}

Pseudoelementy11, pierwszy znak12

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

h4:first-letter  {
color: rgb(255,0,0);
}

Pseudoelement pierwsza linia13

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

p:first-line  {
color: rgb(255,0,0);
}

Wgrywanie plików na serwer

Umieść plik formatowanieakapitu2.html na serwerze.

  1. Styl list-style-image – definiuje punktor graficzny wyliczenia. Wartość jest równa url() pliku punktora.
  2. Styl list-style-position – definiuje pozycje znaku wyliczenia Wartość może być równa: outside (wypunktowanie na zewnątrz listy) lub inside (wypunktowanie wewnątrz listy).
  3. Styl letter-spacing – definiuje odstępy międzyliterowe. Wartością jest liczba z jednostką.
  4. Styl word-spacing – definiuje odstępy międzywyrazowe. Wartością jest liczba z jednostką.
  5. Styl white-space – definiuje sposób prezentacji znaków specjalnych. Wartość może być równa: pre (jak w elemencie pre), nowrap (uniemożliwia automatyczny podział wiersza), pre-wrap (dopuszcza automatyczny podział wiersza), pre-line(uniemożliwia łamanie linii), normal (standardowe formatowanie).
  6. Styl text-transform – definiuje transformacje tekstu. Wartość może być równa: none (brak transformacji), capitalize (kapitaliki), uppercase (wersaliki, duże litery).
  7. Styl padding-top - definiuje margines wewnętrzny, górny elementu.
  8. Styl padding-right - definiuje margines wewnętrzny, prawy elementu.
  9. Styl padding-bottom - definiuje margines wewnętrzny, dolny elementu.
  10. Styl padding-left - definiuje margines wewnętrzny, dolny elementu.
  11. Pseudoelementy pozwalają odnieść się do elementów struktury dokumentu bez konieczności wprowadzania dodatkowych znaczników do kodu źródłowego; pozwalają również automatycznie generować pewną zawartość w określonych miejscach dokumentu, która nie znajduje się w kodzie źródłowym.
  12. Pseudoelement element:first-letter – definiuje formatowanie pierwszego znaku elementu.
  13. Pseudoelement element:first-line – definiuje formatowanie pierwszej linii elementu.