arkusze - Kurs HTML i CSS
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...Skrypt menu rozwijanego, otwieranego, wysuwanego Wymagana wiedza Listy definicyjne <dl>...</dl> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, postępuj według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link...
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
Normalnie pozycje menu są rozwijane począwszy od pierwszej do ostatniej, a zwijane od ostatniej do pierwszej. Można odwrócić te kolejności, dzięki czemu uzyskamy efekt wysuwania: <script> new Menu('menu0', '', false, true); </script> Przykład HTML Dla zielonych 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
Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset...arkusz stylów <link "stylesheet"> <head> (...) <link rel="stylesheet" href="style.css"> (...) </head> gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej. Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie...
- Menu drzewiaste / Skrypt menu drzewiastego
...Kolekcje dokumentów Wyrażenia regularne Wymagana wiedza Zagnieżdżanie wykazów <ul>...</ul> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li...
- Oprawa graficzna / "Duszki" CSS
...szerokim (jedna obok drugiej). W ten sposób, nie licząc tła graficznego powielanego w obu kierunkach, każdy serwis można zbudować w oparciu o trzy arkusze z "duszkami" CSS: zwykły, poziomy i pionowy. Ponadto na jednym arkuszu nie warto mieszać ręcznie rysowanych ikon (które zwykle zapisujemy w formacie GIF lub PNG) z wielokolorowymi zdjęciami (zwykle zapisywane w JPG), ponieważ wtedy albo rozmiar pliku niewspółmiernie wzrośnie albo znacznie stracimy na jakości. Najczęściej jednak, chyba...
- Wstawianie stylów CSS / Import arkusza stylów @import
...dodatkowych znaczników <link rel="Stylesheet">. W takim przypadku dołącza się tylko jeden zewnętrzny plik *.css, a w nim importuje pozostałe arkusze. UWAGA! Jeżeli polecenie importu znajduje się w zewnętrznym arkuszu stylów, to relatywną ścieżkę dostępu do arkusza importowanego należy konstruować względem położenia arkusza CSS, w którym jest wstawione polecenie @import, a nie względem dokumentu HTML! Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na...
- Jednostki CSS / Kąty
Wartości kątowe są używane przez słuchowe arkusze stylów (aural). Format wartości kątowej składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki kąta. Wartość kątowa może być ujemna. Jednostkami kątów są: deg - stopnie (1deg = 1.11111...grad = 0.01745...rad) grad - gradusy (1grad = 0.9deg = 0.01571...rad) rad - radiany (1rad = 57.29578...deg = 63.66198...grad) turn - obroty (CSS 3) Kąt pełny: 360deg = 400grad = 2πrad = 1turn...
- Media CSS / Typy mediów
...są odbiciem urządzeń docelowych, dla których stosowne własności mają sens (CSS 2): all Dla wszystkich urządzeń aural Syntezatory mowy (słuchowe arkusze stylów) - CSS 2.1 wprowadza zamiast tego typ speech braille Urządzenia do czytania braillem (dla niewidomych) embossed Drukarki brailla handheld Urządzenia ręczne (zwykle mały ekran, czarno-białe, ograniczone pasmo) print Materiały drukowane nieprzezroczyste i podgląd wydruku projection Prezentacje projektorowe lub nadruki na folii...
- 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...
HTML5 / Nowe elementy HTML5Spis treści Wstęp Sekcje Nagłówki sekcji Znaczniki grupujące Semantyka tekstu Elementy osadzone Formularze Pole INPUT Elementy interaktywne Skrypty Wstęp Standard HTML5 nie jest już taki nowy, ale nadal mogą być do niego wprowadzane nowe znaczniki. Przeglądarki które ich jeszcze nie odsługują, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów określonym w specyfikacji. Aby ujednolicić sposób wyświetlania...