inline - Kurs HTML i CSS
Skórki...dokumentów. To oznacza m.in., że powinno się unikać znaczników i atrybutów formatujących takich jak <font color="...">...</font>, a także stylów inline, czyli atrybutu style="...". Dobrze jest zdefiniować odpowiedni zestaw klas CSS. Trzeba sobie uzmysłowić, że wszystko co będziemy mogli zmienić w nowej skórce, ogranicza się do zewnętrznego arkusza stylów, czyli pliku style.css. Jeżeli formatowanie ważnych elementów serwisu będzie przeniesione bezpośrednio do kodu źródłowego dokumentów...
Marginesy CSS / Załamywanie marginesów...są załamywane z ich dziećmi. Marginesy elementów pozycjonowanych absolutnie (wg CSS 2 również relatywnie) nie są załamywane. Marginesy elementów inline-block nie są załamywane. Jeżeli marginesy - górny i dolny - sąsiadujących elementów zostaną załamane, pozycja elementu jest wyznaczana w następujący sposób: Jeśli marginesy elementu zostały załamane z górnym marginesem rodzica, górna krawędź obramowania jest taka sama jak dla rodzica. Jeśli rodzic nie bierze udziału w załamywaniu...
HTML5 / Nowe elementy HTML5...figure, footer, header, hgroup, main, nav, search, section { display: block; } audio, canvas, embed, meter, progress, video { display: inline-block; } [hidden] { display: none; } Jeżeli nie korzystasz z możliwości CSS, nie musisz używać tej sztuczki... ale może w takim razie to już najwyższy czas, aby poznać Kaskadowe Arkusze Stylów 😉 Sekcje Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek...
- Komendy CSS3 / Wyświetlanie CSS
...Wartość [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> Inicjalizacja inline Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie order Kolejność Wartość <integer> Inicjalizacja 0 Zastosowanie dzieci kontenera elastycznego i dzieci kontenera układu siatki Dziedziczenie nie Procenty nie visibility Widzialność Wartość visible | hidden | collapse Inicjalizacja visible Zastosowanie wszystkie...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...dlaczego warto oddzielać wygląd od struktury. 10nbsp;min - Wstawianie stylów CSS Omówienie trzech sposobów dodania CSS (zewnętrzny, wewnętrzny, inline), nacisk na <link rel="stylesheet">. 10 min - Składnia CSS Selektory, bloki deklaracji (właściwości, wartości). Przykłady formatowania całej strony i pojedynczych elementów. 15 min - Praktyczne ćwiczenia Uczniowie tworzą stronę HTML i dodają arkusz stylów zmieniający: kolor tła i tekstu, czcionkę i jej rozmiar, wyrównanie tekstu w...
- Rozmiary CSS / Wysokość {height}
...jako "wysokość" należy podać wartość wysokości, jaką ma mieć dany element (używając jednostek długości). Polecenie nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {height} To jest akapit o wysokości 5cm (height: 5cm). To jest wykaz o wysokości 20em (height: 20em): Punkt pierwszy Punkt drugi To jest tabela o wysokości 100px (height: 100px) Poniżej widać...
- Rozmiary CSS / Maksymalna szerokość {max-width}
...Natomiast jako "wartość" należy podać wartość maksymalnej dozwolonej szerokości, jaką może mieć element. Polecenie nie odnosi się do elementów inline! Polecenie pozwala zabezpieczyć rozmiar elementu tak, aby nigdy nie był większy od podanej wartości. Różnica w stosunku do prostej własności width jest taka, że jeśli element osiągnie szerokość mniejszą lub równą niż podana, to jego rozmiary nie zostaną zmienione. Dla elementów zastępowanych (np. obrazków) własność ta może mieć wpływ...
- Rozmiary CSS / Minimalna szerokość {min-width}
...Natomiast jako "wartość" należy podać wartość minimalnej dozwolonej szerokości, jaką może mieć element. Polecenie nie odnosi się do elementów inline! Polecenie pozwala zabezpieczyć rozmiar elementu tak, aby nigdy nie był mniejszy od podanej wartości. Różnica w stosunku do prostej własności width jest taka, że jeśli element osiągnie szerokość większą lub równą niż podana, to jego rozmiary nie zostaną zmienione. Dla elementów zastępowanych (np. obrazków) własność ta może mieć wpływ...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
...none... Ustawienie w pionie {vertical-align} selektor { vertical-align: sposób } Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>). Jako "sposób" należy podać: baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie) middle - ustawia element na środku wysokości elementów sąsiadujących text-top - wyrównuje szczyt elementu do szczytu tekstu elementu nadrzędnego text-bottom...
- Tryb Quirks / X-UA-Compatible
...zapis rel="alternate stylesheet" jest równoważny rel="stylesheet alternate". Własność display - uzupełniona obsługa wartości: table, inline-table, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, run-in, ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container Własność border-style - uzupełniona obsługa wartości: hidden Własność list-style-type - uzupełniona obsługa wartości: decimal-leading-zero, lower-greek, lower-latin...