Formularze i UI w CSS

Karta pracy 2014/2015

Dokument:
http://www.plotkarka.eu/kp/formatowanieformularzy.html
Autor:
Radosław Kowaluk

Formularze

 

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

Właściwości formularza

W elemencie style dodaj kod:

<style type="text/css">
form {
border: 1px solid silver;
padding: 5px;
max-width: 610px;
margin: auto;
}
</style>

Zapisz zmiany i odśwież podgląd.

Właściwości elementów formularza

W elemencie style dodaj kod:

}
input, select, textarea, option, button {
background-color: rgb(153,153,153);
color: rgb(102,102,102);
margin: 5px;
}
</style>

Zapisz zmiany i odśwież podgląd.

Wskazanie elementu1

W elemencie style dodaj kod:

}
input:hover, select:hover, textarea:hover,
 option:hover, button:hover {
background-color: rgb(204,204,204);
color: rgb(51,51,51);
}
</style>

Zapisz zmiany i odśwież podgląd.

Fokus elementu2

W elemencie style dodaj kod:

}
input:focus, select:focus, textarea:focus,
 option:focus, button:focus {
background-color: rgb(255,255,255);
color: rgb(0,0,0);
}
</style>

Zapisz zmiany i odśwież podgląd.

Aktywacja elementu3

W elemencie style dodaj kod:

}
input:active, select:active, textarea:active,
 option:active, button:active {
background-color: rgb(0,0,255);
color: rgb(255,0,0);
}
</style>

Zapisz zmiany i odśwież podgląd.

Język elementu4

W elemencie style dodaj kod:

}
option:lang(en) {
color: rgb(255,0,0);
}
</style>

Zapisz zmiany i odśwież podgląd.

Pierwsze dziecko5

W elemencie style dodaj kod:

}
option:first-child  {
background-color: rgb(0,255,0);
}
</style>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.

  1. Selektor pseudoklasy CSS :hover – definiuje styl CSS elementów wskazanych kursorem myszy.
  2. Selektor pseudoklasy CSS :focus – definiuje styl CSS elementów posiadających "focus".
  3. Selektor pseudoklasy CSS :active – definiuje styl CSS elementów aktywnych.
  4. Selektor pseudoklasy CSS :lang – definiuje styl CSS elementów posiadającyhc atrybut o określonym kodzie języka.
  5. Selektor pseudoklasy CSS :first-child – definiuje styl CSS elementu, który jest pierwszym dzieckiem.

Interfejs użytkownika

Kursor elementu1

W elemencie style dodaj kod:

}
a  {
padding: 2px;
cursor: help;
}
</style>

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

Zapisz zmiany i odśwież podgląd.

Obrys elementu5

W elemencie style dodaj kod:

}
a:active{
outline: 2px inset silver;
}
</style>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.

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