blok - Kurs HTML i CSS
Pozycjonowanie CSS / Nakładanie {z-index}...(z-index: 1) Kontekst drugi (z-index: 1) Element z kontekstu drugiego (z-index: 2) Element z kontekstu drugiego (z-index: 1) Gdyby bloki oznaczone jako "kontekst" (pierwszy i drugi) nie miały przypisanej wartości z-index", nie powinny wyznaczać kontekstu stosu. Wtedy kolejność nakładania powinna być następująca (poczynając od elementów przykrytych na samym spodzie): "z-index: 1" (blok pierwszy), "z-index: 1" (blok drugi), "z-index: 2" (blok pierwszy), "z-index: 2" (blok...
- Układ elastyczny CSS / Kolejność {order}
...podczas gdy syntezator mowy trafi na niego dopiero na końcu. W ten sposób potrzeby obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie...
- Szablon strony na DIV-ach / Płynny szablon
...stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji). W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...własności powinny się dopasować, kiedy reguły stylów nakładają się lub są ze sobą sprzeczne. Pozioma pozycja i szerokość niepływających elementów blokowych jest ustalana przez własności margin, border, padding i width. Suma tych wartości (z lewej i z prawej strony) równa się szerokości bloku, który zawiera dany element; szerokość jest dziedziczona z obejmującego bloku. Nie można zmienić szerokości obejmującego (zewnętrznego) bloku poprzez zmianę wartości margin, border, padding lub width...
- Szablon strony na DIV-ach / Stały szablon
...treści artykułu na stronie (chyba, że ktoś ma bardzo podzielną uwagę i dużego zeza rozbieżnego 😉). Zatem przy odpowiednio dobranej szerokości bloku treści, użytkownicy niższych rozdzielczości nie będą musieli używać poziomego paska przewijania podczas czytania artykułu, a jedynie w momencie przejścia do widoku menu nawigacyjnego i odwrotnie. Kolumna bloku treści nie powinna być zatem szersza niż 780px, aby możliwe było odczytanie pełnej linijki tekstu bez potrzeby poziomego przewijania...
- Układ elastyczny CSS / Marginesy automatyczne
...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} 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...
Tekst HTML / Wyświetlanie znaczników HTMLJęzyk HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii. Wyjątkiem od tej reguły...
- Tekst HTML / Adres <address>
<address>...</address> wyświetlanie: w bloku Wprowadza blok informacji kontaktowych z autorem. Może to być np. adres e-mail lub zwykły adres pocztowy - o ile należy do autora artykułu. Nie należy stosować tego elementu do tworzenia listy adresów w formie książki adresowej. Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką pochyłą. Przykład <address> Autor: Jan Kowalski jan.kowalski@example.com
- Tekst HTML / Kod poprawny semantycznie
...EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go normalnie, a jedynie ze...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...powtórzone poziome menu, zawierające najważniejsze i najczęściej używane odnośniki serwisu. Alternatywnie takie menu można umieścić w osobnym bloku poniżej bloku nagłówkowego. Menu nawigacyjne Kolumna zawierająca pionowe menu. Dodatkowe informacje Druga wąska kolumna, którą można wykorzystać do prezentacji dodatkowych krótkich treści. Treść strony Właściwa zawartość dokumentu, tzn. treść artykułu itp. Nie zapomnij o umieszczeniu tytułu treści na początku tego bloku - koniecznie przy...