Kaskada i dziedziczenie CSS jest, właściwości, selektor, się, nie, mdash, selektora, będzie, color, tym, , , jest, właściwości, to, selektor, p, się, są, na, nie, mdash, do, selektora, będzie, color, im, tym, important, dziedziczenie, że, ilość, dla, selektoroacutew, elementu, jeśli, więcej, reguł, precyzyjniejszy, możesz, elementoacutew, i, kaskada, policzyć, niż, kolor, selektory, w, od, css, tła, przez, drugiej, inbsppseudoelementoacutew, precyzję, tekst, red, arkusz, ważniejsze, pomaga, tylko, gdzieś, pierwsza, klas, yellow , background, pwazny, atrybutoacutew, tego, colorblue, wnbspdokumencie, miał, czerwony, ponieważ, ltp, akapit, styloacutew, kolejności, identyfikatoroacutew, regule, wszystkie, abc, bo, tło, albo, jako, kroacutej, pasuje, precyzja, style, np, reguły, ten, 50, a, gt, został, ul, za, tyle, wg, samo, ważność, kolejność, ważniejsza, osobna , znbspmniej, tekstu, reguła , kaskady, bdquoaplikowanyrdquo, dokument, także, inbspdziedziczenia kaskada, decyduje, ktoacutere, przykryją, ważnych , elementowi, blue, nadać, zostaną, identyfikator, pierwszej, tleltpgt , bardziej, szczegoacutełowy, red , class=quotwaznyquotgtten, żoacutełtym, każdej, arkuszy, nadpisują, wcześniejsze, ulmenu, li, nadaje, większą, ważniejszy, pierwszeństwo, on, inbspużyć, zmieniony, ważność, ważniejszej, poacuteźniejsze, danej, nałożą, kilka, ich, znbspnajważniejszych, ważności, danego, ustalony, poacuteźniej, dołączania, dołączone, arkusze, nadany, zaaplikowane, zmienić, paragrafy, backgroundcolor, miały, będą, znbspnich, zmieni, urlfoopng, norepeat, anbspdruga, ustali, wartości, znbspwyśrodkowaną, czerwone, wnbspktoacuterymś, znaczy, dodaj, najpierw, important , przyklad, nawet, wartościami, colorred, pasujący, znbsparkuszy, mniej, samego, important jeśli, reguła, nim, mieć, literoacutewkę, zestaw, ktoacutery, błędoacutew, składniowych, spodziewasz, ktoacuterego, wnbspnieodpowiedniej, identyfikatora, używać, pewno, upewnij, one, mogą, colorred upewnij, tonapewnoten, niżej jeśli, patrz, grafiką, id=quottonapewnotenquotgttestltpgt , najpewniej, powodować, ignorowanie, zawiera, też, zadziała , prosty, inbspobramowanie, nazwy, zawierające, selektorami, goacuteruje, html, atrybut, javascript atrybut, dalszej, wszystkimi, firstletter, używany, najogoacutelniejsze, pośrednictwem, będzieltemgt, dokładniej , typowym, elementom, style=quotquot w, arkuszu, przypisuje, wartość p, pozostałe, ustawia, preferowany, czcionki, ltbodygt, inherit, nich, nieltstronggtltpgt nbsp nbsp, sumą, prostych, precyzji, jego, złożonego, znbspkilku, wcisnąć ważność, ma, chyba, ogoacutelny, jednak, samym, inbsptym, go, pominięty, hover, nad, dokładniejsze, inbsppseudoklas, [type=submit], składnikoacutew jeśli, precyzyjniejsze, trzeba, reguł najmniejszą, często, jeszcze, ltstronggtjuż, wszystkim, wszystkich, lired , [rel=up] , ol, +, ltpgtten, h1, green , strong, zrobić, tak , uporządkowanych, najogoacutelniejszego, całych, najdokładniejszego , li , mają, oznaczone, ważne, zmieniła, autoruser, kolejno , wnbspcss21 ważność, ol+li , lifirstline , zatem, pozostawić, określa, możemy, dwoacutech, przekazanie, pisma, można, podając, wymusić, dziedziczone, domyślnie, otrzymują, elementy, ale, znbspelementurodzica, elementudziecka nie, swoje, czyli, zielony, precyzyjniej kilka, ltemgtteż, poroacutewnać, chcemy, przykładoacutew, inbspwielkość, liredlevel , x34y , pseudoklas, dokładniejszy , inbspinnych, ważnej,

Niedziela 19 Maj 2024r. Godz 00:00:00
Postów: 251

Kaskada i dziedziczenie CSS

Arkusz stylów jest „aplikowany” na dokument wg reguł kaskady i dziedziczenia.

Kaskada decyduje, które właściwości zostaną zaaplikowane. Jeśli kilka reguł pasuje do danego elementu w dokumencie, to nałożą się wg ich ważności. Właściwości z najważniejszych reguł przykryją właściwości z mniej ważnych.

 p.wazny {color: red}
 p {color:blue; background: yellow;}

 <p class="wazny">ten tekst będzie czerwony na żółtym tle</p>

 Selektor p.wazny jest bardziej szczegółowy, niż p. Przez to pierwsza reguła
 jest ważniejsza od drugiej i akapit będzie miał 
 czerwony kolor tekstu. Ponieważ kaskada jest osobna
  dla każdej właściwości, akapit będzie miał także ustalony 
  kolor tła nadany w mniej ważnej regule, bo nie 
  został on zmieniony w ważniejszej.

ważność autor-user. Zmieniła się w CSS21.

Ważność określa kolejno:

!important: reguły oznaczone jako ważne mają pierwszeństwo
precyzja selektora: im precyzyjniejszy selektor, tym ważniejszy.
kolejność dołączania arkuszy: później dołączone arkusze są ważniejsze.
kolejność danej reguły: późniejsze nadpisują wcześniejsze p {color: red !important;} jest ważniejsze, niż: ul#menu > li > a {color:blue} ponieważ !important nadaje większą ważność pierwszej regule, niż precyzja selektora drugiej. p {background: blue url(foo.png) 50% 50% no-repeat;} p {background-color: red;} Paragrafy będą miały czerwone tło z wyśrodkowaną na nim grafiką. Pierwsza reguła ustali wszystkie wartości dla tła, a druga zmieni z nich tylko kolor.

Najpierw za wartościami właściwości dodaj !important:

 .przyklad {color:red !important;}

Jeśli to pomaga, to znaczy, że w którymś z arkuszy jest precyzyjniejszy selektor pasujący do tego samego elementu. Możesz pozostawić !important albo zmienić selektor na precyzyjniejszy (patrz niżej).

Jeśli to nie pomaga, to upewnij się, że selektor na pewno pasuje do tego elementu w dokumencie, którego się spodziewasz. Możesz mieć gdzieś literówkę albo używać selektorów w nieodpowiedniej kolejności. Możesz nadać elementowi identyfikator i użyć selektora identyfikatora — to prosty zestaw, który najpewniej zadziała.

 <p id="to-na-pewno-ten">test</p>

 #to-na-pewno-ten {color:red;}

Upewnij się też, że arkusz nie zawiera błędów składniowych, bo one mogą powodować ignorowanie nawet całych reguł.

Najmniejszą precyzję i tym samym ważność ma selektor ogólny (*). W dalszej kolejności, najogólniejsze są selektory zawierające nazwy elementów i pseudoelementów (p, :first-letter...). Dokładniejsze od nich są selektory atrybutów, klas i pseudoklas ([type=submit], .abc, :hover...). Jeszcze precyzyjniejsze są selektory identyfikatorów (#abc). Nad wszystkimi selektorami góruje atrybut style elementów HTML (często używany za pośrednictwem Javascript).

atrybut style został pominięty, chyba jednak trzeba go gdzieś wcisnąć...

Ważność selektora złożonego z kilku selektorów prostych jest sumą precyzji jego składników.

Jeśli zatem chcemy porównać precyzję dwóch selektorów, możemy to zrobić tak:

Policzyć ilość identyfikatorów — im więcej, tym selektor dokładniejszy.
Jeśli jest tyle samo, policzyć ilość klas, pseudoklas i innych atrybutów — im więcej, tym dokładniej.
Jeśli jest tyle samo, policzyć ilość elementów i pseudoelementów — im więcej, tym precyzyjniej.

Kilka przykładów uporządkowanych od najogólniejszego do najdokładniejszego:

 *
 li
 li:first-line
 ul ol+li
 h1 + *[rel=up]
 ul ol li.red
 li.red.level
 #x34y
 style=""

W typowym arkuszu stylów nie przypisuje wszystkich właściwości wszystkim elementom (np. ustawia się preferowany krój czcionki tylko dla <body>). Pozostałe elementy otrzymują swoje właściwości przez dziedziczenie, czyli przekazanie właściwości z elementu-rodzica do elementu-dziecka.

Nie wszystkie właściwości są domyślnie dziedziczone. Np. krój i wielkość pisma jest, ale tło i obramowanie — nie. Wymusić dziedziczenie można podając inherit jako wartość.

p {color: green}
strong {color: yellow;}

ten tekst będzie zielony, ten też będzie, a ten już nie!

Administracja

Strony WWW • Pozycjonowanie Stron SEO