Timesoft

Osobní stránky webkonzultanta

Rubrika: CSS (page 3 of 3)

Obtékání float

Klasický problém při použití float uvnitř neplovoucího prvku je, že jej obteče. viz následující ukázka:

[sourcecode language=“css“]div.box {border: 1px solid red;}
div.left {float: left; width: 30%; }
div.right {float: right; width: 60%;}[/sourcecode]

Problém je ukázán zde: http://tinkerbin.com/nUdXjaJF
Původním řešení bylo použití dalšího prvku, které obtékání zruší. Například @pixy na svém původním blogu ukazoval použití prvku hr.cistic
Novější řešení nepoužívá další prvek, ale vystačí si pouze s doplněním kódu do rodičovského prvku. Schválně si zkuste do div#box přidat: overflow: auto; width: 100%;

Líbil se vám článek? Sdílejte jej prosím:

Zkouška nanečisto

Pokud si chcete s html + css + javascriptem hrát, aniž byste si cokoli ukládali na disk, můžete použít následující aplikaci: http://tinkerbin.com/. Ve třech oknech si hrajete s kódem, ve čtvrtém okamžitě vidíte výsledek.




Líbil se vám článek? Sdílejte jej prosím:

CSS pseudo-třídy

Co to je? Třídy, které přidají speciální vlastnosti na některé prvky. Nejznámější pseudo-třídy jsou pro odkazy, např.: a:hover
Někdy se mi přehled docela hodí, na internetu jsem je vždy nacházel roztříštěné, většinou nebyly na jednom místě.

Obecný zápis je:
selektor:pseudo-třída {atribut:jeho_hodnota}
selektro.trida: pseudo-třída {atribut:jeho_hodnota}

Dynamické pseudo-třídy:

a:link {color: black;}         /* nenavštívený odkaz */
a:visited {color: red;}        /* navštívený odkaz */
a:hover {color: blue;}        /* reakce na myš */
a:active {color: green;}    /* vybraný odkaz */

Nejčastěji je používána kombinace
a {color: red;}            /* barva se aplikuje na všechny 4 pseudo-třídy */
a:hover {color: blue;}

Pořadí jednotlivých tříd je uvedena tak, jak by měla být, aby jednotlivé linky fungovaly, tj. třída hover musí být uvedena po link a visited, active musí být uvedena za hover,

input:fokus {background-color: red;}
/* změní barvu pozadí po aktivaci myší, funguje pouze na prvcích, které čekají na událost z klávesnice*/

První a poslední

Následující pseudo-třídy umožňují formátování prvních nebo posledních potomků jiných prvků.

li:first-child {color: red;}
/* li je potomek ul(ol), první výskyt obarví text zvolenou barvou */

li:last-child {color: green;}
/* li je potomek ul(ol), poslední výskyt obarví text zvolenou barvou */

p:first-letter {color: blue;}
/* vybere první písmeno z každého odstavce */

p:first-line {color: green;}
/* vybere první řádek odstavce; pro first-letter a first-line lze použít pouze následující atributy: font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, float, clear; first-letter a first-line budou fungovat pouze s blokovými prvky. */

*:lang(fr) {font-style: italic;}
/* vyznačí se všechna slova napsaná ve francouštině */

p:first-of-type {color: blue;}
/* vybere první prvek rodiče a na něm nastaví zvolenou barvu */

p:last-of-type {color: green;}
/* vybere poslední prvek rodiče a na něm nastaví zvolenou barvu*/

p:only-of-type {color: red;}
/* Vybere pouze takový prvek, který je pouze jediný potomek rodiče*/

p:olny-child {color: orange}
/* Vybere pouze takový prvek, který je jediným potomkem rodiče*/

p:nth-child(2) {color: blue;}
/* Vybere pouze jeden prvek, který je jako druhý v pořadí rodičovského prvku, IE7,8 nepodporuje */

p:nth-last-child(2) {color: red}
/* Změní barvu písma potomka rodičovského prvku počítáno od posledního výskytu, IE7,8 nepodporuje */

p.nth-of-type(2) {color: blue}
/* Změní barvu písma potomka rodičovského prvku počítáno od začátku, platí na výskyt p, IE7,8 nepodporuje  */

p.nth-last-of-type(2) {color: green}
/* Podobně jako předchozí, počítáno od konce. IE7,8 nepodporuje */

Ostatní

:root {background: red;}
/* Nastaví pozadí pro celý dokument html, IE7,8 nepodporuje  */

p:empty {color: red}
/* Nastaví barvu pro prázdné odstavce, IE7,8 nepodporuje */

:target:before {content: url(/images/lamp.gif)}
/*viz odkaz; neodzkoušeno; nefunguje v IE*/

input:enabled {background:red}
/* Na všechny povolené vstupní prvky aplikuje zvolenou barvu, IE7,8 nepodporuje */

input:disabled {background:green}
/* Na všechny nepovolené prvky aplikuje zvolenou barvu, IE7,8 nepodporuje */

input:checked {background:blue}
/* Na zaškrtávací pole aplikuje zvolenou barvu, funguje pouze v Opeře */

:not(p) {color: blue}
/* Všechny prvky v dokumentu, mimo vyjmenovaný, budou obarveny zvolenou barvou, IE7,8 nepodporuje  */

::selection  { color:#ff0000; }
::-moz-selection { color:#ff0000; }
/* myší označení prvky budou obarveny zvolenou barvou,  IE7,8 nepodporuje, pro Firefox zvlášť zápis, Jsou podporovány pouze některé atributy: color, background, cursor, outline */

Pokud jsem na nějakou pseudo-třídu zapomněl, budu rád, když ji v komentářích naznačíte, případně mi pošlete mail.

Update 26.20.2012:

Pseudo třídy můžeme doplnit o magické „n“. Příklad: p:nth-child(5n+1) – vybere první odstavec a následně pak každý pátý. Krom číselných operací, lze dosadit i klíčová slova odd a even – sudý a lichý, což je daleko zajímavější.

 

Zdroje:

CSS Selector Reference. W3SCHOOLS. Http://www.w3schools.com/ [online]. 6.4.2012 [cit. 2012-04-06]. Dostupné z: http://www.w3schools.com/cssref/css_selectors.asp
MEYER, Eric A. Eric Meyer o CSS: kompletní průvodce. Vyd. 1. Překlad Jan Pokorný. Brno: Zoner Press, 2007, 560 s. ISBN 978-80-86815-64-0.

Líbil se vám článek? Sdílejte jej prosím:

Selektory v CSS

Základní zápis selektorů v css je všeobecně známý.  Možná na úvod by bylo vhodné si je lehce připomenout:

[sourcecode language=“css“]h1 {border-bottom: 1px solid red;}
p.black {color: black;}
div#red {background-color: red;}
[/sourcecode]

Toto je úplný základ, který snad ovládají všichni. Pojďme se ale podívat na vyšší level zápisu. Následující zápisy nejčastěji využijete tehdy, když stylujete html dokument, který nemáte možnost ovlivnit. Jestliže ji totiž máte, nic vám nebrání si k jakémukoli prvku dopsat nějakou tu třídu, nebo identifikátor.

Selektory s atributy

[sourcecode language=“css“]a[name] {color: green;}
a[href=“https://www.timesoft.cz“] {color: green;}
a[title~=“Foto“] {color: green;}
a[title*=“Foto“] {color: green;}
a[title^=“Foto“] {color: green;}
a[title$=“Foto“] {color: green;}[/sourcecode]

1. vybere veškeré odkazy, které obsahují atribut name
2. obdobně jako 1., jen přesnější zápis
3. vybere veškeré odkazy, které v atributu title obsahují text Foto
4. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota obsahuje řetězec „Foto“.
5. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota začíná na „Foto“.
6. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota končí na „Foto“.

Upozorňuji, že záleží na velikosti písmen.

Ukázka – Selektory v CSS

Líbil se vám článek? Sdílejte jej prosím:
Novější příspěvky »

© 2024 Timesoft

Autor šablony Anders NorenNahoru ↑