UI w CSS

Karta pracy 2016/2017

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

Interfejs użytkownika

Czynności wstępne

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

<!DOCTYPE html>
<html>
 <head>
  <title>Interfejs użytkownika</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Kursor elementu1

W elemencie style dodaj kod:

a:link {
cursor: help;
}
</style>

W elemencie body dodaj kod.

<a href="http://plotkarka.eu/">PLOTKARKA.EU</a>

Zapisz zmiany i odśwież podgląd.

Rozmiar2, styl3, kolor4 obrysu elementu

W elemencie style dodaj kod:

cursor: help;
outline-width: 2px;
outline-style: outset;
outline-color: silver;
padding: 3px;
}

Zapisz zmiany i odśwież podgląd.

Obrys elementu5

W elemencie style dodaj kod:

a:active {
outline: 2px inset;
}
a:visited {
outline: 2px outset silver;
}
a:hover {
outline: 2px outset blue;
}

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css3-ui.html na serwerze po sprawdzeniu poprawności.

Zadanie

Zastosuj poznane wiadomości w swojej witrynie.

  1. Styl CSS {cursor:} – definiuje kursor elementu. Wartość styl kursora może być równa:
    • auto - wygląd uzależniony od kontekstu,
    • default - wygląd domyślny,
    • url() - adres własnego wyglądu kursora (podanie na końcu deklaracji ogólnego rodzaju kursora jest wskazane),
    • n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-resize | nw-resize - zmiana orientacji kursora wyznaczona przez strony świata,
    • crosshair - kursor w postaci krzyża,
    • progress - kursor postępu podczas przetwarzania danych,
    • pointer - kursor w postaci wskaźnika,
    • move - kursor dla elementów, które można przemieszczać,
    • text - kursor dla elementów tekstowych,
    • wait - kursor oczekiwania,
    • help - kursor pomocy.
  2. Styl CSS {outline-width:} – definiuje rozmiar obramowania. Wartością jest liczba z jednostką.
  3. Styl CSS {outline-style:} – definiuje styl 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)
  4. Styl CSS {outline-color:} – definiuje kolor obramowania. Wartością jest color.
  5. Styl CSS {outline:} – definiuje obrys elementu. Wartość jest równa: rozmiar, styl i kolor linii (opcjonalnie).