Öröklés, lépcsőzetes és css specifitás
A prioritások megértése
Nézzük meg a stíluslapokat növekvő prioritásként
- A legfontosabb prioritás a böngésző belsejében található stíluslap, ők az alapértelmezett stílusok szerepét játszhatják
- egy kicsit fontosabb a felhasználó által a böngésző beállításaiban létrehozott stíluslapok elsőbbsége (ami ritka)
- további stílus weboldal. és ez jellegzetes, a weboldal stíluslapok háromféle módon deklarálhatók. minden út létrehoz egy saját prioritással rendelkező táblát. felsoroljuk őket növekvő sorrendben:
3.1. címkével összekapcsolt táblák . egy külső css fájlban helyezkednek el, és a legkisebb prioritást élvezik a webes dokumentum többi táblája között
3.2. táblázatok önmagukban a html dokumentumba, címkék között . nagyobb prioritást élvezzen, mint a 3.1. táblázatokban
3.3. a style = "..." attribútumban található stíluslapok sokkal fontosabbak, mint a 3.2 táblázatok
3.4. a legfontosabb prioritás a stílusok címkével a "! fontos"
A stíluslap fontossága e pontok szerint a következőképpen írható le:
Például háromféle stílus van a weboldalon
- Az első stílus a main.css fájlban található a tartalomsal
A kapott stílus a p számára szín: zöld. mivel ez a legfontosabb.
A kaszkád így épült: a main.css stílust a p stílusra cserélte, amely a böngészőben "alapértelmezett", mivel elsőbbséget élvez; további stílus "Lefutott" a stílus a p main.css; még mindig van egy stílus a p címke attribútumában. mert ez magasabb a prioritásnál, mint a szín: piros stílus van megadva . akkor helyettesíti, végül a kapott stílus színe: zöld.
És mi a specificitás?
A különböző táblázatok stílusainak prioritásaival minden világos, de felmerülhet a kérdés, de mi van akkor, ha több táblázatból származó stílus érhető el ugyanazon html címkéhez? Például a h1 fejlécre a main.css fájl íródik
Milyen színű a h1 címe? Válasz: kék
Kiderül, hogy az egyik táblázatban szereplő stílusok nem mindig egyenlőek egymással, a stílus fontossága egy ilyen fogalmat definiál specifikusnak. Ez azt jelenti, hogy minél specifikusabb a választó, annál nagyobb prioritási stílus, esetünkben a "cikk h1" választó sokkal pontosabb, mint a "h1".
A prioritás specifikusságának meghatározása a következő szabály szerint történhet:
A választó sajátossága a következő pontokban fejezhető ki:
- az egyes azonosítók választója 100 pontot kap (a "#id" azonosító példája)
- választó minden osztályra vagy pszeudosztályra - 10 pont (példa az osztályra és a pszeudosztályra ".my", ": href")
- az egyes címkékhez tartozó választó 1 pont (példa "h1")
Ebben az esetben az első választó «h1» 1 pont, és egy második választó «cikket h1» 2 pont, így a stílus színe: kék fontos chemcolor: piros. így a fejléc színe kék lesz.
A baloldali oszlopkapcsolókban egy példát adok a választókészlettel kapcsolatban. a megfelelő "specifikus pontszámok"
Végül is, amit mondtak ...
Szeretnék megemlíteni néhány pontot, amelyeket meg kell jegyezni
- A prioritásokkal, a stílusok sajátosságával kapcsolatos kérdés csak akkor következik be, ha két vagy több stílust alkalmaznak egy elemre. azaz amikor konfliktusok vannak a stílusokkal.
- A stílusütközés csak akkor fordul elő, ha a stílusok közvetlenül egy elemre mutatnak. Például, ha kijelöljük a cikkcímkét, hogy a szöveg színe kék legyen. majd a h1 gyermekelemére, hogy a szöveg színe zöld legyen. akkor a h1 eredmény zöld lesz. Nincs konfliktus. Az a szabály, amely közvetlenül irányítja a stílust a nem versenytárs elemhez, öröklődik a szülőelemből, ez mindig fontosabb.
- Ha két vagy több egymásnak ellentmondó szabály ugyanaz a specificitás szempontjából (azonos pontszámok), akkor az utoljára írtnak kell lennie.
Érdekli Önt:
- Belső webhely optimalizálás (SEO)
- Az SQL struktúrája és szintaxisa (squeeze)
- Zeneszerző (gyors indítás)
- A DB elméleti alapjai (bevezetés az SQL-be)
Hálás lennék, ha megosztaná ezt a bejegyzést
