media - Kurs HTML i CSS
Media CSS / Wybór medium @media...arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech: Podanie medium docelowego w arkuszu stylów, korzystając z polecenia @media lub @import: @import url(glos.css) aural; @media print { /* Arkusz dla wydruku */ } Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu LINK precyzujący włączenie zewnętrznego arkusza stylów): <!doctype html> <html lang="pl"> <head> <title>Odnośnik do medium docelowego</title> <link rel="stylesheet...
Nagłówek i treść HTML / Strona mobilna <link media><head> <link rel="alternate" media="media" href="adres"> </head> gdzie jako "media" podaje się typ(y) mediów alternatywnych albo zapytanie mediów. Natomiast zamiast "adres" wpisuje się bezwzględny adres strony (rozpoczynający się od http:// lub https://), która stanowi odpowiednik bieżącego dokumentu specjalnie przystosowany na podane urządzenia. W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu...
- Drukowanie CSS / Wydruk @media print
...dla wydruku części istniejącego arkusza: /* Domyślny arkusz dla wszystkich mediów */ /* (tu znajdują się ogólne deklaracje) */ /* (...) */ @media print { /* Arkusz dla wydruku */ } Dołączenie specjalnie dla wydruku zewnętrznego arkusza: <head> <link rel="stylesheet" href="domyslny.css"> <link rel="stylesheet" href="wydruk.css" media="print"> </head> Dołączenie specjalnie dla wydruku wewnętrznego arkusza: <head> <style media="print"> /* Arkusz dla wydruku */ </style> </head>...
- Komendy CSS3 / Maskowanie CSS
Źródło: CSS Masking Module Level 1 Spis treści clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type clip Obcinanie Wartość rect() | auto Inicjalizacja auto Zastosowanie elementy pozycjonowane absolutnie Dziedziczenie nie Procenty nie Media visual clip-path...
- Komendy CSS3 / Mowa CSS
Źródło: CSS Speech Module Spis treści cue cue-after cue-before pause pause-after pause-before rest rest-after rest-before speak speak-as voice-balance voice-duration voice-family voice-pitch voice-range voice-rate voice-stress voice-volume cue Atrybuty mieszane sygnału wywoławczego Wartość <'cue-before'> <'cue-after'>? Inicjalizacja zobacz cechy indywidualne Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie Media speech cue-after Sygnał...
- Media CSS / Zapytania mediów
...już o tym, że współczesne urządzenia mobilne często mogą pracować w dwóch trybach położenia ekranu: pionowym i poziomym. Zapytania mediów (ang. media queries) pozwalają precyzyjnie dopasować arkusz CSS nie tylko do typu czy grupy mediów, ale przede wszystkim do możliwości urządzenia. Nie należy jednak myśleć, że jest to przydatne jedynie kiedy tworzymy stronę na urządzenia mobilne. Bez trudu można wyobrazić sobie specjalny wygląd dokumentu, dopasowany do wyświetlania na telewizorze o...
- Komendy CSS3 / Czcionki CSS
Źródło: CSS Fonts Module Level 3 Spis treści font font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight font Atrybuty mieszane czcionki Wartość [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'>...
- Komendy CSS3 / Podstawowy interfejs użytkownika CSS
Źródło: CSS Basic User Interface Module Level 3 (CSS3 UI) Spis treści box-sizing caret-color cursor outline outline-color outline-offset outline-style outline-width resize text-overflow box-sizing Wymiarowanie pudełka Wartość content-box | border-box Inicjalizacja content-box Zastosowanie wszystkie elementy, które akcektują szerokość i wysokość Dziedziczenie nie Procenty nie Media visual caret-color Kolor karetki tekstowej Wartość auto | <color> Inicjalizacja auto...
- HTML5 / Responsywny obrazek <picture, source>
Spis treści <picture, source> Wstęp Dopasowanie formatu <picture, source type> Dopasowanie kadru <picture, source media> Wstęp (interpretuje: Firefox 38, Opera 25, Chrome 38) Znamy już sposób wstawienia obrazka na stronę za pomocą znacznika IMG. Niestety istnieją przypadki, kiedy jest on niewystarczający. Najczęściej ma to związek z urządzeniami mobilnymi. Trudno spodziewać się, że to samo zdjęcie będzie równie dobrze wyglądać zarówno na dużym ekranie laptopa i na niewielkim...
- Komendy CSS3 / Fragmentacja CSS
Źródło: CSS Fragmentation Module Level 3 Spis treści box-decoration-break break-after break-before break-inside orphans widows box-decoration-break Dekoracja przełamania Wartość slice | clone Inicjalizacja slice Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie Media visual break-after Przełamanie po... Wartość auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region Inicjalizacja auto Zastosowanie...