right - Kurs HTML i CSS
Galeria zdjęć HTML / Skrypt galerii zdjęć...poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. gallery.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) * @version 2.6.4 */ function GalleryModel(items) { this.items = items || []; } GalleryModel.prototype.get = function(index) { var item = this.items[index]; if (!item) { return null; } return { title: item.getAttribute('data-gallery'), src: this._getSrc(item), alt...
Komendy HTML 4.01 / Elementy zdeprecjonowane...H1, H2, H3, H4, H5, H6, P CSS: text-align align HR CSS: text-align, float align LEGEND - align TABLE CSS: margin-left (auto), margin-right (auto), float alink BODY CSS: :active alt APPLET OBJECT archive APPLET OBJECT background BODY CSS: background-image bgcolor BODY, TABLE, TD, TH, TR CSS: background-color border IMG, OBJECT CSS: border-width clear BR CSS: clear code APPLET OBJECT codebase APPLET OBJECT color BASEFONT, FONT...
Tekst CSS / Tryb pisania {writing-mode}...linijki tekstu ułożone poziomo jedna pod drugą (domyślnie) vertical-rl - linijki tekstu ułożone pionowo obok siebie od prawej do lewej strony (ang. right-to-left) vertical-lr - linijki tekstu ułożone pionowo obok siebie od lewej do prawej strony (ang. left-to-right) W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od...
- Tabele CSS / Podpis tabeli {caption-side}
...ustawienie" należy podać: top - podpis na powyżej tabeli bottom - poniżej tabeli left - (wycofano w CSS 2.1) po lewej (interpretuje Opera 6) right - (wycofano w CSS 2.1) po prawej Określa ustawienie podpisu tabeli (znacznik <caption>...</caption>). Przy dodawaniu podpisu tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację tabeli Przykład {caption-side} caption-side: top komórka1 komórka2 komórka3 komórka4 caption-side...
- Pozycjonowanie CSS / Pozycja absolutna {position: absolute}
...należy podać: left: wartość - odległość od lewej krawędzi bloku obejmującego top: wartość - odległość od górnej krawędzi bloku obejmującego right: wartość - odległość od prawej krawędzi bloku obejmującego bottom: wartość - odległość od dolnej krawędzi bloku obejmującego Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi "obejmującego bloku". Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Można również wpisać auto...
- 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}...
- Menu w CSS / Menu z nagłówkami
...3px double #28e; } dt { padding: 7px 15px; font-weight: bold; font-size: larger; background-color: #25b; color: #9ce; text-align: right; border-right: 20px solid #26d; margin-top: 1px; } dd { border-top: 1px solid #9ce; } dl a:link, dl a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } dl a:hover { width: 166px...
- Komendy CSS3 / Fragmentacja CSS
...elementy Dziedziczenie nie Procenty nie Media visual break-after Przełamanie po... Wartość auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region Inicjalizacja auto Zastosowanie elementy blokowe, dzieci kontenera układu siatki, dzieci kontenera elastycznego, wiersze i grupy wierszy tabeli Dziedziczenie nie Procenty nie Media visual break-before Przełamanie przed... Wartość auto | avoid | avoid-page | page | left...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...height: 22px; } #menu0 dd.active { font-weight: bold; } #menu0 dt a { background: url("submenu.gif") no-repeat 140px 8px; padding-right: 20px; } #menu0 a:link, #menu0 a:visited { display: block; color: #000; text-decoration: none; padding: 4px 5px; } #menu0 a:hover { color: #fff; background-color: #008; } #menu0 dl { position: absolute; border: 0; } #menu0 dl dd { position: relative; left: 151px; bottom: 22px; border-left: 1px solid...
- Obramowanie CSS / Kolor obramowania {border-...-color}
...{ border-bottom-color: kolor } Kolor lewego obramowania: selektor { border-left-color: kolor } Kolor prawego obramowania: selektor { border-right-color: kolor } We wszystkich przypadkach jako "kolor" należy podać definicję koloru. [Zobacz także: Wstawianie stylów] Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-top-color} border-top-color: red; border-top-style: solid