font style - Kurs HTML i CSS
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...
- 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.
- 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...
HTML5 / Napisy do filmów <track>...CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space. Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem: ::cue { color: white; background: black; } Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać: ::cue(b) { color: red; } ::cue(i) { color: lime; } ::cue(u) { color: aqua; } Aby zmienić...
- Dobre praktyki / CSS Zorientowane Obiektowo
...wartości w klasie pochodnej. Na przykład: .Article { color: black; background-color: white; /* ... */ } .Review { color: green; font-size: 12px; /* ... */ } Pamiętaj jednak, że kolejność wymieniania nazw klas w atrybucie class="..." z punktu widzenia kaskadowości stylów nie ma znaczenia, dlatego należy zadbać, aby w arkuszu stylów definicja klasy Review znajdowała się później niż Article. Ten prosty zabieg pozwoli nam uzyskać recenzję z zielonym tekstem, przy...
Przeglądarka zdjęć...przeglądarkę zdjęć, można do niej dołączyć np. taki arkusz CSS: .zdjecia { text-align: center; } .zdjecia_menu { margin-bottom: 10px; font-size: 10px; } .zdjecia_menu input, .zdjecia_menu select { font-size: 10px; } .zdjecia_opis { margin-top: 10px; text-align: justify; } Najwygodniej 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...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku. Inny ciekawy przykład: p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left } W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...o identyfikatorze id="demo"? Aby wybrać element o identyfikatorze id="demo" w CSS, używa się selektora identyfikatora. Na przykład: #demo { font-weight: bold; }. Kiedy CLASS a kiedy ID? Klasy (class="...") stosuje się, gdy chcemy zastosować te same style do wielu elementów o podobnych właściwościach. Natomiast identyfikatory (id="...") stosuje się, gdy chcemy zastosować unikalne style lub manipulacje do jednego konkretnego elementu na stronie.
- 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...
- 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...