| Autor | Zpráva | ||
|---|---|---|---|
| Kindy Profil |
#1 · Zasláno: 10. 7. 2014, 13:58:34
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 |
#3 · Zasláno: 10. 7. 2014, 14:19:28
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 |
#4 · Zasláno: 10. 7. 2014, 14:56:06
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 |
#5 · Zasláno: 11. 7. 2014, 07:32:52
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 |
#6 · Zasláno: 12. 7. 2014, 00:03:02
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 |
#7 · Zasláno: 13. 7. 2014, 11:26:32 · Upravil/a: Kindy
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 |
#8 · Zasláno: 13. 7. 2014, 11:48:52
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 |
#9 · Zasláno: 13. 7. 2014, 15:40:29
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.
|
||
|
Časová prodleva: 10 let
|
|||
0