Chrome DevTools
Elements panel – HTML és CSS vizsgálata
DOM fa, Styles/Computed nézet, box model, specificitás és gyakori CSS hibák gyors felderítése.
Elements panel – HTML és CSS vizsgálata
Az Elements panel a CSS és layout hibák leggyorsabb vizsgálati helye: látod a DOM-ot, és valós időben tudsz CSS-t próbálgatni.
CSS szabályok vizsgálata
.gomb {
background-color: blue;
color: white;
font-size: 16px;
}Az áthúzott szabályok felülírást jelentenek (specificitás vagy sorrend).
Box model ellenőrzése
┌─────────────────────────────────────┐
│ margin │
│ ┌─────────────────────────────┐ │
│ │ border │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘Miért nem működik egy CSS szabály?
.form .container .gomb {
background-color: red;
}
.gomb {
background-color: blue; /* felülírva */
}