Digitális kiadványok
CSS
CSS technikák
Bootstrap
Rangsor
Mi az a rangsor?
Egy elemre jellemzően több CSS szabály is vonatkozhat, amik felülbírálhatják egymást, a böngészők rangsorolással döntik el, hogy mely szabály lesz érvényes az adott elemre (melyik az erősebb).
Eredet
Három forrásból származhat stílus:
A böngésző alapértelmezett készlete, a felhasználó által definiált, és a webalkalmazás saját CSS-e, ez utóbbi felülbírálja a többit.
A User agent CSS a böngésző alapértelmezett formázásai egy alapot adnak a weboldalak tartalmának, így az minden nemű stílus formázás nélkül is értelmezhető lesz, ez a leggyengébb, legegyszerűbben felülírható stílus. A felhasználó által definiálható Reader CSS valamivel erősebb, de mindkettőt felülbírálja a webalkalmazások saját CSS stílusai, az Author CSS.
Sorrend
A korábbi szabályokat felülírják a későbbiek. Minél később található a kódban egy stílus, annál erősebb. Ez az állományok bekötési sorrendjére is érvényes.
1
div {
2
color: red;
3
color: blue; /* a későbbi érvényesül */
4
}
5
6
span {
7
color: green;
8
}
9
10
span {
11
color: purple; /* a későbbi érvényesül */
12
}
Copied!
Szűkítés
4 szinten hoz létre minden szabály kijelölője alapján a böngésző egy rangsort, a magasabb értékkel rendelkező szabály fog érvényesülni, felülbírálva a sorrendet. A szűkítés értékét a kijelölő alapján határozza meg a böngésző.
Kijelölő típusa
Súlyozás értéke
1.0.0.0
0.1.0.0
0.0.1.0
0.0.0.1
0.0.0.0
A szűkítés értékei összeadódnak, és a kapott érték alapján a rangsorolja a böngésző a CSS szabályokat. Ezek nem helyi értékek, egy darab egyedi azonosító a kijelölőben bármennyi osztályt felülbírál.
1
div {} /* értéke: 0.0.0.1 */
2
label.name {} /* értéke: 0.0.1.1 */
3
.name {} /* értéke: 0.0.1.0 */
4
#contact {} /* értéke: 0.1.0.0 */
5
div#contact {} /* értéke: 0.1.0.1 */
6
div#contact .name {} /* értéke: 0.1.1.1 */
7
div#contact label.name {} /* értéke: 0.1.2.1 */
Copied!
A szűkítésnél megfigyelhetjük, hogy a kijelölők súlyozása az általánostól egyre erősödik a specifikusabb, szűkebb kijelölők felé. Leggyengébb az általános kijelölő, ami minden elemre vonatkozik, legerősebb az azonosító kijelölő, ami csak egy bizonyos elemre.
A HTML elemen a
style tulajdonságban elhelyezett szövegközi stílusok erősebbek a többi stílusnál, szűkítési értékük mindig 1.0.0.0, ezt a CSS állományban, elhelyezett CSS nem tudja felülbírálni (kivételt képez a következő fejezetben tárgyalt fontosság).Fontosság (!important)
!important jelöléssel ellátott szabály mindig erősebb a nem important szabálynál, két important közözött a további rangsorolási szabályok érvényesülnek. Az fontosság felülbírálja az eredetet, a sorrendet, és a szűkítést is.
1
div {
2
color: red !important;
3
}
Copied!
Az !important jelölés ismételt használata egy idő után nehezen olvashatóvá teszi a kódot a szűkítés folyamatos felülbírálása miatt, ezért használata kerülendő, csak akkor érdemes használni, ha minden más lehetőséget kimerítettünk.
Last modified 2yr ago
Export as PDF
Copy link