font - Kurs HTML i CSS
Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type...wybrać tylko elementy określonego typu. Przykład :first-of-type :last-of-type :only-of-type Po wpisaniu w arkuszu stylów: dl > dd:first-of-type { font-weight: bold } /* wytłuszczenie */ dl > dt:last-of-type { font-style: italic } /* kursywa */ dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */ a w dowolnym miejscu strony: <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> <dt>Termin 2</dt><dd>Definicja 2</dd> <dt>Termin 3</dt><dd>Definicja 3</dd> </dl> <dl> <dt>Termin...
- Jednostki CSS / Długość
...zgodnie z zasadą dziedziczenia stylów. Przykładowo załóżmy, że wysokość czcionki korzenia (element <html>) wynosi 16px, a dla <body> ustalono "font-size: 2em". Jeżeli teraz na stronie wstawimy blok ze stylem "width: 10em", uzyska on faktyczną szerokość: 16px * 2 * 10 = 320px (16px pochodzi o wysokości czcionki korzenia, 2 to względna wysokość czcionki <body>, a 10 - ustalona szerokość bloku). Jak widać, zmiana rozmiaru czcionki dla elementu <body> albo wstawienie dodatkowego potomka z...
- Media CSS / Wybór medium @media
...typów nazw mediów, rozdzielonych przecinkami. Pozwala to autorowi zdefiniować różne typy w jednym arkuszu stylów, np.: @media print { body { font-size: 10pt } } @media screen { body { font-size: 12pt } } @media screen, print { body { line-height: 1.2 } } Powyższe polecenia, wpisane w arkuszu stylów, definiują rozmiar czcionki 10pt dla wydruku, 12pt dla ekranu komputerowego oraz wysokość linii 1.2 jednocześnie dla ekranu i wydruku.
- Menu w CSS / Pionowe menu
...ul li { border-bottom: 1px solid #9ce; } ul a:link, ul a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } ul a:hover { width: 166px; background-color: #28e; color: #fff; border-left: 20px solid #26d; } Usuwamy domyślne formatowanie listy. Ustalamy szerokość menu, dodajemy tło i podwójne obramowanie oraz niewielki odstęp pomiędzy obramowaniem a...
Podcast HTML / #9 HTML5...wyróżnienie tekstu. Przestarzałe elementy: elementy formatujące, których funkcję przejęły style CSS, zostały wycofane. Należą do nich m.in.: <basefont>, <big>, <center>, <font>, <strike>, <tt>, <frame>, <frameset>, <noframes>. Przestarzałe atrybuty: wycofano atrybuty takie jak rev i charset dla <link> i <a>, longdesc dla <img> i <iframe>, oraz wiele atrybutów formatujących, np. align dla wielu elementów. border dla <table>: może zawierać tylko pustą wartość lub cyfrę "1". reversed w...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...Komórka 3.2 Komórka 4.1 Komórka 4.2 Komórka 5.1 Komórka 5.2 Komórka 6.1 Komórka 6.2 Nieparzyste definicje listy: dl > dd:nth-of-type(odd) { font-weight: bold } Termin 1 Definicja 1 Termin 2 Definicja 2 Termin 3 Definicja 3 Termin 4 Definicja 4 Termin 5 Definicja 5 Termin 6 Definicja 6 Nieparzyste wiersze poczynając od końca: tbody > tr:nth-last-child(odd) { color: white; background-color: gray } Komórka 1.1 Komórka 1.2 Komórka 2.1 Komórka 2.2 Komórka 3.1 Komórka 3.2...
- 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...
- HTML5 / Przestarzałe elementy i atrybuty HTML5
Spis treści Wstęp Przestarzałe elementy Znaczniki formatujące Znaczniki pogarszające dostępność Znaczniki rzadko używane Przestarzałe znaczniki XHTML5 Przestarzałe atrybuty Wstęp Choć formalnie przestarzałe elementy ani atrybuty nie wchodzą w skład specyfikacji HTML5, to przeglądarki nadal powinny je obsługiwać. Jednak nie należy ich już używać w tworzonych nowych dokumentach. Przestarzałe elementy Znaczniki formatujące Ich funkcję przejęły style CSS. BASEFONT BIG CENTER...
- HTML5 / Wstępne ładowanie <link "preload" as>
...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 Stylesheet Language Transformations) typ Odpowiedni typ MIME lokalizacja Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób Domyślnie przeglądarki...
Galeria zdjęć HTML / Skrypt galerii zdjęć...0, padding: 0, lineHeight: 1, color: '#000', background: 'rgba(255, 255, 255, 0.5)', cursor: 'pointer' }; var navigationStyle = { fontSize: '50px', width: '75px', height: '75px', borderRadius: '50%', position: 'absolute', fontWeight: 'bold' }; var style = { container: { position: 'fixed', zIndex: 6000000, background: '#000' }, image: { maxWidth: '100%', maxHeight: '100%' }, progress: { position: 'absolute' }, caption...