element - Kurs HTML i CSS
Rozmiary CSS / Blok obejmujący CSSPozycja i rozmiar pudełka elementu są czasami obliczane 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...
- Rozmiary CSS / Maksymalna szerokość {max-width}
selektor { max-width: wartość } Selektorem może być dowolny znacznik wyświetlany w bloku lub element zastępowany [zobacz: Wstawianie stylów]. 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ą...
- Rozmiary CSS / Minimalna szerokość {min-width}
selektor { min-width: wartość } Selektorem może być dowolny znacznik wyświetlany w bloku lub element zastępowany [zobacz: Wstawianie stylów]. 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ą...
- Pozycjonowanie CSS / Przyleganie {clear}
selektor { clear: sposób } Polecenie można zastosować tylko do elementów wyświetlanych w bloku (block). Jako "sposób" należy podać: left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego right - prawy bok nie przylega both - żaden bok nie przylega none - brak ograniczeń Polecenie pozwala ustalić pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającym nie będą do niego...
- Pozycjonowanie CSS / Przezroczystość {opacity}
...wprowadzić na ekran efektowne warstwy imitujące zabarwione szyby. Trzeba jednak pamiętać, że ustalony poziom półprzezroczystości otrzymają wszystkie elementy znajdujące się wewnątrz danego znacznika - nie możemy cofnąć elementom wewnętrznym przezroczystości (tak aby stały się ponownie zupełnie nieprzezroczyste), możemy jedynie ustawić im jeszcze większą przezroczystość w stosunku do półprzezroczystego rodzica. Przykład {opacity} To jest dolna warstwa... To jest dolna warstwa... To jest dolna...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
(CSS 3 - interpretuje Firefox 67, Opera 73, Chrome 84) selektor { cecha: revert } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas...
Nagłówek i treść HTML / Język strony <html lang, link hreflang>...zapominać o zadeklarowaniu odpowiedniej dla wybranego języka strony kodowej. Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden element <html>. Dlatego powyższy atrybut lang="..." należy przypisać do już istniejącego znacznika, a nie dodawać kolejnego. Inne wersje językowe <link hreflang> <head> <link rel="alternate" hreflang="język" href="adres"> </head> gdzie jako "język" należy podać skrót nazwy wybranego języka. Natomiast zamiast "adres" wpisuje się bezwzględny...
- Znaki specjalne HTML / Symbole
...Operator Nabla (nie interpretuje IE6) ∇ ∈ ∈ Element of ...należy do... (nie interpretuje IE6) ∈ ∉ ∉ Not an element of ...nie należy do... (w IE6 tylko czcionka Unicode) ∉ ∋ ∋ contains as member ...zawiera się w... (nie interpretuje IE6) ∋ ∏ ∏ n-ary product = product sign Znak mnożenia n-elementów ciągu ∏ ∑ ∑ n-ary sumation Znak sumowania n-elementów ciągu ∑ − − Minus sign Znak minus...
- Tekst HTML / Wyróżnienie <em, strong>
...STRONG od B? Element STRONG nadaje tekstowi znaczenie w postaci wysokiej ważności, a dodatkowo zwykle wyświetla go w sposób pogrubiony. Natomiast element B również wizualnie wytłuszcza tekst, ale jedynie w celach czysto użytkowych nie nadając mu przy tym żadnego dodatkowego znaczenia - w ten sposób oznacza się często np. krótkie wprowadzenie na początku artykułu.
- Definicje / Podstawowe pojęcia CSS
Poniżej zostały podane podstawowe definicje dotyczące stylów CSS. Jeśli nie zrozumiesz niektórych, nie przerażaj się, nie wszystkie one są absolutnie konieczne do swobodnego posługiwania się stylami. Jednak przeczytanie ich, pozwoli Ci chociaż zaznajomić się z podstawowymi terminami. Zapoznaj się zwłaszcza z następującymi definicjami: Element Element zastępowany Atrybut Drzewo dokumentu - szczególnie ważne Dziecko Potomek Przodek Brat Źródło: Cascading Style Sheets, Level 2