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.

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
Není podporováno v Internet Exploreru ani verze 9, jinde ano.

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.
MS IE neumí blinkat.
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
 
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.

Zalamování řádků

white-space normal
pre
nowrap
normální text
předformátovaný
nezalamovat
Předformátovaný text zachovává mezery a konce řádků jako ve zdroji. Obdoba tagu <pre>.
Nezalamovaný neudělá automatický konec řádky.
Podle mých zkušeností funguje pouze v Mozille a v IE 5.5 Závisí na <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> nebo vyšším.
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 normal
break-word
lámání slov
pokud se slovo na řádek nevejde, rozdělí se
Vhodné pro evropské texty, protože když se slovo vejde, tak to Explorer láme normálně.

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).
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).   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 a obtékání

* Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji šířka dokumentu (nezávislá na okně), 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 Internet Exploreru byla do šířky nesprá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
   
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.

Zobrazení

display block
inline
list-item
none
inline-block
table
flex
a další
blokový element
řádkový element
seznam
nezobrazí se
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. Nejzajímavější je možnost nezobrazení.
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

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 skoro všude, i v IE 8 (standardní mód), v IE 7 ne

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 (a asi ani starších IE)
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    
border-radius poloměr zakulacení v pixelech
v procentech
více hodnot
hodnota / hodnota
kulaté rohy
border: 1px solid blue; border-radius: 8px;
Chrome, IE 9, Opera, Firefox.
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.

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 

Pozicování

Následující vlastnosti se někdy shrnují pod pojem CSS-P. Nefungují v IE 3, NN 3 a v Opeře 3. 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
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
Podpora v IE 5+, v Mozille a v Opeře. 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
Podpora v IE 5+, v Mozille a v Opeře. Použití pouze u tagu <table> 
border-spacing délka vzdálenost mezi rámečky sousedních buněk  

Další vlasnosti

Vlastnost hodnoty význam příklady poznámky
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.

V Exploreru podpora od verze 9, v nižších verzích nutno doplnit vlastností filter:alpha().

box-shadow barva posunX posunY hloubka blokový prvek bude mít stín box-shadow: 2px 2px 20px black;  
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.

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.

Další vlastnosti teprve zkoumám (quotes, counter-increment, background-clip, background-origin, zoom).


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ů

Příklady zápisu (selektory)

Zápis stylu do hlavičky dokumentu: 

<style>
selektor {vlastnost: hodnota; vlastnost2: hodnota}
selektor2 {vlastnost: hodnota}  
/* atd. */
</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
CSS 3 selektory další CSS3 selektory použitelné zhruba od roku 2013, hlavně díky mizení starších IE
níže uvedené selektory nefungovaly ve starších verzích Exploreru, a tak jsou méně známé
dítě selektor > selektor body > div {width: 50%;} všechny oddíly, které jsou prvním potomkem těla, budou mít šířku 50% nefunguje v některých starých explorerech (určitě ne v šestce), proto se používá také k hackování
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. Určitě nefunguje v Internet Exploreru 6, Explorery 7 a 8 musím ještě vyzkoušet. Lze používat regulární výrazy, ale nikdy jsem to nezkoušel.
tag[atribut~="hodnota1 hodnota2"] atribut musí nabývat jedné z vyjmenovaných hodnot. Příklad se mi vymýšlet nechce.

Výklad použití selektorů mám v textu o třídách a identifikátorech. Vizte také zápis stylu prakticky

Poslední aktualizace 17. února 2016.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

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.