link stylesheet - Kurs HTML i CSS
Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charsetSpis treści <link "stylesheet"> @charset Zewnętrzny arkusz stylów <link stylesheet> Strona kodowa @charset Zewnętrzny arkusz stylów <link "stylesheet"> <head> (...) <link rel="stylesheet" href="style.css"> (...) </head> gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej. Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...<html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie...
- Wstawianie stylów CSS / Alternatywny arkusz stylów <link "alternate stylesheet">
<head> <link rel="stylesheet" href="style.css" title="Nazwa domyślna"> <link rel="alternate stylesheet" href="style1.css" title="Nazwa 1"> <link rel="alternate stylesheet" href="style2.css" title="Nazwa 2"> <link rel="alternate stylesheet" href="style3.css" title="Nazwa 3"> (...) </head> style.css Domyślny arkusz stylów, który zostanie wyświetlony na starcie. Nazwa domyślna Nazwa domyślnego stylu. style1.css, style2.css, style3.css Alternatywne arkusz stylów - żaden z nich nie...
HTML5 / Blokowanie wyświetlania <link "stylesheet" blocking, script blocking, style blocking>(interpretuje: Opera 91, Chrome 105) Zewnętrzny arkusz stylów CSS: <link rel="stylesheet" href="style.css" blocking="render"> Skrypt JavaScript: <script blocking="render"></script> Wewnętrzny arkusz stylów CSS: <style blocking="render">...</style> style.css Lokalizacja zewnętrznego arkusza stylów CSS Przeglądarka internetowa może wykonywać niektóre operacje równocześnie. Czasami mogłoby to jednak prowadzić do nieoczekiwanych rezultatów. Dlatego na przykład osadzenie zewnętrznego...
Aktualizacja / System newsów...dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu */ text-decoration: none; } /* Treść */ .news dd { background: white; /* tło */ color: black; /* kolor tekstu */ font-size: 12px; /* rozmiar czcionki */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl...
- Skórki
...Następnie utwórz w swoim edytorze nowy dokument, wklej do niego poniższy kod i zapisz w pliku skin.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Skin(name, expires, path, message) { this.expires = typeof expires != 'undefined' ? expires : 365; this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie'; this.name = typeof name...
- Czcionki CSS / Czcionki osadzone @font-face
...osoby, które obawiają się, że Google kiedyś zaprzestanie udostępniania darmowych czcionek, mogą skopiować sobie pliki na własny serwer 😉 <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj"> <style> selektor { font-family: rodzaj } </style> </head> Jeżeli nazwa rodzaju czcionki zawiera spację, w adresie arkusza musi być ona zastąpiona znakiem plusa. Natomiast już wewnętrznym arkuszu CSS wstawiamy normalnie znak spacji. Oczywiście jako wartość atrybutu...
- 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 / Wstępne ładowanie <link "preload" as>
(interpretuje: Firefox 85, Opera 37, Chrome 50) <link rel="preload" as="rodzaj" type="typ" href="lokalizacja"> rodzaj W zależności od języka, w którym wybrane zasoby zewnętrzne są używane, można podać następujące wartości: w języku HTML - audio, document (dokument HTML), embed, frame, iframe, image, object, track, video w języku CSS - font, style (zewnętrzny arkusz stylów oraz import arkusza stylów) w języku JavaScript - fetch, json, script w języku XML - xslt (ang. Extensible...
- Menu drzewiaste / Skrypt menu drzewiastego
...li a:hover { text-decoration: underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Tree(id) { this.id = id; var url = unescape(window.location.href.replace(/#.*/, '')); var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, ''); this.click...