przykład - Kurs HTML i CSS
Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-outset: nawis } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "nawis" należy podać wartość szerokości wystającej poza krawędź tradycyjnego obramowania, wyrażoną w jednostkach długości lub jako liczba naturalna (podająca wielokrotność szerokości obramowania). Możliwe jest przy tym podanie: jednej wartości - określa jednakową szerokość nawisu poza...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-repeat: powtarzanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie) repeat - obrazek zostanie powielony na całej powierzchni round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością...
HTML5 / Nagłówek <header><header>...</header> Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6 albo HGROUP), ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo. Sam element HEADER nie stanowi nagłówka sekcji. Może to być nieco mylące, ponieważ z kolei element FOOTER stanowi stopkę sekcji. Elementami definiującymi nagłówek sekcji są: H1, H2, H3, H4, H5, H6. W szczególności znacznik HEADER nie tworzy...
- HTML5 / Stopka <footer>
<footer>...</footer> Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp. Mimo z pozoru analogicznej...
- HTML5 / Data i czas <time>
Spis treści <time> Data i czas <time> Format daty i czasu Generator daty i czasu HTML5 Data i czas <time> <time>data/czas</time> <time datetime="data/czas">...</time> "data/czas" są zapisane w formacie zdefiniowanym standardem ISO8601. Na stronach internetowych bardzo często spotyka się różnorodne daty czy oznaczenia czasu: publikacja artykułu, wysłanie komentarza, zaplanowane wydarzenia i ich godzinowy rozkład dnia. Takie dane mogłyby zostać wykorzystane np. do automatycznego...
- HTML5 / Możliwy koniec linii <wbr>
(interpretuje: Internet Explorer 6-7 ale nie 8-11, Firefox 2, Opera 10, Chrome 4) <wbr> Normalnie przeglądarki zawijają długie linijki tekstu, jeśli nie mieszczą się w szerokości okna. Jednak w niektórych warunkach przełamanie tekstu może nie być możliwe. Wtedy najczęściej pojawi się poziomy suwak do przewijania strony. Z takim przypadkiem możemy mieć do czynienia wewnątrz znacznika PRE, gdy zablokujemy zawijanie tekstu przy pomocy CSS albo gdy w długiej linijce nie umieścimy żadnego białego...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-direction, flex-wrap, flex-flow} Kierunek elastyczny {flex-direction} Zawijanie elastyczne {flex-wrap} Atrybuty mieszane przepływu elastycznego {flex-flow} Kierunek elastyczny {flex-direction} selektor { flex-direction: kierunek } Selektorem musi być kontener elastyczny. Kierunek określa sposób układania kolejnych elementów wewnątrz układu elastycznego: row - elementy będą układane w wierszach...
- Układ elastyczny CSS / Marginesy automatyczne
selektor { margin-top: auto } selektor { margin-right: auto } selektor { margin-bottom: auto } selektor { margin-left: auto } selektor { margin: auto } Selektorem mogą być dzieci kontenera elastycznego. Ustawiając wybrany margines na wartość automatyczną sprawimy, że wypełni on wolną przestrzeń pozostałą w kontenerze. Dzięki temu w bardzo prosty sposób możemy ustawić kilka bloków w jednej linii - część przy lewej krawędzi, a niektóre przy prawej. Przykład {display: flex, margin-left: auto}...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { justify-content: justowanie } Selektorem może być kontener elastyczny. Justowanie: flex-start - do początkowej krawędzi kontenera (domyślnie) flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie space-between - równe odstępy między elementami space-around - równa przestrzeń wokół elementów Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-grow, flex-shrink, flex-basis, flex} Rozciągnięcie elastyczne {flex-grow} Ściśnięcie elastyczne {flex-shrink} Baza elastyczna {flex-basis} Atrybuty mieszane elastyczności {flex} Rozciągnięcie elastyczne {flex-grow} selektor { flex-grow: rozciągnięcie } Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener). Rozciągnięcie jest wyrażone liczbą naturalną (większą lub równą zero)...