stylesheet - Kurs HTML i CSS
HTML5 / Nowe atrybuty HTML5...autofocus Wszystkie elementy Automatycznie ustawia zogniskowanie (fokus) na elemencie po załadowaniu strony blocking LINK (rel="stylesheet" lub rel="expect"), SCRIPT, STYLE Czy element może potencjalnie blokować wyświetlanie charset META Deklaracja strony kodowej contenteditable Wszystkie elementy Czy element jest edytowalny crossorigin AUDIO, IMG, LINK, SCRIPT, VIDEO Sposób, w jaki element obsługuje żądania z mechanizmem CORS (ang. Cross-Origin Resource...
- HTML5 / Kategorie elementów HTML5
...I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LINK (rel="..." z jedną z wartości: dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, stylesheet), MAIN (jeżeli zawiera się bezpośrednio lub pośrednio tylko w: HTML, BODY, DIV, FORM), MAP, MARK, MENU, META (itemprop="..."), METER, NAV, NOSCRIPT, OBJECT, OL, OUTPUT, P, PICTURE, PRE, PROGRESS, Q, RUBY, S, SAMP, SCRIPT, SEARCH, SECTION, SELECT, SLOT, SMALL, SPAN, STRONG, sub, sup, TABLE, TEMPLATE, TEXTAREA, TIME, U, UL, VAR, VIDEO...
- Komendy HTML 4.01 / A
...odnosi się do poprzedniego dokumentu w sekwencji section - dział w kolekcji dokumentów start - odnosi się do pierwszego dokumentu w kolekcji stylesheet - odnosi się do zewnętrznego arkusza stylów (CSS) subsection - "poddzał" w kolekcji dokumentów REV="typ" Opisuje adres zwrotny podany w atrybucie HREF (analogicznie jak w przypadku atrybutu REL) SHAPE="kształt" Określa kształt obszaru w mapie odnośników klienta MAP (którego współrzędne podaje atrybut COORDS): circle - koło...
- Komendy HTML 4.01 / LINK
...odnosi się do poprzedniego dokumentu w sekwencji section - dział w kolekcji dokumentów start - odnosi się do pierwszego dokumentu w kolekcji stylesheet - odnosi się do zewnętrznego arkusza stylów (CSS) subsection - "poddzał" w kolekcji dokumentów REV="typ" Opisuje adres zwrotny podany w atrybucie HREF (analogicznie jak w przypadku atrybutu REL) STYLE="styl" Informacje stylów (CSS) TARGET="cel" Podaje nazwę ramki, w której dokument będzie otwarty; ponadto możliwe jest tutaj...
Aktualizacja / System newsów...konfiguracji zostaną dla tych różniących się elementów nadpisane. Następnie w nagłówku dokumentu (wewnątrz <head>...</head>) wklejamy: <link rel="stylesheet" href="news.css"> <script src="news.js"></script> Na koniec pozostało już tylko wstawić w wybranym miejscu strony treści newsów (nowości): <script> var news = new News(); ///// // Dodawanie newsów w postaci: // news.dodaj(dzień,miesiąc,rok, // 'Tytuł','Treść newsa...', // 'adres','ramka', // 'autor','e-mail...
- Przeglądarka zdjęć
...będzie zapisać go w osobnym pliku z rozszerzeniem *.css - np. przegladarka_zdjec.css i osadzić w nagłówku dokumentu za pomocą znacznika: <link rel="stylesheet" href="przegladarka_zdjec.css"> Oczywiście można go również dołączyć do już istniejącego arkusza stylów serwisu. Inicjalizacja Czasami może zajść potrzeba wyświetlenia w przeglądarce zdjęć zaraz po załadowaniu strony zdjęcia innego niż pierwsze. W tym celu do strony, na której wstawiony jest skrypt, trzeba przejść poprzez odsyłacz, w...
- Menu drzewiaste / Skrypt menu drzewiastego
...this.start(document.getElementById(this.id)); } Następnie wklej w treści nagłówkowej strony <head>...</head> następujący kod: <link rel="stylesheet" href="tree.css"> <script src="tree.js"></script> Na koniec w wybranym miejscu strony - tam, gdzie ma się wyświetlać menu drzewiaste - wstaw kod oparty na technice zagnieżdżania wykazów (tylko wypunktowanie, czyli lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów listy będzie automatycznie odzwierciedlał...
Media CSS / Zapytania mediów...np.: @import url(kolor.css) screen and (color); @media screen and (color) { /* Arkusz dla urządzeń z kolorowym ekranem */ } <link rel="stylesheet" media="screen and (color)" href="kolor.css"> Zapytanie mediów składa się ze standardowego typu lub grupy medium, po którym następuje słowo kluczowe "and" (ang. i), a następnie w nawiasie cecha medium (ang. media feature), określająca wymagane możliwości urządzenia w ramach podanego na początku mediów ogólnego. Pomiędzy słowem...
- Dobre praktyki / Przykazania webmastera
...plikach *.css, a w adresach do nich (występujących w plikach *.html) dodać po pytajniku numer kolejnej wersji (albo aktualną datę), np.: <link rel="stylesheet" href="style.css?2"> To samo dotyczy wszystkich odwołań do plików graficznych, występujących arkuszu CSS - jeśli uległy zmianie, należy podnieść im numer rewizji: background-image: url("plik.gif?2"); Gdzie to tylko możliwe, staraj się skracać zapis w regułach stylów Oszczędzisz sobie w ten sposób pisania, a także zmniejszasz rozmiar...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...od struktury. 10nbsp;min - Wstawianie stylów CSS Omówienie trzech sposobów dodania CSS (zewnętrzny, wewnętrzny, inline), nacisk na <link rel="stylesheet">. 10 min - Składnia CSS Selektory, bloki deklaracji (właściwości, wartości). Przykłady formatowania całej strony i pojedynczych elementów. 15 min - Praktyczne ćwiczenia Uczniowie tworzą stronę HTML i dodają arkusz stylów zmieniający: kolor tła i tekstu, czcionkę i jej rozmiar, wyrównanie tekstu w akapitach i nagłówkach. 5 min...