Poslední modifikace: 2022-11-07 12:42:48 UTC
přímo ve stylu:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
připojení několika různých stylů:
<link rel="stylesheet" type="text/css" href="zaklad.css" media="all">
<link rel="stylesheet" type="text/css" href="online.css" media="screen">
<link rel="stylesheet" type="text/css" href="tisk.css" media="print">stránka by měla mít připojený minimálně speciální styl pro tisk, který při tisku skryje navigaci a další „zbytečnosti“
„media queries“ – umožňují jednu a tutéž stránku inteligentně zobrazit na různých koncových zařízeních
styly se použijí selektivně na základě podmínek testujících např. rozlišení obrazovky, orientaci displeje, barevnou hloubku
podle dostupné velikosti obrazovky můžeme měnit layout stránky, zobrazovat/skrývat její části, …
media queries jsou základním prostředkem pro realizaci responzivního designu
podmíněně lze načíst celý styl:
<link rel="stylesheet" href="velkaobrazovka.css" media="screen and (min-width: 1200px)">
<link rel="stylesheet" href="smartphone.css" media="screen and (max-device-width: 480px)">případně můžeme mít jen podmíněné sekce uvnitř jednoho stylu:
@media screen and (min-width: 500px) and (max-width: 1200px) {
…pravidla…
}
@media screen and (min-width: 1200px) {
…pravidla…
}
@media screen and (max-width: 500px) {
…pravidla…
}CSS nabízejí prostředky pro definici a stažení písma do prohlížeče
prohlížeče podporují různé formáty písem
v poslední době konečně došlo ke shodě na jednom formátu WOFF (Web Open Font Format)
existují různé služby pro snadné zařazení písma v mnoha formátech – http://www.fontsquirrel.com/, http://www.google.com/webfonts
licence některých písem neumožňuje použití přímo na webu
pozor na podporu českých znaků
pozor na některých mobilních zařízení („bílá stránka“ než se načte písmo)
@font-face
{
font-family: Baskerville;
src: url(http://example.com/fonts/baskerville.woff);
}
h1 { font-family: Baskerville, serif; }<link href='https://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext'
rel='stylesheet' type='text/css'>
<style>
h1 { font-family: 'Titillium Web', sans-serif; }
</style>jakýkoliv objekt je možné libovolně 2D transformovat (posunutí, otočení, skosení, zvětšení/zmenšení)
lze aplikovat několik transformací najednou
h1 { color: red;
transform: rotate(30deg) translateY(200px); }vlastnosti CSS lze jednoduše nechat přejít do jiné hodnoty a tím vytvořit dojem animace
měnit lze několik vlastností najednou
lze ovládat rychlost a tempo přechodu
podporováno jen na některých vlastnostech
podpora se postupně rozšiřuje, ve starších prohlížečích je potřeba používat „vendor prefixy“
h1:hover { color: blue;
font-size: 400px;
background-color: yellow;
transition: color 10s linear,
font-size 10s linear,
background-color 10s linear; }méně náročné na zdroje než animace vytvářené pomocí JavaScriptu
složitější průběh změn vlastností lze popsat pomocí pravidla @keyframes a vlastností animation-*
@keyframes enlarge-and-rotate {
from {
font-size: 4px;
}
20% {
transform: rotate(0deg)
}
80% {
transform: rotate(720deg)
}
to {
font-size: 400px;
transform: rotate(720deg)
}
}
h1 {
font-size: 4px;
animation-name: enlarge-and-rotate;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-direction: alternate;
}prohlížeče stále nenabízejí uspokojivé možnosti tisku
vydavatelé touží po jednom formátu, který půjde publikovat na webu, tisknout a použít pro e-knihy
nastavení okrajů na stránce; zvlášť pro liché, sudé a první
řízení stránkového zlomu
kontrola vdov a sirotků
číslování stránek
doplnění čísel stránek (obsah)
záložky
h2, h3, h4 { page-break-after: avoid; }
h1 { page-break-before: always;
thead, tr { page-break-inside: avoid; }pseudoselektory before a
after, vlastnost content
p.note:before { content: "Note: " }automatické číslování
h1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}možnosti se postupně rozšiřují a středně složité publikace je již je možné generovat PDF v tiskové kvalitě přímo z HTML+CSS
obtékáním (float)
pozicováním (position)
tabulkový layout
flexbox
grid