linii - Kurs HTML i CSS
Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Układ elastyczny w bloku: selektor { display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
...jakbyśmy pisali tekst w wierszach, zaczynając od dołu kartki papieru) Polecenie pozwala sterować ułożeniem wierszy bloków w sposób podobny do linii w tekście akapitu. Atrybuty mieszane przepływu elastycznego {flex-flow} selektor { flex-flow: wartości atrybutów } Polecenie to pozwala od razu podać kierunek i zawijanie elementów w układzie elastycznym. Przykład {flex-flow} "flex-flow: row nowrap" - zwróć uwagę, że wszystkie elementy są identycznej wysokości: To jest blok nr 1 blok...
- Układ elastyczny CSS / Marginesy automatyczne
...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} 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...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...(domyślnie - "1"). Jeżeli kontener elastyczny jest zbyt wąski, jego dzieci są ściskane. Zwykle odbywa się to poprzez przełamanie do nowej linii tekstu, który zawiera się w tych blokach. Baza elastyczna {flex-basis} selektor { flex-basis: baza } Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener). Baza jest wartością określoną w jednostkach długości albo słowem kluczowym "auto" (domyślnie). Baza określa początkowy rozmiar elementu w kontenerze, zanim wolna...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wiersza (dla tekstu w języku polskim - w pionie) baseline - zrównanie linii bazowych (poziomych prostych, łączących podstawy liter tekstu) stretch - rozciągnięcie do obu krawędzi jednocześnie (domyślnie) Polecenie steruje wyrównaniem jednego wiersza wewnątrz kontenera elastycznego, kiedy mają one różną wysokość. Przykład {align-items} align-items: flex-start To jest blok nr 1 blok 2 blok 3 align-items...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości odzwierciedlającej rozstaw linii, ale szerokości tylko jednego piksela. Proponuję poeksperymentować w dowolnym programie graficznym z różnymi wzorkami - to może być naprawdę dobra zabawa 🙂 Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu tła obrazkowego na stronach internetowych, zobacz rozdział: Tło obrazkowe...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 1px. Zamiast "styl" należy wpisać jedną z następujących wartości określających wygląd linii obramowania: solid - linia ciągła dashed - linia przerywana dotted - linia kropkowa Natomiast "kolor" jest definicją koloru obramowania. Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu obramowania na stronach internetowych, zobacz rozdziały: Styl obramowania...
Obiekt wyrażenia regularnego - RegExp / Tworzenie obiektu wyrażenia regularnego - RegExp...pattern - wzorzec (domyślnie: "(?:)") String flags - flagi: g - dopasowanie globalne i - ignorowanie wielkości liter m - dopasowanie wielu linii Wartość: RegExp - instancja obiektu wyrażenia regularnego Wyjątki: TypeError - pattern jest typu RegExp i argument flags został zdefiniowany SyntaxError - nieprawidłowy wzorzec lub flagi Jeżeli pattern jest instancją obiektu RegExp, a argument flags nie został podany (albo wynosi undefined), funkcja zwraca obiekt przekazany jako...
Losowy element...<img> i stworzyć w ten sposób np. rotator bannerów lub buttonów. Niedozwolone jest jedynie używanie apostrofów i przenoszenie tekstu do następnej linii za pomocą klawisza Enter. Pamiętaj również, że każdy tekst musi być ujęty w apostrofy oraz po każdym wpisie (oprócz ostatniego!) należy postawić przecinek. Przykład Array.prototype.random = function(limit) { if (typeof limit == 'undefined' || limit 0; i++) { do { var index = Math.random(); } while (index == 1); index...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...i treść Tytuł strony Deklaracja strony kodowej Opis zawartości strony Wyrazy kluczowe Język strony Tekst Akapit Tytuł Blok Koniec linii Pogrubienie CSS Czcionki Tekst Tło Marginesy Obramowanie Wykazy Rozmiary new Menu('menu8', 'menu8', true, false, 0, 0, -1, -1, true); należy użyć kodu HTML: <dl id="menu0"> <dt>Kurs</dt> <dd> <dl> <dt><a href="...">HTML</a></dt> <dd> <dl> <dt><a href="...">Dla zielonych</a></dt> <dd><a...