koniec - Kurs HTML i CSS
Znaki specjalne HTML / Flagi - emotikony (emoji)...generatora. Wskaż myszką wybrany symbol w kolumnie "Wygląd", aby go powiększyć: Numer Objaśnienie Wygląd Flagi 🏁 Flaga koniec wyścigu 🏁 🚩 Trójkątna flaga na stanowisku 🚩 🎌 Skrzyżowane chorągiewki 🎌 🏴 Powiewająca czarna flaga 🏴 🏳 Powiewająca biała flaga 🏳 Źródło: Unicode Character Database
- Tekst HTML / Wykaz <ul, ol, li>
...<li style="color: blue"><span style="color: black">Punkt trzeci</span></li> </ul> Punkt pierwszy Punkt drugi Punkt trzeci Wykaz w akapicie Na koniec ważna wskazówka. Często może się zdarzyć tak, że chcemy umieścić wykaz wewnątrz akapitu. Efekt będzie prawdopodobnie inny niż oczekiwaliśmy. Akapit nie jest zwykłym elementem blokowym, ponieważ nie może zawierać innych elementów blokowych (m.in. wykazów). Zakończy się on po napotkaniu pierwszego elementu blokowego, nawet przed znacznikiem...
- Formularze HTML / Alternatywny sposób wysłania formularza
...0A"; break; } } window.location.href = f.action + (f.action.indexOf('?') == -1 ? '?' : '&') + 'body=' + text; } </script> Na koniec musisz tylko dodać do znacznika <form> formularza atrybut: onsubmit="mail_form(this); return false", np.: <form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="mail_form(this); return false"> (Pola formularza) </form> Działanie tego skryptu nie jest identyczne jak w przypadku prostego formularza...
- HTML5 / Sekcja <section>
<section>...</section> Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...lub INPUT (z atrybutem type="button") przypisujemy atrybut popovertarget="..." o wartości takiej samej, jak identyfikator id="..." popovera. Na koniec do przycisku możemy opcjonalnie dodać atrybut popovertargetaction="..." określający akcję, która po kliknięciu w przycisk ma zostać wykonana na popoverze. Warto zwrócić uwagę, że tym samym popoverem może sterować wiele przycisków - np. jeden może go otwierać, a drugi zamykać. Okienko popover domyślnie nie ma przypisanego żadnego bardziej...
Selektory pseudoklas CSS / Łączenie selektorówNa koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
...Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym nie będzie...
- Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}
...przerw między nimi. Jeżeli widzisz cyfry wyrównane we wszystkich kolumnach, znaczy to, że Twoja przeglądarka radzi sobie z tym lepiej. I na koniec dla porównania ten sam tekst, ale w ogóle bez użycia font-variant-numeric: 1 1 1 1 1 11111 9 9 9 9 9 99999
Indeks, wyszukiwarka / Automatyczne sortowanieJak już wspomniono, dla poprawnego działania indeksu konieczne jest, aby hasła na liście były ułożone w kolejności alfabetycznej. Można ustawić specjalną opcję, tak aby sortowanie alfabetyczne odbywało się automatycznie: var indeks = new Indeks('indeks'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), null, null, true); Ustawienie tej opcji może znacznie wydłużyć generowanie indeksu! Aby wyeliminować tę niedogodność, a jednocześnie nie musieć...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...określenia tła właściwie dla każdego elementu, a dodatkowo można ustalić, aby nie było ono powtarzane oraz określić dokładną jego pozycję. Na koniec pozostaje tylko wykonanie wolnej przestrzeni z lewej strony punktów wykazu, tak aby zmieściły się tam obrazki markerów - tutaj właśnie można określić dowolny interesujący nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów. Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając...