image - Kurs HTML i CSS
Kaskadowe Arkusze Stylów / Cascading Style SheetsSpis treści Kaskadowe Arkusze Stylów Źródła Kaskadowe Arkusze Stylów CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed } Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe. Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę...
- Tło CSS / Atrybuty mieszane tła {background}
...atrybuty tła. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: url(obrazek) (background-image), no-repeat (background-repeat) czy left (background-position). Wszystkie wartości muszą być oddzielone od siebie spacjami. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red)...
- Menu w CSS / Pionowe menu
...background: #bfb url("tlo.gif") repeat-x top; color: #365; border-left: 1px solid #797; } ul a:hover { background-color: #797; background-image: url("tlo2.gif"); color: #eff; } Do przygotowania powyższego menu potrzebne są trzy grafiki: punkt.gif - punkt listy tlo.gif - tło odnośnika tlo2.gif - tło odnośnika podświetlonego Widok w powiększeniu: Za pomocą CSS nie można dodawać żadnych znaczników do kodu źródłowego dokumentu, nie można zatem wygenerować znacznika <img>, który...
- Menu w CSS / Menu z nagłówkami
...bfb url("tlo.gif") repeat-x top; color: #365; border-left: 1px solid #797; } dl a:hover { background-color: #797; background-image: url("tlo2.gif"); color: #eff; } Wymagane grafiki (punkt.gif, tlo.gif, tlo2.gif) w powiększeniu:
Komendy HTML 4.01 / Elementy zdeprecjonowane...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 CSS: color compact DIR, DL, MENU, OL, UL CSS: margin-top, margin-bottom, line-height face BASEFONT, FONT CSS: font-family...
- Typy MIME / Multipurpose Internet Mail Extensions
...przez aplikacje (podtyp często określa nazwę programu, dla którego są przeznaczone dane) audio Dane audio (podtyp określa format audio) image Jeden lub więcej indywidualnych obrazów (podtyp określa format obrazu) text Materiały mające głównie formę tekstową video Zmienny w czasie obraz, możliwe że z dźwiękiem Podtypy mediów Każdy typ mediów definiuje określone podtypy, które może przyjmować. Drzewa rejestracji Nazwa podtypu może się rozpoczynać specjalnym przedrostkiem...
- HTML5 / Zmienione elementy i atrybuty HTML5
...Dla elementów INPUT pozwala użyć ogólnych wartości: "audio/*" (dowolny plik w formacie dźwiękowym), "video/*" (dowolny plik w formacie wideo), "image/*" (dowolny plik graficzny). accesskey Możliwość użycia listy klawiszy rozdzielonych spacjami, z których przeglądarka może wybrać najbardziej dla niej odpowiedni. action Nie może zawierać pustej wartości. border Dla znacznika TABLE może zawierać tylko pustą wartość lub cyfrę "1". colspan Dla elementów TD i TH musi zawierać wartość...
- HTML5 / Dekodowanie obrazków <img decoding>
...określa, jak przeglądarka powinna dekodować obraz przed jego wyświetleniem. Może przyjmować wartości auto, sync, lub async. Na przykład, <img src="image.jpg" decoding="async"> ustawia dekodowanie asynchroniczne, co może poprawić wydajność ładowania strony. Co robi dekodowanie asynchroniczne? Dekodowanie asynchroniczne (decoding="async") umożliwia przeglądarce ładowanie i dekodowanie obrazu w tle, co pomaga w zwiększeniu wydajności ładowania strony, ponieważ inne zasoby strony mogą być...
- HTML5 / Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>
...należy umieścić ten atrybut w tagu <img>, <link> lub <script> dla zasobów, które mają mieć wysoki priorytet pobierania. Na przykład: <img src="image.jpg" fetchpriority="high"> lub <link rel="preload" as="style" href="style.css" fetchpriority="high">. To zapewni, że przeglądarka pobierze te zasoby z wyższym priorytetem.