element - Kurs HTML i CSS
Selektory pseudoklas CSS / Korzeń :root(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) :root { cecha: wartość } Wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Każdy dokument HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML...
- Układ wielokolumnowy CSS / Łączenie kolumn {column-span}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 71, Opera 11-12 i 37, Chrome 50) selektor { column-span: all } Selektorem może być dowolny element blokowy, bez ustawionego oblewania ani pozycjonowania absolutnego. Aby odwołać łączenie kolumn, należy podać wartość none. Zdarzają się sytuacje, kiedy chcemy wyskoczyć z ustalonego podziału tekstu na kolumny. Może to mieć miejsce np. w przypadku tytułów, które rozpoczynają kolejny artykuł albo nową sekcję w artykule. Mamy możliwość...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...obramowania: górną, prawą, dolną, lewą Nawis obramowania obrazkowego to jego część wystająca na zewnątrz poza krawędzie tradycyjnego obramowania elementu. Dodanie nawisu nie wpływa na położenie elementu - element najpierw jest renderowany w określonym miejscu na stronie, a dopiero potem jest do niego ewentualnie dorysowywany nawis. Skutkiem tego może być zmniejszenie się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie...
HTML5 / Sekcja <section>...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 czynienia z podrozdziałami. Podział treści na sekcje jest niezwykle przydatny czytelnikowi. Akapity w obszernym tekście ułatwiają odbiór treści. Łatwiej jest oderwać na chwilę wzrok, po przeczytaniu całego akapitu, a potem szybko odnaleźć miejsce, gdzie...
- 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 / Szablon strony w HTML5
...na DIV-ach. Tam również znajdziesz praktyczne przykłady sposobów układania poszczególnych sekcji szkieletu na stronie. Objęcie całego szkieletu elementem DIV, jest poprawne, ponieważ w tym miejscu ma on na celu przygotowanie pojemnika, koniecznego do zmiany wyglądu całej strony (przy pomocy CSS). Właśnie do tego został przeznaczony ten element. Zwykle objęcie całej zawartości ciała dokumentu znacznikiem ARTICLE, nie jest najlepszym rozwiązaniem. Został on przewidziany po to, aby...
- Układ elastyczny CSS / Marginesy automatyczne
...blok 1 blok 2 blok 3 margin-left: auto Pytania i odpowiedzi Co oznacza "margin: auto"? W kontekście flexbox, "margin: auto" oznacza, że element zostanie wyśrodkowany wzdłuż osi głównej (głównego kierunku) kontenera. Działa to poprzez równomierne rozłożenie dostępnego miejsca po obu stronach elementu, co skutkuje wyśrodkowaniem. Jak ustawić elementy obok siebie CSS? Aby ustawić elementy obok siebie w kontekście flexbox CSS, można to osiągnąć ustawiając "margin-right: auto" na...
- HTML5 / Główna treść <main>
...możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć...
Zastosowanie tablic w JavaScript - Array / Tworzenie instancji tablicy w JavaScript - new Array...new Array new Array length new Array new Array() new Array(len) new Array(item0) new Array(item0, item1...) Parametry Number len - liczba elementów tablicy item0, item1... - lista elementów tablicy Wartość: Array - nowa instancja tablicy Wyjątki: RangeError - wartość len nie jest liczbą naturalną Tablica jest rodzajem kolekcji (pojemnika) do przechowywania innych elementów. Elementy tablicy są ponumerowane tzw. indeksami. Pierwszy element otrzymuje indeks 0, drugi - 1, trzeci...
- Operacje na tablicach w JavaScript - Array.prototype / Przekształcanie tablicy na tekst w rodzimym języku - toLocaleString
Array.prototype.toLocaleString() Wartość: String - tekstowa reprezentacja elementów tablicy zgodnie z rodzimym językiem użytkownika Wyjątki: TypeError - element tablicy nie posiada metody toLocaleString Działa analogicznie jak Array.prototype.toString, ale przekształca każdy element tablicy na tekst, zgodnie z ustawieniami rodzimego języka użytkownika systemu. Na przykład w języku polskim liczby rzeczywiste zapisujemy z użyciem znaku przecinka, podczas gdy angielskim - z użyciem kropki...