przykład - Kurs HTML i CSS
Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}(CSS 3 - interpretuje Firefox 67, Opera 73, Chrome 84) selektor { cecha: revert } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas...
MigotaniePrzykład Migotanie tekstu... ...inne migotanie Aby uzyskać taki efekt, wklej w nagłówku dokumentu: <script> function flash(id, kolor, czas, kolor2, czas2) { document.getElementById(id).style.color = kolor; setTimeout('flash("' + id + '","' + kolor2 + '",' + czas2 + ',"' + kolor + '",' + czas + ')', czas); } </script> a następnie w wybranym miejscu strony: <div id="identyfikator">Migotanie</div> <script> flash("identyfikator", "kolor1", czas1, "kolor2", czas2); </script> przy...
- AutoIFRAME / Automatyczne dopasowanie wysokości ramki HTML
...stosowanym na wielu stronach, jest budowanie struktury serwisu w oparciu o tabele (lub elementy <div>...</div>) i ramki <iframe>...</iframe> (przykład takiego właśnie szablonu znajdziesz w rozdziale Struktura tabeli). Jest to wygodne o tyle, że pozwala szybko zbudować stronę elastyczną w aktualizacji, bez wykorzystania języków skryptowych po stronie serwera (np. PHP). Niestety takie rozwiązanie ma przynajmniej jedną poważną wadę: trudno jest dopasować wysokość ramki IFRAME tak, aby była...
- AutoIFRAME / Kilka ramek AutoIFRAME
...dostosowywania wysokości musi zachodzić niezależnie. Aby to zrobić, należy dla każdej takiej ramki należy ustawić odrębny identyfikator id="...". Na przykład tak mógłby wyglądać fragment strony głównej serwisu: <iframe src="..." name="..." id="autoiframe" width="100%" height="560">...</iframe> <iframe src="..." name="..." id="autoiframe2" width="100%" height="560">...</iframe> Nic nie stoi na przeszkodzie, aby wstawić więcej niż dwie ramki <iframe>...</iframe> - każda kolejna z innym...
- Nowe okno / Jedno okno
Spis treści Jedno okno Pop-under Jedno okno Po załadowaniu strony: <body onload="window.open('adres', 'nazwa').focus()>...</body> Przed załadowaniem strony: <head> <script> window.open('adres', 'nazwa').focus(); </script> </head> Po kliknięciu odsyłacza: <a target="nazwa" href="adres" onclick="window.open('adres', 'nazwa').focus(); return false">opis</a> adres Lokalizacja dowolnej podstrony serwisu lub adres internetowy. Jeśli nie chcemy wczytywać do nowego okna żadnego...
- Wyszukiwarka / Wyszukiwanie w podanym serwisie
<form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <input type="hidden" name="sitesearch" value="domena"> <input type="submit" value="Szukaj"> </form> gdzie jako "domena" należy wpisać adres strony, np. www.google.pl. Wyszukiwanie stron z Twojego serwisu może być niemożliwe jeśli nie posiadasz domeny lub subdomeny! Ponadto należy pamiętać, że aby przeszukiwanie serwisu mogło się odbyć, najpierw należy...
- Rozwijane menu
Wykorzystując element <select>...</select> można stworzyć rozwijane menu, które działa w ten sposób, że po wyborze konkretnej opcji z listy, następuje wczytanie określonej strony (podobnie jak w przypadku odsyłaczy). Może to być przydatne np. jeżeli chcemy zaoszczędzić trochę miejsca na stronie (lista rozwijalna zajmuje tylko jedną linijkę). Ale uwaga! Jeśli przeglądarka użytkownika nie będzie obsługiwać skryptów JavaScript, strony z takiego menu będą niedostępne. Dlatego zaleca się umieścić w...
- Menu rozwijane, otwierane, wysuwane / Menu wielopoziomowe
Prezentowany skrypt obsługuje również wielopoziomowe struktury menu. Zasada zagnieżdżania polega na zbudowaniu najpierw pierwszego, płaskiego poziomu, a następnie wybraniu określonego elementu <dd>...</dd> i umieszczeniu w nim podrzędnej listy <dl>...</dl>, ze swoimi nagłówkami <dt>...</dt> i elementami <dd>...</dd>. Oczywiście ilość poziomów zagnieżdżenia nie jest niczym ograniczona. W celu osadzenia wielopoziomowego menu, należy powtórzyć wszystkie przedstawione wcześniej kroki. Zmianie...
- Menu rozwijane, otwierane, wysuwane / Czas rozwijania/zwijania
Aby przyspieszyć lub zwolnić rozwijanie/zwijanie pozycji menu, należy powtórzyć wszystkie przedstawione kroki, poza ostatnim (wywołanie skryptu), który tym razem należy wykonać następująco: <script> new Menu('menu0', '', false, false, czasRozwin, czasZwin); </script> czasRozwin Czas w milisekundach (1 s = 1000 ms), w którym następuje rozwinięcie pojedynczego elementu menu (<dd>...</dd>). Aby wymusić natychmiastowe rozwinięcie wszystkich elementów, należy podać wartość 0 (zero). czasZwin...
- Menu rozwijane, otwierane, wysuwane / Menu otwierane
Spis treści Menu otwierane Opóźnienie przy otwieraniu/zamykaniu Menu otwierane Czasem przydatne jest wstawienie menu, które otwiera się po wskazaniu nagłówka myszką, a chowa automatycznie po usunięciu wskaźnika myszki z obrębu wybranego fragmentu menu. <script> new Menu('menu0', '', true); </script> Przykład Wskaż poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje...