Přehled vlastností CSS

Stručný přehled vlastností a hodnot kaskádových stylů. Zejména jsem si vyhrál s příklady, které by měly být "živé" -- to znamená, že při jejich formátování byly použity přesně ty styly, jak jsou zapsány v textu příkladů. CSS se rychle vyvíjí, vlastností fungujících v prohlížečích přibývá.

V prvním sloupci jsou vlastnosti použitelné při deklaraci stylu, v dalším sloupci použitelné hodnoty, ve třetím výklad významu těchto hodnot. Nezáleží na velikosti písem. Zápis stylu do hlavičky dokumentu je potom symbolicky: 

selektor   {vlastnost: hodnota; vlastnost2: hodnota}

Např. body {color: red}. Podrobněji v předchozích textech kurzu CSS.

Font (písmo)

Vlastnost Hodnoty Význam Příklady Poznámky
font-family seznam písem Druh písma, font font-family: Arial CE, sans-serif Může se zadávat více písem za sebou, odděluje se čárkami. Pokud klient nemá v systému první font, bere další atd.

Vizte Přehled použitelných písem.

font-style normal
italic
oblique
normální
kurzíva
skloněné
font-style: normal
font-style: italic
font-style: oblique
Skloněné písmo (oblique) má být prostá geometrická transformace, kurzíva je jiný řez. Prohlížeče většinou užívají kurzívu i při oblique.
font-variant normal
small-caps
normální
kapitálky
Font-variant: Small-caps Kapitálky jsou velká písmena velikosti malých. Velká písmena by měla být trochu větší.

IE 5 udělá sice kapitálky, ale zmenší i velká písmena, což by neměl.

font-size xx-small
x-small
small
medium
large
x-large
xx-large
výška
procento
mrňavé
maličké
malé
střední
velké
obří
maxipsí
výška
zvětšení
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: 14pt
font-size: 16px
font-size: 125%
V IE 6 je vykreslovaná velikost závislá na !doctype, tedy na vykreslovacím režimu.

Vizte použitelná písma v různých velikostech. 
Vizte délkové jednotky v CSS.
Vizte
velikosti písma podle prohlížečů

font-weight normal
bold
bolder
lighter
100, 200, 300,
400, 500, 600,
700, 800, 900
normální
tučné
trochu tučnější
trochu světlejší
duktus
vyjádřený
číslem
font-weight: normal
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: 100 font-weight: 300,
font-weight: 400
font-weight: 500 font-weight: 600
font-weight: 800
font-weight: 900
U většiny fontů mají smysl jenom základní tloušťky: záleží to na výrobci fontu.

Bolder a lighter se doporučuje nepoužívat.

font všechny možné předchozí hodnoty nebo systémové písmo font: italic bold 20px Arial Tato deklarace je citlivá na pořadí jednotlivých údajů. Musí se použít v pořadí: kurzíva tučnost  velikost jméno.

Použije-li se v deklaraci např. font: 12pt/14pt, údaj za lomítkem se vztahuje k vlastnosti line-height.

Vlastní font načtete přes @font-face. Další rozumné vlastnosti fontů nejsou moc podporovány. Například vlastnost font-stretch musí podporovat i samotný font, nejen prohlížeč.

Text / odstavec

Vlastnost Hodnoty Význam Příklady Poznámky
text-decoration none
underline
overline
line-through
blink
bez dekorace
podtržení
"nadtržení"
přeškrtnutí
blikání
text-decoration: none
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink
Teoreticky se dá zadávat více vlastností najednou.
text-underline-position auto
under
normální podtržení
podtržení níže
text-underline-position: auto
text-underline-position: under
Podtržení se musí zařídit zvlášť. Nepodporuje Safari.
text-transform none
capitalize
uppercase
lowercase
nechat jak to je
Začátky Slov Velké
VELKÁ PÍSMENA
malá písmena
Text-Transform: none
Text-Transform: capitalize
Text-Transform: uppercase
Text-Transform: lowercase
 
text-shadow posunX posunY rozmazání barva stín textu
text-shadow: 0px 5px 3px #800
vykreslí 5px pod textem červený stín rozmazaný na 3 pixely
Explorer podporuje od verze IE 10.
word-spacing normal
délka
mezislovní mezera
zvětšená o délku
word-spacing: normal
word-spacing: 100px
Prohlížeče podporují od šestých verzí.
letter-spacing normal
délka
prostrkání znaků
zvětšené o délku
letter-spacing: normal
letter-spacing: 5pt
 
line-height normal
výška
násobek
procento
výška řádku
absolutní výška
násobek
zvětšení
line-height: 3
line-height: 8px
line-height: 80%
 
text-indent délka
procento
odsazení prvního
řádku

text-indent: 50px;
druhý řádek odstavce

Popis použití u českých odstavců
text-align left
right
center
justify
zarovnání vlevo
vpravo
na střed
do bloku
text-align: left

text-align: right

text-align: center

text-align: justify blablabla blablabla blablabla bla bla bla

Dá se použít jen u blokových elementů, tj. u věcí, které má smysl zarovnávat, například u odstavců.
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
procento
na řádek
dolní index
horní index
co nejvýše
vršek k vršku
střed na střed
co nejníže
spodek ke spodku
procento výšky
baseline řádek
sub řádek
super řádek
top řádek
text-top řádek
middle řádek
bottom řádek
text-bottom řádek
30% řádek
Vertikální zarovnání nízkého prvku na vyšším řádku

Vlastnosti top, middle a bottom se dají použít u buněk tabulky a u obrázků na řádku.

Pro vertikální umístění větších prvků doporučuju display: flex a align-items: center;

Zalamování řádků

white-space normal
pre
nowrap
pre-wrap
pre-line
normální text
předformátovaný
nezalamovat
zachovají se bílé znaky, ale text se zalomí na konci slov
jako normal, ale řádkové zlomy ze zdroje se zachovají
Předformátovaný text zachovává mezery a konce řádků jako ve zdroji. Obdoba tagu <pre>.
Nezalamovaný neudělá automatický konec řádky.
tab-size 8
počet znaků
délka
tabulátor má šířku 8 znaků
tabulátor má šířku počet znaků
tabulátor má zadanou šířku
Pouze pro text s white-space: pre; a white-space: pre-wrap;
word-break normal
break-all
keep-all
lámání slov normální
vždy na konci řádku
nikdy na konci řádku
keep-all funguje jenom v asijských textech
zmínka v souvislosti s wbr
word-wrap
synonymum k overflow-wrap
normal
break-word
break-all
lámání slov
pokud se slovo na řádek nevejde, rozdělí se
rozdělí se všechna slova, která by jinak přeskočila na další řádek
Vhodné pro evropské texty, protože když se slovo vejde, tak to Explorer láme normálně.
hyphens none
auto
manual
slova se nikdy nerozdělují
rozdělují se jen tam, kde je &shy;
rozdělují se podle jazykových pravidel
V mnoha prohlížečích nefunguje na české texty (2019: češtinu nerozděluje Firefox, Chrome pro Windows nerozděluje nic)

Barvy a pozadí

Vizte také návod pro použití pozadí v HTML a CSS.

Vlastnost Hodnoty Význam Příklady Poznámky
color barva barva písma color: blue Barva písma a základních rámečků nebo barva toho, k čemu se to vztahuje (zápis barev).
opacity číslo od 0 do 1 míra neprůhlednosti, opacity: 0
opacity: 0.2
opacity: 0.5
opacity: 1
např. opacity: 0 znamená průhledné a neviditelné,
1 normální,
0.5 poloprůhledné,
0.8 průhledné z 20 % atp.
background-color barva
transparent
barva pozadí
průhledné pozadí
background-color: yellow
background-color: transparent
Barva pozadí. Dá se zadávat libovolná barva (zápis barev).
background-image none
url(cesta)
linear-gradient(...)
další gradienty

obrázek na pozadí
gradient na pozadí
background-image: url('pozadi5.gif');
background-image: linear-gradient(yellow, green);
Gradient je zde nastaven blokovému prvku div.
background-repeat repeat
no-repeat
repeat-x
repeat-y
pozadí se opakuje
neopakuje
opakuje v ose X
nebo v ose Y
background-image: url('pozadi5.gif'); background-repeat: repeat
background-repeat: no-repeat
background-repeat:
repeat-x
background-repeat:
repeat-y
 
background-attachment scroll
fixed
pozadí se posouvá
pozadí je jako přibité
příklad má smysl pouze u pozadí stránky; fixed se používá zejména v souvislosti s rámy  
background-position top, center, bottom

left, center, right,

délka, procento
Poloha obrázku na pozadí
(nejčastěji pokud se neopakuje)

background-image: url('pozadi5.gif'); background-repeat: no-repeat; background-position: right 50%

2 hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze.
background   všechny výše uvedé hodnoty background: url('pozadi5.gif') no-repeat scroll silver center bottom Vizte Povídání o pozadí
background-clip border-box
padding-box
content-box
Určuje, zda se bude pozadí vykreslovat i pod rámečkem, pod paddingem a nebo jenom pod obsahem (content). příklad background-clip a background-origin Podpora v Opeře, Firefoxu, Chrome a v IE9. V jiných prohlížečích to funguje jako border-box.
background-origin border-box
padding-box
content-box
Má smysl pouze pro prvky s nastavenou background-position. Určuje, odkud se bude počítat poloha pozadí. Podpora v Opeře, Firefoxu, Chrome a v IE9.  V jiných a starších prohlížečích to funguje jako padding-box.
background-size dvě hodnoty oddělené čárkou (pixely, procenta)
contain
cover
auto
první číslo určuje šířku obrázkového pozadí, druhé výšku. Pokud jsou zadána procenta, sto procent je šířka prvku (resp. výška).
Contain roztáhne obrázek pozadí se zachováním poměru tak, aby se celý vešel do prvku.
Cover roztáhne pozadí, aby se do prvku vešla jeho kratší strana.
Auto hodnota vykresluje obrázek pozadí v jeho normální velikosti.
background-size: 100%, 100%; /* zdeformuje obrázek, který ale vše vyplní*/

background-size: 20px,20px;

background-size: contain;

background-size: cover;

background-size: auto, 50%;

Pokud je zadáno pouze jedno číslo, výška je automaticky "auto". Podpora v  Chrome, Opera, IE od verze IE 9 a Firefox od FF 4.

URL se zadává do závorek a apostrofů, např.: background-image: url('pozadi.gif') . Jsou ale možné i uvozovky nebo jenom závorky. URL může být absolutní i relativní, je ale citlivé na velikost písmen.

Velikost

Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji šířka dokumentu (což nemusí být šířka okna), kdežto procentuální výška nevnořených elementů se počítá z výšky okna!

Vlastnost Hodnoty Význam Příklady Poznámky
width auto
šířka
procento
automatická šířka
nastavená šířka
procento *
 Vizte popis délkových jednotek

Ve velmi starých verzích Internesprávně započítávána šířka paddingu a borderu. Už dávno vyřešeno. Dnes to lze měnit přes box-sizing.

height auto
výška
procento
automatická výška
nastavená výška
procento *
  Dá se nastavit jenom blokovým tagům.
Nejlépe funguje u <div>.
min-width šířka
procento
minimální šířka   V Internet Exploreru fungují už od verze 7
max-width šířka
procento
maximální šířka  
min-height výška
procento
minimální výška  
max-height výška
procento
maximální výška  
box-sizing content-box
border-box
do šířky a výšky se nepočítá padding a border
do šířky a výšky se počítá padding a border
   

Zobrazení

display block
inline
list-item
none
inline-block
table
flex
a další
blokový element
řádkový element
seznam
nezobrazí se
blok na řádku
tabulka
flex zobrazení
display: block <br>
display: inline <br>
display: list-item <br>
display: none <br>
Jde o to říct prohlížeči, že některý element je druhu odstavec (blok), nebo že má být zarovnán do řádku, nebo že je to seznam nebo blok na řádku (jako obrázek).
Nejzajímavější je možnost nezobrazení.
Hodnot pro tabulky je víc, více v popisu vlastnosti.
visibility visible
hidden
viditelný element
skrytý (neviditelný)
u skrytých objektů se vyhradí místo, jako by tam byly (narozdíl od display: none).
overflow visible
hidden
scroll
auto
nechat přetékat
oříznout
vždy rolovat
rolování, je-li třeba
pro elementy, které mají nastavené rozměry a nevejdou se do nich.

Vizte popis overflow příklad na overflow

text-overflow none
ellipsis
ellipsis - přidání tří teček na konec oříznutého slova Pro elementy s overflow: (hidden|auto|scroll). Pokud se v elementu vyskytne příliš dlouhé slovo, přidají se na konec tři tečky.

Okraje

Vlastnosti uvedené v této tabulce lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou většinou buňky tabulky nebo odstavce. Obrázek ilustruje významy vlastností. Chybné počítání v Internet exploreru se projevuje v tzv. quirk módu. Příklady se v níže uvedené tabulce nedají dost dobře udělat. 
** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá. Např.: padding: 12px 3px 6px 9px. Více o zápisu stran.

Vlastnost Hodnoty Význam Příklady Poznámky
margin
délka
procento
auto
šířka vnějšího okraje
procento *
automatický okraj
Vizte text o okrajích možno zadávat všechny čtyři okraje dohromady nebo zvlášť **

margin-top
margin-left
margin-bottom
margin-right
jako u margin vnější okraj
horní 
levý
spodní
pravý
Popis použití např. u českých odstavců  
padding délka
procento
šířka vnitřního okraje
procento *
možno zadávat všechny čtyři okraje dohromady nebo zvlášť **  
padding-top
padding-left
padding-bottom
padding-right
jako u padding horní vnitřní okraj
levý
spodní
pravý
   

Rámečky

Vlastnost Hodnoty Význam Příklady Poznámky
border-width thin
medium
thick
délka
šířka rámečku slabá,
normální
tlustá
nastavená
Příklady v příloze možno zadávat všechny čtyři okraje dohromady nebo zvlášť **
border-top-width
border-left-width
border-bottom-width
border-right-width
jako u
border-width
horní šířka rámečku
levá
spodní
pravá
 

Měl jsem tu dlouho chybu. Není to border-width-strana, ale border-strana-width.

border-color barva barva rámečku

border-color: red;
border-style: solid

možno zadávat všechny čtyři okraje dohromady nebo zvlášť **

Pro NN 4 nelze rozlišovat jednotlivé čtyři okraje

border-style

none
,
dotted,
dashed,
solid,
double,
groove,
ridge, 
inset, 
outset
Druh rámečku žádný,
tečkovaný,
čárkovaný,
plný,
dvojitý,
příkop,
val,
ďolík, 
návrší
border-style: none

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

IE 4 a 5 zobrazuje doted a dashed jako solid a stínuje vše černou barvou (proto je příklad v zelené, aby bylo alespoň něco vidět).
Ostatní prohlížeče včetně IE 5.5 zobrazují správně a stínují šedou. 
IE 6 zobrazuje úzkou dotted jako dashed
border-top
border-left
border-bottom
border-right
barva, tloušťka
a styl
celkové vlastnosti
strany rámečku
 Příklady v příloze  
border barva, tloušťka
a styl
všechny vlastnosti rámečku

border: solid blue 2px

 
outline none
tloušťka styl barva
vnější rámeček

outline: 1px dotted blue;

outline: 1px dotted blue; border: 1px solid red;

Outline se zobrauje těsně vně rámečku (border), pokud existuje. Outline má stejné hodnoty jako border.

Outline narozdíl od border nezabírá žádný prostor, kreslí se přes okolní obsah.

Podpora všude, i v IE 8

outline-offset none
tloušťka
vzdálenost border a outline

outline: 1px dotted blue; border: 1px solid red; outline-offset: 15px;

nefunguje mi v IE 11, v Edge 87 funguje
outline-color
outline-style
outline-width
jako u border-color, border-style a border-width
neexistuje nic jako outline-top, outline-right apod., ale dá se použít box-shadow
border-image none
url("ramecek.png")
obrázkový rámeček    
box-shadow barva posunX posunY hloubka blokový prvek bude mít stín box-shadow: 2px 2px 20px black;  
border-radius poloměr zakulacení v pixelech
v procentech
více hodnot
hodnota / hodnota
kulaté rohy
border: 1px solid blue; border-radius: 8px;
Podpora už všude
Slovníček okrajů a rámečků
border margin padding width top bottom left right
rámeček vnější okraj vnitřní okraj šířka (rámečku) horní spodní levý pravý

Prohlížeče se velmi liší v tom, na jaký tag dovolí okraje a velikost aplikovat. U některých tagů styl prostě ignorují. V příkladech je použit odstavec <p>.

** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá. Prostě hodinové ručičky. Pokud chybí čtvrtá hodnota (pro levý okraj), použije se protější (druhá pro pravý okraj). Pokud chybí i třetí (spodní), opět se použije hodnota protější (horní). Pokud je hodnota jenom jedna, použije se pro všechny strany.

Odrážky a číslování

Všechny vlastnosti seznamů lze podle mých zkušeností aplikovat na tagy <ul>, <dir>, <menu> a <li>. Některé podrobnosti chování CSS v seznamech.

Vlastnost Hodnoty Význam Příklady Poznámky
list-style-type disc
circle
square
decimal
lower-roman
lower-alpha
upper-alpha
none
puntík
kolečko
čtvereček
číslování
římské číslice
ábécéčkování
ABCD
bez odrážek
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • lower-alpha
  • upper-alpha
  • none
 
list-style-image none
URL(cesta)
normální nebo
obrázková odrážka
  • none
  • list-style-image: URL('pozadi5.gif')
 
list-style-position inside
outside
odrážky v úrovni textu
odrážka mimo text
  • list-style-position: inside
  • list-style-position: outside
při inside je puntík jakoby součástí dalšího textu
list-style všechny předchozí hodnoty 

Obtékání

Vlastnost Hodnoty Význam Příklady Poznámky
float left
right
none
umístění plovoucího (obtékaného)
objektu či zda
je neplavec

float: left

normální odstavec

float: right

 
clear left
right
both
none
čekání na skončení
plovoucích objektů
zleva, zprava,
obou, nebo žádných
  Používá se namísto atributu "clear" u tagu BR.
Většinou u nadpisů pod obtékanými obrázky.

Pozicování

Následující vlastnosti se někdy shrnují pod pojem CSS-P. Příklady se v tabulce nedají udělat plně funkční. Vizte popis pozicování.

Vlastnost Hodnoty Význam Poznámky
position absolute
relative
fixed
sticky
static
absolutní umístění
relativní umístění
ani neroluje
normální umístění
Vizte popis pozicování.
left auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
Pro prvky s position: absolute nebo position: relative.
Vlevo se posouvá zápornou hodnotou.
top auto
délka
procento
bez posunutí
posunutí dolů o délku
nebo o procento
Pro prvky s position: absolute nebo position: relative.
Nahoru se posouvá zápornou hodnotou.
right auto
délka
procento
pozicování od pravého okraje okna nebo elementu variace na vlastnosti left a top (top a left ale vždy vyhrají). Pouze pro objekty s position: absolute. Podpora od IE 5, v Opeře a v Mozille, ve starších prohlížečích je to katastrofa.
bottom auto
délka
procento
pozicování od spodního okraje okna nebo elementu
clip auto
rect(shora zprava zdola zleva)
normální zobrazení
zadání obdélníku pro oříznutí elementu
Pouze pro elementy s position: absolute.
Hodnoty v závorce udávají viditelný obdélník.
Shora a zleva jsou souřadnice levého horního rohu vzhledem k elementu. Zprava a zdola jsou souřadnice pravého dolního rohu.
Místo hodnoty se může zadat "auto"; v tom směru se to nebude ořezávat.
Vizte příklad a popis.
z-index auto
číslo
definice překrývání elementů
jakoby v ose z

Nefunguje pro tagy iframe, select (v IE) pro a flashové animace

Tabulky

Vlastnost hodnoty význam poznámky
table-layout auto
fixed
nerozměrovaná tabulka se přizpusobuje oknu;
fixed = tabulka se nezužuje do okna
Použití pouze u tagu <table> 
border-collapse separate

collapse
buňky v tabulce mají rámečky oddělené

sousední buňky mají vykreslený rámeček společně jednou čarou
Použití pouze u tagu <table> 
border-spacing délka vzdálenost mezi rámečky sousedních buněk  
caption-side top
bottom
nadpis tabulky <caption> se zobrazí nad tabulkou
nebo pod tabulkou
náhrada atributu align v tagu caption

Další vlasnosti

Vlastnost hodnoty význam příklady poznámky
content přidávaný text
url("obrazek.gif")
attr(atribut)
generovaný obsah před prvek (:before) nebo za prvek (:after) h2:after {content: " ahoj"; color: red} - za nadpis se přidá ahoj, navíc červeně,
 
:before dělá totéž před element,
Dříve to nepodporoval Internet Explorer 7, nyní (2012) již pomalu použitelné.
column-count auto
číslo
počet sloupců ve sloupcové sazbě
column-count: 2; -webkit-count: 2; -moz-column-count: 2; /* dvojka znamená, že sloupce budou dva */
od Internet Exploreru 10, ostatní prohlížeče zatím (2015) jen s prefixy -moz- a -webkit-
cursor Auto
Default
Crosshair
Hand
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
Automatický kurzor
základní kurzor
zaměřovací křížek
ručička v IE
ručička správně
přesouvací čtyřšipka
východní šipka
severovýchodní
severozápaní
severní
jihovýchodní
jihozápaní
jižní
západní šipka
textový kurzor
přesýpací hodiny
kurzor s otazníkem
Příklady kurzorů s dalšími hodnotami na samostatné stránce. Každý operační systém vykresluje kurzory trochu jinak. Skoro každá verze prohlížeče se liší v podpoře.

Vlastnost cursor podporují i jiné prohlížeče (Mozilla, Opera), akorát používají standardnější slova pro hodnoty.

resize none
both
horizontal
vertical
Uživatel nemůže roztáhnout prvek.
Prvek jde roztáhnout oběma směry.
Prvek lze roztáhnout jen horizontálně.
Prvek lze roztáhnout jen vertikálně.
Není podporováno v Exploreru, Edge a v iOS.
Možnost roztažení je naznačena šedým trojúhelníčkem
object-fit fill
cover
none
contain
scale-down
fill: obrázek zaplní určený prostor, může se deformovat.
cover: obrázek se nedoformuje, jedna strana plně využije rozměr, zbytek ořízne.
none: obrázek nemění poměr stran ani velikost. Může se oříznout.
contain: obrázek nemění poměr stran. Upraví velikost, aby se vešel do rozměrů a nemusel ořezávat.
scale-down: jako contain, ale nezvětší se.
příklad na object-fit
writing-mode horizontal-tb
tb-rl
vertical-rl
vertical-lr
sideways-rl
sideways-lr
text zleva doprava
text shora dolů (otočený o 90°, o 270°)
a hodnoty pro mongolské a čínské jazyky
Svislý text hodnotou tb-rl je otočený nešikovně (odpovídá anglosaské normě). Vhodné pro záhlaví tabulek. Hodnoty vycházení z angličtiny: left, right, top, bottom.
Ostatní hodnoty nefungují v Exploreru 11.
content-visibility visible
auto
hidden
visible: prvek se počítá a vykresluje, i když je tak nízko, že není vidět - obvyklá hodnota
auto: prvek se počítá a vykresluje, jen když je vidět
hidden: prvek se nepočítá a nevykresluje, ani když by byl vidět
Hodnota auto umí hodně zrychlit vykreslování, když zbytečně nepřepočítává věci, které nejsou vidět. Další vlastnost contain-intristic-size: šířka výška; umožní zarezervovat prvku v dokumentu místo.
transform spousta hodnot geometrická transformace objektu   Osobně to nepoužívám, takže neumím.
all initial
inherit
unset
všechny vlastnosti se nastaví na výchozí
všechny vlastnosti se nastaví na hodnotu nadřazeného prvku
všechny vlastnosti na hodnotu nadřazeného prvku, pokud to jde, jinak výchozí
Hodí se v responzivním designu pro vynulování všech vlastností najednou.

Další vlastnosti teprve zkoumám (quotes, font-variant-numeric, counter-increment, zoom, text-emphasis).


Vite též: hlavní stránka CSS, úvod do CSS, praktické použití stylů, třídy a identifikátory, zápis barev, různé prohlížeče, zápis stylu pro různé prohlížeče, délkové jednotky v CSS, přehled HTML tagů

Zavináčová @pravidla

pravidlo význam poznámky a odkazy
@media(max-width: 500px){ CSS kód } kód se vyhodnotí v prohlížečích užších než 500px, typicky na mobilech @media pravidla v CSS
@media(min-width: 600px){ CSS kód } kód se vyhodnotí v prohlížečích širších než 600px
@media(orientation: portrait) { CSS kód } kód se vyhodnotí v mobilech otočených na výšku
@media(print) { CSS kód } kód se použije jenom při tisku Tisk stránek v CSS
@supports(vlastnost) {CSS kód} kód se použije v prohlížeči, který podporuje vlastnost Různý CSS styl v různých prohlížečích
@supports nepodporuje IE, ale aspoň ho ignoruje
@font-face { font-family: jmeno; src: url("font.ttf"); } Nastavení fontu. Font se načte ze souboru font.ttf a dále se dá používat jeho jméno ve vlastnosti font-family. @font-face
@import url("soubor.css") Do stylu se vloží příkazy ze souboru soubor.css  

Příklady zápisu (selektory)

Zápis stylu do hlavičky dokumentu: 

<style>
selektor {vlastnost: hodnota; vlastnost2: hodnota}
selektor2 {vlastnost: hodnota}  
/* atd. */
</style>

například odstavce, který jsou v HTML zapisovány tagem <p>, mají selektor p.

<style>
p {color: red; font-size: big;} /* modré velké písmo pro všechny odstavce */
</style>

Nebo se dají do samostatného *.css souboru napsat jenom selektory s vlastnostmi. Napojení toho souboru ve hlavičce: 

<link rel="stylesheet" href="soubor.css">

nebo

<style>
@import url("soubor.css")
</style>

druh selektoru zápis příklady význam příkladu poznámky
tag jméno tagu p {color: red} Normální text
<p>červený text</p>
 
identifikátor #identifikátor #cervene {color: red} Normální text 
<span id="cervene"> ovlivněný text</p>
 
tag#identifikátor b#cerverne {color: red} <b>Jenom tučný</b>
<b id="cervene"> tučný a červený</b>
 
třída .třída .cervena {color: red} Normální text 
<span class="cervena"> červený text</span>
Vztahuje se na každý tag, který má uvedeno správné class
tag.třída i.cerverna {color: red} <i>Jenom kurzíva</i> 
<i class="cervena"> červená kurzíva</i>
Vztahuje se jen na konkrétní tag, který má uvedeno správné class
hromadná deklarace selektor, selektor H1, H2, H3 {color: red}  <h1>Červený nadpis</h1>
<h3>Také červený </h3>
Seznam libovolných platných selektorů (tagů, tříd apod.) oddělený čárkou
kontextová deklarace (selektor potomka) nadřazenýSelektor selektor 
(oddělené mezerou)
li a {font-weight: bold} <li>normální text seznamu 
<a href=...>tučný odkaz</a></li>
Příklad: ztučňuje odkazy (<a>) uvnitř seznamu (<li>)
i b {color: red} <i><b>Červená tučná kurzíva</b></i>
<b><i>Normální tučná kurzíva</i><b>
Záleží na pořadí
pseudotřída tag:pseudotřída a:hover {color: red} <a href="...">Zčervená při přejetí myší</a> Pseudotřídy a:link, a:visited, a:active, jsou pouze u odkazů. Hover dříve také fungovala jenom u odkazů, nyní u všeho
p:first-line {color: red} <p>První řádka 
odstavce bude červená</p>
Existuje i :first-letter (první písmeno)
univerzální selektor * * {margin: 0px;} všechny prvky na stránce budou bez okrajů nefungovalo v některých starých explorerech
přímá deklarace v HTML (to není selektor) <tag style="zápis stylu"> <p style="color: red">Červený odstavec</p> Nezapisuje se do stylopisu, ale přímo do HTML
níže uvedené selektory nefungovaly ve starších verzích Exploreru, a tak jsou méně známé, ale už fungují všude
přímý potomek selektor > selektor body > div {width: 50%;} všechny oddíly, které jsou přímým potomkem těla, budou mít šířku 50%  
soused selektor1 + selektor2 h1 + p {color: red;} první odstavec (tag p), který následuje bezprostředně po nadpisu h1, bude červený 
sourozenec selektor1 ~ selektor2 h2 + h3 {color: red;} každý nadpis h3, který následuje kdykoli za h2 a zároveň jsou oba potomkem stejného prvku (třeba body), bude červený 
výběr podle atributu tag[atribut] a[rel] {font-style: italic;} všechny odkazy, které mají nastaven atribut rel na libovolnou hodnotu, budou kurzívou (italic) 
podle hodnoty atributu tag[atribut="hodnota"] input[type="submit"] {border: 5px solid red;} odesílací tlačítko (takový input, který má type roven hodnotě submit) bude mít 5px silný červený rámeček.  
tag[atribut~="hodnota1 hodnota2"] atribut musí nabývat jedné z vyjmenovaných hodnot. Příklad se mi vymýšlet nechce. 
podle toho, co má, tj. :has selektor1:has(selektor2) div:has(h2) {color: red;} vybírá selektor, který obsahuje jiný selektor. Tedy vybere tag, který obsahuje jiný tag. Na rozdíl od zápisu selektor1 selektor2, který by styloval selektor2, umí :has ovlivnit ten nadřazený, tedy selektor1.Je to strašně mocné. Úplně to převrací logiku interpretace kaskádových stylů. Dříve nebylo možné stylovat podle obsahu prvku (prvními výjimkami byly flex a grid). Lze používat až od 2024, protože to podporuje už i Firefox.

Mnohem lepší výklad selektorů na stránkách jecas.cz, ale chybí mu tam ten nejsilnější :has. Výklad použití selektorů mám v textu o třídách a identifikátorech. Vizte také zápis stylu prakticky

Stránka vznikla v roce 1998. Poslední aktualizace 19. listopadu 2020.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.