przyciski - Kurs HTML i CSS
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
Formularze HTML / Przycisk <button>...operacyjnych i przeglądarkach wygląd przycisków o dużych rozmiarach może być bardzo nieestetyczny! Pytania i odpowiedzi <button> Jak zrobić przyciski w HTML? Aby wstawić w dokumencie HTML przycisk, po kliknięciu którego nastąpi przejście do innej strony, można się posłużyć odsyłaczem obrazkowym. Co to jest BUTTON w HTML? Jest to znacznik, za pomocą którego możemy wstawić przycisk wewnątrz formularza. W języku HTML istnieją trzy typy przycisków, które ustawia się za pomocą...
- 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
- 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 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 małe opóźnienie - zwłaszcza...
Oprawa graficzna / Zamiennik obrazkowy...pod tekstem jest dość proste i oczywiste. Często jednak trzeba osadzić elementy graficzne, nad którymi nie będzie widniał żaden tekst - np. przyciski, logo, ikony itp. W takim przypadku mogłoby się wydawać, że wystarczy wstawić pusty element do kodu HTML, jednak jest to bardzo zły pomysł. Takie rozwiązanie jest niepoprawne semantycznie. Staje się dużą przeszkodą dla osób niewidomych, ale również dla robotów indeksujących wyszukiwarek internetowych, co niekorzystanie odbije się na...
- Ikony (symbole) / Akcje interfejsu użytkownika
...arrow_upward_alt arrow_upward_alt Wskaźnik zegarowy 60 clock_loader_60 clock_loader_60 Informacje o stronie page_info page_info Kliknięcie lewym przyciskiem left_click left_click Strzałka w dół alternatywnie arrow_downward_alt arrow_downward_alt Szybkie odniesienie quick_reference quick_reference Synchronizacja zapisana lokalnie sync_saved_locally sync_saved_locally Portal przechwytywania captive_portal captive_portal Ustawienia reguł rule_settings rule_settings Alert danych...
- 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...
- 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...