przyciski - Kurs HTML i CSS
Aktywne przyciski / PodświetlenieAby wprowadzić na stronę przyciski obrazkowe, które zmieniają swój wygląd, po wskazaniu ich myszką, wystarczy dodać do znacznika <img> dwa dodatkowe atrybuty: onmouseover="..." i onmouseout="...": <a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'"></a> Przykład
- Menu rozwijane, otwierane, wysuwane / Przykład menu rozwijanego
...BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu0');
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
...BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu3', '', false, true);
HTML5 / Automatyczne zogniskowanie <... autofocus>...kursor tekstowy zostanie automatycznie umieszczony w tak zaznaczonym polu formularza. Chociaż typowym zastosowanie atrybutu autofocus są pola i przyciski formularza - takie jak: INPUT (z wyjątkiem type="hidden"), SELECT, TEXTAREA, BUTTON - to tak naprawdę można go użyć dla dowolnego znacznika. Może to poprawić dostępność strony, doświadczenia użytkownika czy funkcjonalność nawigacji. Częstym zastosowanie może być również użycie go w połączeniu z atrybutem contenteditable="true". Przykład...
Selektory pseudoklas CSS / Domyślne :default...Chrome 51) selektor:default { cecha: wartość } Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej, a także przyciski [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w formularzu może się również znajdować...
- Menu w CSS / Pionowe menu
...elementu, czyli: 200px - 2*2px - 2*5px = 186px Ustalamy kolor, tło, margines wewnętrzny (padding) i obramowanie odnośników, tak aby wyglądały jak przyciski. Dodatkowo usuwamy domyślne podkreślenie linków (text-decoration: none), które w tym przypadku jest niepożądane. Na koniec zmieniamy styl obramowania, które zostanie wyświetlone po wskazaniu tekstu myszką oraz tworzymy niesymetryczny margines wewnętrzny (padding), przesuwając tekst odnośników nieco w prawo i w dół, dzięki czemu...
- Menu rozwijane, otwierane, wysuwane / Czas rozwijania/zwijania
...BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu2', '', false, false, 100, 0);
- Menu rozwijane, otwierane, wysuwane / Menu otwierane
...BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu4', '', true); Opóźnienie przy otwieraniu/zamykaniu Dla tej wersji menu można dodatkowo zmienić opóźnienie, które występuje bezpośrednio przed rozpoczęciem otwierania oraz zamykania menu. Czas ten jest konieczny, aby posługiwanie się takim menu przez użytkownika mogło przebiegać komfortowo. Zbyt...