element - Kurs HTML i CSS
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ść...
- 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...
- CSS dla zielonych / Klasy selektorów CSS <div class>
Niemal na każdej stronie WWW znajdują się pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów. Załóżmy, że mamy...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
(CSS 3 - interpretuje Firefox 27, Opera 28, Chrome 41) selektor { cecha: unset } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Nie wszystkie cechy CSS podlegają dziedziczeniu. Wydaje się logiczne, że jeśli ustawimy określony kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
(CSS 3 - interpretuje Firefox 27, Opera 24, Chrome 37) selektor { all: wartość } Selektor oznacza wybrany element, któremu chcemy zresetować sposób formatowania. Natomiast jako wartość należy podać: initial - przywrócenie wartości domyślnych inherit - wymuszenie dziedziczenia wartości unset - odwołanie wartości revert - przywrócenie wartości pierwotnych Sposoby przywracania domyślnych wartości bądź domyślnego zachowania, opisane wcześniej w tym rozdziale, mogą się okazać bardzo pomocne...
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...
Losowy elementSpis treści Losowy element Kilka losowych elementów Wszystkie elementy w kolejności losowej Losowy element Często przydatną funkcją na stronie WWW może okazać się wyświetlenie losowego tekstu lub obrazka. Można w ten sposób np. zbudować bazę cytatów albo porad i prezentować je użytkownikowi losowo - jeden przy każdym wejściu na stronę. Innym zastosowaniem może być rotacja bannerów lub buttonów. Jeśli chcesz umieścić na swojej stronie kilka bannerów, ale masz na to tylko jedno miejsce...
- Operacje na tablicach w JavaScript - Array.prototype / Sortowanie elementów tablicy - sort
Array.prototype.sort() Array.prototype.sort(comparefn) Parametry: Function comparefn - funkcja porównująca dwa elementy tablicy (domyślnie elementy są sortowane w porządku alfabetycznym); zwraca: liczbę mniejszą od zera - gdy pierwszy element jest mniejszy niż drugi zero - gdy oba elementy są równe liczbę większą od zera - gdy pierwszy element jest większy niż drugi Wartość: Array - posortowana tablica Układa elementy tablicy w określonym porządku. Domyślnie odbywa się to...
- Operacje na tablicach w JavaScript - Array.prototype / Sprawdzanie warunku dla przynajmniej jednego elementu - some
...Array.prototype.some(callbackfn, thisArg) Parametry: Function callbackfn - funkcja testująca przyjmująca argumenty: kValue - element tablicy Number k - indeks elementu tablicy Array O - oryginalna tablica thisArg - wartość bieżącego obiektu this dostępnego w czasie wywołania wewnątrz ciała funkcji (domyślnie: undefined) Wartość: Boolean - czy przynajmniej dla jednego elementu tablicy funkcja testująca zwraca wartość true Wyjątki: TypeError - callbackfn nie jest...