arkusze stylów - Kurs HTML i CSS
Wstawianie stylów CSS / Alternatywny arkusz stylów <link "alternate stylesheet">...dodatkowy plik *.css, a zmiana treści serwisu nie będzie wymagała żadnych modyfikacji wyglądu poszczególnych stylów. Jeśli chcemy, aby niektóre arkusze nie były dostępne do podmiany przez użytkownika, wystarczy osadzić je w tradycyjny sposób, tzn. jako arkusze domyślne bez podania atrybutu title="...". Taki arkusz domyślny, nawet po wyborze przez użytkownika arkusza alternatywnego, nadal będzie wpływał na wygląd strony, a alternatywny zostanie do niego dopisany. Niestety współczesne...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...niebagatelne sumy). Inna wersja strony do wydruku lub dla urządzeń przenośnych? Proszę bardzo - dzięki obsłudze mediów wystarczy dołączyć dodatkowe arkusze stylów i nie trzeba przygotowywać żadnych nowych wersji dokumentów HTML. Zależy Ci na wysokiej pozycji w wyszukiwarkach internetowych? Semantyczny kod oparty o CSS jest najprostszą ku temu drogą. Nie utrudniaj korzystania z Twojego serwisu osobom niewidomym ani użytkownikom przeglądarek tekstowych, tworząc stronę w technologii sprzed...
- Wstawianie stylów CSS / Import arkusza stylów @import
...dodatkowych znaczników <link rel="Stylesheet">. W takim przypadku dołącza się tylko jeden zewnętrzny plik *.css, a w nim importuje pozostałe arkusze. UWAGA! Jeżeli polecenie importu znajduje się w zewnętrznym arkuszu stylów, to relatywną ścieżkę dostępu do arkusza importowanego należy konstruować względem położenia arkusza CSS, w którym jest wstawione polecenie @import, a nie względem dokumentu HTML! Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na...
- Definicje / Autor
(author) Autor jest osobą, która tworzy dokumenty i łączy arkusze stylów. Narzędzie autorskie (authoring tool) generuje dokumenty i związane arkusze stylów.
- Szablon strony na DIV-ach / Responsywny szablon
...float: left; overflow: hidden; margin-left: 0; } #STOPKA { width: 100%; } } Wyjaśnienie: Na początku powyższego arkusza stylów znajdują się podstawowe reguły przystosowujące stronę dla najmniejszych urządzeń mobilnych. Takie podejście nosi nazwę najpierw urządzenia mobilne (ang. mobile first). Wszystkie bloki na stronie - nagłówek, menu, treść i stopka - znajdują się w jednej kolumnie, której szerokość dynamicznie dopasowuje się do całej dostępnej poziomej...
- CSS dla zielonych / Edytory CSS
...prostego edytora tekstu. Jednak dużo lepszym wyborem jest skorzystanie z pomocy specjalnie przygotowanego do tego edytora CSS. Dzięki temu praca nad arkuszem stylów będzie wygodniejsza i szybsza, a rezultaty powinny być pozbawione popularnych błędów - jak np. literówek w nazwach poleceń. Jaki edytor do CSS? Istnieją specjalne edytory przeznaczone tylko do języka CSS. Nie są one jednak zbyt popularne i przez to często dawno przestały być już rozwijane. Najlepszym rozwiązaniem jest użycie...
Aktualizacja / System newsów...szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze. Wymagana wiedza: Odsyłacze Wstawianie obrazków Podstawy stylów CSS (m.in. arkusze stylów) Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px...
- Przeglądarka zdjęć
...zdjęć Skrypt przeglądarki zdjęć Inicjalizacja Wymagana wiedza Konstruowanie ścieżek dostępu do obrazków Podstawy stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć Skrypt przeglądarki zdjęć Aby uzyskać powyższy efekt, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. przegladarka_zdjec.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...Skrypt menu rozwijanego, otwieranego, wysuwanego Wymagana wiedza Listy definicyjne <dl>...</dl> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, postępuj według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link...
HTML5 / Nowe elementy HTML5...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ż...