arkusz - Kurs HTML i CSS
Dla nauczycieli / Scenariusz lekcji informatyki dla branżowej szkoły I stopnia...trwania: 45 minut Cele szczegółowe Uczeń rozumie podstawy CSS. Uczeń dodaje style do elementów HTML. Materiały CSS dla zielonych Zewnętrzny arkusz stylów Wewnętrzny arkusz stylów Styl lokalny Przebieg 10 min - Omówienie zasad działania CSS Wyjaśnienie selektorów i deklaracji. Różnice między stylem zewnętrznym, wewnętrznym i inline. 20 min - Praca z arkuszem stylów Dodanie koloru tła i tekstu. Zmiana czcionki, rozmiaru i wyrównania tekstu. 10 min - Sprawdzenie efektów...
HTML5 / Nowe elementy HTML5...w specyfikacji. Aby ujednolicić sposób wyświetlania elementów HTML5 w starszych przeglądarkach, powinniśmy dodatkowo wstawić do dokumentu specjalny arkusz stylów: article, aside, details, dialog, figcaption, 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ż...
- Komendy HTML 4.01 / Wykaz elementów
Element Znacznik otwierający/ zamykający Wyświetlanie Opis A wymag/wymag w linii Kotwica ABBR wymag/wymag w linii Forma skrócona ACRONYM wymag/wymag w linii Akronim ADDRESS wymag/wymag w bloku Informacje o autorze APPLET wymag/wymag w linii Aplet AREA wymag/zabr Obszar w mapie odnośników klienta B wymag/wymag w linii Tekst pogrubiony BASE wymag/zabr Adres bazowy BASEFONT wymag/zabr w linii Czcionka bazowa BDO wymag/wymag...
- Komendy HTML 4.01 / STYLE
Pozwala autorowi wstawić arkusz stylów (CSS), w części nagłówkowej dokumentu (HEAD). Zobacz więcej... Atrybuty: DIR="kierunek" Kierunek tekstu: ltr - od lewej do prawej rtl - od prawej do lewej LANG="język" Informacja o języku bazowym (np.: LANG="en" oznacza angielski, LANG="pl" - polski itd.) MEDIA="typ" Wyznacza typ pojedynczego medium lub listy mediów rozdzielonych przecinkami: all - dla wszystkich urządzeń aural - syntezatory mowy braille - urządzenia do czytania braillem...
Definicje / Zinterpretowana zawartość(rendered content) Zawartość elementu po zinterpretowaniu zgodnie z powiązanym arkuszem stylów. Zawartość zinterpretowana elementów zastępowanych przychodzi z zewnątrz dokumentu źródłowego. Zawartością taką może być także alternatywny tekst dla elementu (wartość atrybutu alt w składni HTML) czy pozycja wstawiona (domyślnie lub poprzez ścisłe określenie) przez arkusz stylów (np. numerowanie).
- Definicje / Użytkownik
...z pośrednikiem użytkownika (user agent) w celu obejrzenia (usłyszenia) treści zawartej w dokumencie, ewentualnie używa dokumentu i związanego arkusza stylów. Użytkownik może dostarczyć osobisty arkusz stylów, który zawiera jego osobiste preferencje.
- Definicje / Pośrednik użytkownika
(user agent - UA) Dowolny program, który interpretuje dokument i stosuje związany arkusz stylów zgodnie z określeniami specyfikacji. Pośrednik użytkownika może wyświetlać dokument, czytać go na głos, spowodować jego wydrukowanie, przekształcić na inny format itd.
- Oprawa graficzna / Zamiennik obrazkowy
...WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana ułożenia menu nawigacyjnego z orientacji pionowej do poziomej ani przeniesienie całej kolumny nawigacyjnej z lewej na prawą stronę. Jest jednak jeden ważny element, na zawartość którego nie można wpływać za pomocą CSS - obrazki. Można co prawda zmieniać...
- HTML5 / Nowe atrybuty HTML5
...FIELDSET Czy potomne kontrolki formularza, z wyjątkiem tych wewnątrz elementu LEGEND, są wyłączone disabled LINK (rel="stylesheet") Czy arkusz stylów jest zablokowany download A, AREA Czy pobrać zasób zamiast nawigować do niego oraz jego nazwa pliku, jeśli tak draggable Wszystkie elementy Czy element jest przeciągalny enterkeyhint Wszystkie elementy Wskazówka dotycząca wyboru działania przypisanego do klawisza Enter fetchpriority IMG, LINK, SCRIPT Ustawia...
- Oprawa graficzna / "Duszki" CSS
...to obrazków - nic bardziej błędnego. Można przecież zamiast zapisywać każdej ikonki w osobnym pliku, zapisać je wszystkie (lub większość) na jednym "arkuszu" w pojedynczym pliku graficznym. W ten sposób można zaoszczędzić nawet kilkadziesiąt żądań HTTP, co ma duży wpływ na szybkość ładowania strony zwłaszcza dla użytkowników, którzy pierwszy raz odwiedzają serwis, a więc ich przeglądarki nie mają jeszcze zapisanych w lokalnej pamięci cache żadnych obrazków ze strony. Badania wykazują, że aż...