Co to jest "root" w CSS? - Kurs HTML i CSS

Co to jest "root" w CSS?

W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony.

Zobacz więcej...

Selektory pseudoklas / 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...
XHTML / Wymagania stawiane dokumentom XHTML
Dokumenty XHTML muszą spełniać ograniczenia podane w DTD (Document Type Definition - Definicja Typu Dokumentu). Elementem podstawowym (root) w dokumencie musi być html. Element podstawowy (html) musi zawierać deklarację xmlns identyfikującą przestrzeń nazw XHTML, która stanowi zbiór nazw używanych w dokumencie jako typy elementów i nazwy atrybutów: <html xmlns="http://www.w3.org/1999/xhtml" lang="pl"> W dokumencie obowiązkowo musi być wstawiona deklaracja typu dokumentu przed elementem...
Znaki specjalne HTML / Symbole
...Minus sign Znak minus − ∗ &lowast; Asterisk operator Operator gwiazdka (w IE6 tylko czcionka Unicode) ∗ √ √ Square root (radical sign) Pierwiastek kwadratowy √ ∝ &prop; Proportional to ...proporcjonalne do... (nie interpretuje IE6) ∝ ∞ ∞ Infinity Nieskończoność ∞ ∠ &ang; Angle Kąt (nie interpretuje IE6) ∠ ∧ &and; Logical and (wedge) Operator logiczny i (nie interpretuje IE6) ∧ ∨ &or...
Selektory CSS
...elementu E Przed... 2 E:after wstawia treść po zawartości elementu E Po... 2 Selektory pseudoklas Wzór Znaczenie Opis CSS E:root element E, który jest korzeniem dokumentu Korzeń 3 E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) element E, który jest odpowiednio: n-tym dzieckiem jego rodzica, n-tym dzieckiem licząc od końca, n-tym bratem typu E, n-tym bratem typu E licząc od końca Pseudoklasy cykliczne 3 E:first-child element E...
Szablon strony na DIV-ach / Stały szablon
...poprzednie deklaracje są przypisane jednocześnie elementom html oraz body, z uwagi na różnice interpretacji elementu podstawowego (korzeń - ang. root) drzewa dokumentu w niektórych przeglądarkach (element podstawowy posiada określone domyślne marginesy strony, które chcemy usunąć). Ustalamy odpowiednią szerokość szablonu, tzn. taką, aby zmieściła się w najniższej planowanej rozdzielczości ekranu - w tym przypadku 800x600. Musimy przewidzieć 20px miejsca dla suwaka do przewijania treści...
Definicje / Drzewo dokumentu
...w dokumencie źródłowym. Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root). Przykład Po wpisaniu: <html> <head> <title>...</title> </head> <body> <h1>...</h1> <p>...</p> <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> </body> </html> Otrzymamy następujące drzewo dokumentu: gdzie: Element TABLE jest dzieckiem...
Selektory pseudoklas / Co to są pseudoklasy CSS?
...etykiety: :target Pseudoklasa języka: :lang() Pseudoklasy interfejsu użytkownika: :enabled, :disabled :checked Pseudoklasy strukturalne: :root :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type() :first-child :last-child :only-child :first-of-type, :last-of-type, :only-of-type :empty Pseudoklasa negacji: :not()
Marginesy / Załamywanie marginesów
...Należy zauważyć, że załamywanie marginesów wpływa tylko na pozycję potomków, a nie wpływa na ustawienie przodka. Marginesy elementu podstawowego ("root") - czyli nadrzędnego dla wszystkich - nie są załamywane. Trzeba wyraźnie rozróżnić, że proces załamywania dotyczy tylko i włącznie pionowych marginesów zewnętrznych, a nie wewnętrznych (padding). Przykład Po wpisaniu następującego kodu: <div style="margin-bottom: 20px">1</div> <div style="margin-top: 50px">2</div> na ekranie zobaczymy...
Rozmiary / Blok obejmujący CSS
...względem pewnego prostokąta zwanego blokiem obejmującym (ang. "containing block"): Blok obejmujący w którym znajduje się element podstawowy (ang. "root") jest wyznaczany przez przeglądarkę (np. okno). Ten blok nazywany jest początkowym blokiem obejmującym. Dla innych elementów, które mają ustalone pozycjonowanie relatywne lub statyczne blok obejmujący jest tworzony przez najbliższy blok, komórkę tabeli lub inline-block będący przodkiem dla danego elementu. Jeśli element jest pozycjonowany...