Autor Zpráva
Kindy
Profil
Tohle napsal Yuhů o CSS na své stránce o kaskádových stylech:


Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. To teď není důležité.


Mohl by mi někdo vysvětlit "proč se jmenují Kaskádové"? Klidně i jako malému dítěti :D

Děkuju :)
juriad
Profil
Proč se to jmenuje kaskádové: http://www.webylon.info/K.21#M
Plaváček
Profil
juriad:

Tos to asi moc nevylepšil, Chamurappiho článek je určen spíš odborníkům, než začátečníkům. :)
Joker
Profil
Kindy:
Mohl by mi někdo vysvětlit "proč se jmenují Kaskádové"?

To odkazuje na přebíjení stylů, resp. jejich použití v kaskádě. (Vezme se stylopis s nejvyšší prioritou pro daný prvek a nastaví se vlastnosti, které udává. Ten zbytek „spadne“ na stylopis s druhou nejvyšší prioritou. Co není dané ani tam „spadne“ na stylopis s třetí nejvyšší prioritou, a tak dále.)

Je to vlastně do jisté míry podobné událostem v JavaScriptu (zachytávání/probublávání).

K odkázanému článku na Webylonu, podle je možné používat obecné uživatelské styly.
Například sdílecí plugin pro FB/Twitter/atd. používaný na některých stránkách je napozicovaný tak geniálně, že při zvětšení stránky naleze před obsah.
To pak uživatelský stylopis #social-plugins { display: none !important; } vyřeší docela efektivně.
jefitto44
Profil
Presne tak, kaskadove štýly znamená to, že sa navzájom prebíjajú... a vždy sa aplikuje ten s najväčšou "váhou"... príklad:

.div {
background:white;
}

#div {
background:black;
}

<div class="div" id="div">TENTO DIV BUDE ČIERNY</div>


ID má väčšiu váhu ako class a preto to prebije. Môžeš mať však niekde inde v stránke definovaný div s classou div ale bez ID, v takom prípade sa vyššie uvedené aplikuje a div bude biely. Ty si môžeš napríklad nastaviť všetky odkazy aby boli červené.
a {
color:red;
}

ale v pätičke chceš odkazy napr. zelené, tak nastavíš
#footer a {
color:green;
}

drúhý riadok prebije ten prvý, pretože je presnejšie zameraný. Pochopils? :)
jenikkozak
Profil
Ještě doplním, že pro seznámení se s přebíjením hodnot vlastností a priorit jednotlivých selektorů se ti bude hodit přečíst si stránku Vlastní styly.
Kindy
Profil
jenikkozak, jefitto44, Joker:

Vzal jsem old učebnici od Imricha Buranského a ponořil se do toho a pochopil jsem z toho, že:

Kaskádové styly se přebíjejí podle toho, jak "přesně" jsem ten prvek, který chci změnit v selektoru definoval:

#li { color: blue; } - největší váha, ale:
ol #li {color: red; } - ještě větší váha - přebije #li - DEFINUJE PRVEK CO CHCI ZMĚNIT "PŘESNĚJI"

Imrich Buranský to v učebnici HTML píše takto:

li - všechny li
ul li - pouze li v nečíslovaném seznamu
ul ol li - pouze li v číslovaném seznamu který je v nečíslovaném seznamu

li.trida - všechny li, které náleží třídě trida

ul li.trida - všechny li, které náleží třídě trida, ale jsou součástí nečíslovaného seznamu

#li - identifikátor - jméno identifikátoru by mělo být v celém dokumentu HTML jedinečné

Z toho plyne PŘESNĚJŠÍ DEFINICE CSS STYLU PŘEBIJE TU MÉNĚ PŘESNOU.

Už tomu začínám myslím rozumět.

Ještě jsem si nepřečetl Vaše odkazy - ale přečtu si je :).

Děkuji za odpovědi :)


jenikkozak, jefitto44, juriad, Plaváček:

#social-plugins { display: none !important; }

Jeden autor jedné webové stránky napsal pro hlavičku toto:

#hlavicka {
    background: #F0F5F9 url('../img/logo.jpg') top left no-repeat;
    height: 150px !important;
    height: 150px;
    margin: 0px 10px auto;         
    position: relative;
}

Všemu rozumím, to background bych si napsal stylem:
background-color: blue;
background-image: url("soubor.jpg");
background-repeat: no-repeat;

Nechápu u toho ale dvě věci:

a) to top left u toho background: #F0F5F9 url('../img/logo.jpg') top left no-repeat;

b) právě to height: 150px !important;, přesněji to !important

Co říkám prohlížeči tím !important? Jako důležité - zaměř se na to?
juriad
Profil
top left odpovídá tomu, jak se má obrázek na pozadí zarovnat, je-li větší nebo menší než element. Konkrétně se jedná o část background-position v deklaraci vlastnosti background.
Příklad http://kod.djpw.cz/eleb

Important je popsaný v ukázce. Téměř vždy se dokážeš obejít bez něj. Jeho největší nevýhodou je to, že ho může přebít zase jen important.
Má to spíš význam vynucení konkrétní hodnoty bez ohledu na sílu pravidla.
jenikkozak
Profil
Kindy:
Původně jsem tě chtěl odkázat trochu jinam: Kaskádování

Proč je ve tvé ukázce použito !important, nevím. Myslím si, že je to spíše projev zoufalství autora než nějaký promyšlený záměr.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: