Formatowanie obramowania

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

Obramowania

Skopiuj plik formatowanietekstu.html  w folderze WWW i nazwij kopię formatowanieobramowania.html.

Obramowanie lewe1, prawe2 górne3 i dolne4

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

<style type="text/css">
h1, h2, h3, h4, h5, h6 {
margin: 5px;
padding: 5px;
}
h1 {
border-left: 2px solid red;
}
h2 {
border-right: 2px solid red;
}
h3 {
border-top: 2px solid red;
}
h4 {
border-bottom: 2px solid red;
}
h5 {
border-bottom: 1px solid silver;
border-left: 20px solid red;
}
</style>

Styl obramowania: rozmiar5, kolor6 i styl linii7.

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

a {
border-width: 4px;
border-color: silver;
}
a:link {
border-style: groove;
}
a:visited {
border-style: ridge;
}
a:hover {
border-style: inset;
}
a:active {
border-style: outset;
}

Wskazanie elementu8

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

p:hover {
outline: 1px solid silver;
}

Aktywacja elementu9

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

p:active {
border:  1px solid red;
}

Wgrywanie plików na serwer

Umieść plik formatowanieobramowania.htm na serwerze.

  1. Styl border-left - definiuje obramowanie lewe. Wartość może być równa: rozmiar styl i kolor linii.
  2. Styl border-right - definiuje obramowanie prawe. Wartość może być równa: rozmiar styl i kolor linii.
  3. Styl border-top - definiuje obramowanie górne. Wartość może być równa: rozmiar styl i kolor linii.
  4. Styl border-bottom; - definiuje obramowanie dolne. Wartość może być równa: rozmiar styl i kolor linii.
  5. Styl border-width – definiuje rozmiar lini.
  6. Styl border-color – definiuje kolor lini. Wartością jest color.
  7. Styl border-style – definiuje styl lini obramowania. Może przyjmować wartości: solid (ciągła), double (podwójna), dotted (kropkowana), dashed (kreskowana), groove (wklęsła), ridge (wypukła), inset (przycisk wciśnięty), outset (przcisk zwolniony).
  8. Pseudoklasa :hover - element wskazany.
  9. Pseudoklasa :active - element aktywny y.