halado css eu edge
TRANSCRIPT
HALADÓ CSS"... csak furcsa"
Hogy kerül az oldalba:● <link rel="stylesheet" href="azencssem.css">● <style>ruleok</style>● <element style="ruleok">
render mode:● quirksmode: IE4 vs NS4 időkből velünk maradt renderelési
mód● standards mode: a CSS standardok betartásával renderel● almost standards mode: mint a standards mode, csak az
<img> tagnek alul hagy egy kis helyet (úgy rendereli, mint a szöveget, ott pedig van hely a lenyúló karaktereknek: g, j, q, stb..). Segíteni lehet rajta: img { display:block }
Ismétlés - kezdetek
Ismétlés - render moderemek összefoglaló táblázat: http://hsivonen.iki.fi/doctype/
<!DOCTYPE html>
Ha másért nem, ezért már megérte a HTML5 :)
IE6 és IE7 almost standards mode-ba vált, amit lehet kezelni, a többi böngésző (kivéve a NS6) standards mode-ba vált.
Különbségek: http://quirksmode.org/css/quirksmode.html
Ismétlés - szintaktika
rule: selector + declaration block
selector: minden ami az első { előtt van
declaration block: { declaration1; declaration1; declaration1; }
declaration : property ':' value;
comment : '/*' text '*/'
Ismétlés - selectors (mindenhol)* Matches any element.
E Matches any E element (i.e., an element of type E).
E F Matches any F element that is a descendant of an E element.
E:linkE:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:activeE:hoverE:focus
Matches E during certain user actions. :focus csak IE9-ben:active és :hover csak linkeken IE6-ban, :active csak linkeken IE7-ben,
DIV.warning Language specific. (In HTML, the same as DIV[class~="warning"].)
E#myid Matches any E element with ID equal to "myid". ezt ne írd le sose, elég a #myid
Ismétlés - selectors (IE6 után)E > F Matches any F element that is a child of an element E.
E:first-child Matches element E when E is the first child of its parent.
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined).
E + F Matches any F element immediately preceded by a sibling element E.
E[foo] Matches any E element with the "foo" attribute set (whatever the value).
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".
E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
Ismétlés - class selectorsElméletileg csak akkor létezik, ha HTML-el dolgozunk.a .selector jelölés egyenlő egy attributum selectorral: *[class~=”selector”]
egyszerre több class értékre is lehet illeszteni:.selected { border:1px solid red } .item { color: black; font-size:24px }.item.selected { background: yellow; color:blue }
<li class=”item”>alma</li><li class=”item selected”>körte</li><li class=”item”>szilva</li><li class=”item”>cseresznye</li><input class=”selected”>
… de ehhez buta az IE6, tehát ha ő is target, akkor általában másképpen kell szervezni mindent:
.item-selected { font-size:24px; background:yellow; color:blue; border:1px solid red }
<li class=”item”>alma</li><li class=”item item-selected”>körte</li><li class=”item”>szilva</li><li class=”item”>cseresznye</li>
Ismétlés - cascading
1. megkeresi az összes rule-t ami illeszkedhet az elementre2. sorbarendezi fontosság és származás szerint:
1. böngésző deklarációk2. user deklarációk (user stylesheet lassan kihal a böngészőkből)3. szerző deklarációk4. szerző important deklarációk5. user important deklarációk
3. sorbarendezi a rule-okat, amiknek ugyanaz a fontossága és származása a selector specifikussága szerint (specifikusabb felülírja az általánost)
4. sorbarendezi a rule-okat sorrend szerint: ha két deklaráció ugyanolyan fontos, specifikus és származásuk is ugyanaz, akkor a későbbi nyer
Ismétlés - cascading specifikusság
1. legyen négy változónk: a=0,b=0,c=0,d=02. a=1 ha a deklaráció az element style attribútumában van3. b=a selectorban található ID attribútumok számával4. c=a selectorban található attribútumok és pszeudo-osztályok száma5. d=a selectorban található elment nevek és pszeudo-elementek száma6. fűzzük össze a négy változót és a kapott szám (“in a number system with a large
base”) adja meg a selector specifikusságát
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
Ismétlés - öröklődés
Vannak olyan propertyk, amik öröklődnek az element documentum fában lévő szülő elementjétől. Ha szeretnénk, hogy egy olyan property is öröklődjön, ami a szabvány szerint egyébként nem, akkor használhatjuk az inherit értéket.
Automatikusan öröklődő propertyk:
● color● font (and related properties)● letter-spacing● line-height● list-style (and related properties)● text-align● text-indent● text-transform● visibility● white-space● word-spacing
Doboz model
Visual formatting model - anonymous boxes
Anonymous block box: ha egy block element tartalmaz block elementet, akkor csak block elementet tartalmazhat.
<DIV> nem inline element! <P>More text</p> </DIV>
Anonymous inline box: bármilyen szöveg, amit block element tartalmaz, inline elementnek kell tekinteni.
Visual formatting model - 'display' propertyblock
Az element block boxot kap: egymás alá jönnek, értelmezhető magasságuk és szélességük van.
inlineinline boxot kap az element. Az ilyen elementek nem dobozt kapnak a renderelés során, hanem sorokba rendezi őket a böngésző: egymás után jönnek
inline-blockAz element maga inline elementként, de a belseje fele block elementként viselkedik: bár egymás után jönnek a sorban, de lehet neki magassága és szélessége. (IE6-ban is létezik, de csak olyan elementekre lehet mondani, ami egyébként inline element)
noneNem csinál semmilyen boxot az elementnek és az element gyerekeinek sem. Nemcsak "nem látszik", hanem nem is számol ki rá semmit
list-itemkészít egy block boxot és egy "marker" boxot
run-inVagy block vagy inline boxot kap az element, kontextustól függően
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
Az ilyen display értékkel rendelkező elmenetek úgy viselkednek mint a táblázatok (ne használd, ott a <table>)
Pozícionálás
1. Normal flowTartalmazza a block formattingot, inline formattingot, relative pozícionálást és a run-in boxokat
2. FloatsA float model során elhelyezi a dobozt a normal flow szerint, de utána kiveszi és a 'float' értékének megfelelő irányba csúsztatja
3. Absolute positioningTeljesen kiveszi a dobozt a normal flow-ból és pozícionálja a legközelebbi pozícionált szülőhöz képest
Pozícionálás - normal flow
Minden element vagy block vagy inline formatting contextbe tartozik.
Block formatting context: Az ide tartozó elemek dobozait a böngésző függőlegesen helyezi el. A doboz jobb és bal szélei mindig hozzáérnek a befoglaló doboz széleihez. Ez nem jelenti azt, hogy a doboz line boxai ne csökkennének a floatok miatt.
Inline formatting context: Az ide tartozó elemek dobozait a böngésző egymás után helyezi el, vízszintesen fentről lefele. Az elementeket line boxokba rendezi. Ez a doboz körbeveszi a legfelső és legalsó pontját az egy sorban lévő inline elementeknek.
Pozícionálás - float
A böngésző kiveszi a float elemet a flow-ból és addig mozgatja jobbra vagy balra, amíg a mozgatott elem széle hozzá nem ér a befoglaló széléhez, vagy egy másik floatolt elemhez.
Ha vízszintesen nem férne el a doboz vagy a clear property nem engedi, akkor lejebb mozgatja és folytatja tovább.
A fentieket befolyásolhatja a clear property, ami egy elementen szabályozza, hogy melyik oldalán nem lehet float.
Pozícionálás - float - clear
a kép az első paragrafuson belül floatol balra
a második paragrafuson clear:left van
Pozícionálás - absolute
Bekapcsolni a position:absolute vagy a position:fixed deklarációval lehet.
Az abszolút pozicionált elemet a legközelebbi pozicionált felmenőjéhez, de a fixed pozicionált elemet a viewporthoz képest helyezi el a böngésző.
Az ilyen elemet a böngésző teljesen kiveszi a rendering flow-ból, és a megadott helyre rajzolja ki. Ez viszont nem jelenti azt, hogy a document tree-ből kivenné, tehát az öröklődés továbbra is él.
példák
http://cssdesk.com/4becY - formhttp://cssdesk.com/tXmpJ - toc (float)http://cssdesk.com/TJhtH - toc (fixed)http://cssdesk.com/rH67X - layout (absolute)http://www.csszengarden.com/