Definice stylů
Definice stylů
Další možnosti
Pseudotřídy a pseudoelementy
Pseudotřída hover umožňuje definovat změnu formátu prvku při najetí myši.
a:hover {text-decoration: underline;} /* podtržení odkazu při najetí myši */
img:hover {border-color: maroon;} /* změna barvy rámečku při najetí myši */
Pseudotřídy rozšiřují možnosti stylů zejména pro odkazy. Lze odlišně formátovat navštívené a nenavštívené odkazy, chování odkazů při najetí myši nebo při kliknutí.
Odkazy při najetí myši, navštívené a nenavštívené
a:link {color:orangered;} /* nenavštívený odkaz */
a:visited {color:maroon;} /* navštívený odkaz */
a:hover {color:red;} /* odkaz při najetí myši */
a:active {color:gold;} /* právě prováděný odkaz */
Pro správnou funkci stylů je třeba dodržet výše uvedené pořadí.
První nebo poslední potomek
Máme-li např. v bloku fotogalerie několik obrázků, které mají určité okraje, můžeme změnit okraje prvního a posledního obrázku:
#fotogalerie img {margin: 15px;} /* všechny obrázky v divu fotogalerie */
#fotogalerie img:first-child {margin-left: 0px;} /* první obrázek */
#fotogalerie img:last-child {margin-right: 0px;} /* poslední obrázek */
První řádek a první písmeno
p:first-line {font-weight: bold;} /* první řádek odstavce */
p:first-letter {font-size: 20px;} /* první písmeno odstavce */
Styl podle atributu
Kromě již uvedeného class a id lze využít i další atributy (parametry) html elementu pro jeho formátování.
[title] {background-color: beige;} /* všechny prvky stránky, které mají title */
img[title] {border-color: gold;} /* všechny obrázky, které mají title */
img[title="Kliknutím zvětšit"] {border-color: gold;}
/* obrázky s titulkem Kliknutím zvětšit */
img[title~="zvětšit"] {border-color: gold;} /* titulek obsahuje slovo zvětšit */
input[type="text"] {width: 200px;} /* textová pole formuláře - type - text */