Jak používat Google Chrome k ladění CSS

Nástroj Inspect Element je skvělý, pokud jde o ladění vašich webových stránek v reálném čase. Tento nástroj můžete použít k zobrazení náhledu a změně designu webu. Umožňuje vám to také udělat, aniž byste museli znovu načítat stránku, přičemž změny CSS se zobrazí okamžitě.

Tento článek probere, jak zobrazit třídy CSS a jejich použité styly v okně Inspect Element. Bude také zahrnovat, jak to můžete použít k náhledu změn, které provedete ve svém CSS v reálném čase.

Otevírání Inspect Element v Google Chrome

Můžete navštívit libovolnou webovou stránku a otevřít okno Inspect Element, abyste viděli, jak vypadá její kód HTML nebo CSS. Tento tutoriál použije ukázkový web předvést.

Okno Inspect Element můžete otevřít v prohlížeči Google Chrome stisknutím tlačítka F12 klíč. Můžete také kliknout pravým tlačítkem myši kdekoli na stránce a kliknout na Kontrolovat.

Otevře se okno Kontrola prvku s kódem HTML pro tu část webu, na kterou jste klikli pravým tlačítkem. Zde můžete také upravit text webu pomocí Google Chrome.

Karta Styly v okně Kontrola prvku

V samotném okně Inspect Element pod Prvky je zde místo pro zobrazení kódu HTML i CSS. Kód HTML můžete vidět v levé části okna Inspect Element. CSS kód najdete vpravo pod Styly tab.

Řekněme, že jste měli prvek HTML s třídou nazvanou „card-padding“, s pravým a levým odsazením:

.karta-vycpávka {
 polstrování-pravé: 0vh;
 polstrování-vlevo: 0vh;
}

Pokud byste si v prohlížeči zobrazili náhled tohoto webu, budete moci vybrat div prvek s třídou "card-padding". Jakýkoli styl použitý na třídu "vycpávka karet" se zobrazí vpravo pod Styly tab.

Když najedete na prvek v zobrazení kódu HTML, zvýrazní se tato část webové stránky ve webovém prohlížeči. Typ prvku HTML spolu s případnými názvy tříd se také zobrazí v dialogovém okně vedle prvku.

V tomto případě uvidíte na stránce zvýrazněný kontejner div s názvy tříd "row", "card-padding" a "pb-5".

Jak provádět změny v CSS v reálném čase

CSS můžete změnit přímo na kartě Styly:

1. Použitím tento web, klikněte pravým tlačítkem na první nadpis.
2. Na tomto konkrétním nadpisu h4 uvidíte použitou třídu s názvem „text-grey“ s barvou #8a8a8a.
3. Místo toho změňte barvu na jinou, například oranžovou. Chcete změnit pouze samotnou hodnotu, nikoli název vlastnosti, „barva“.
4. Uvidíte změnu nadpisu z tmavě šedé na oranžovou.
5. Pokud chcete zakázat konkrétní styl CSS, zrušte zaškrtnutí políčka nalevo od stylu.
6. K původní sadě můžete také přidat další styly. Kliknutím pod nebo napravo od vlastnosti začněte přidávat novou. Při přidávání nových stylů byste měli použít stejnou syntaxi jako v běžném souboru CSS.
7. Pokud zobrazujete náhled místního webu, můžete pokračovat ve změnách CSS, dokud se nepřiblížíte požadovanému vzhledu a chování vašeho uživatelského rozhraní. Poté můžete zkopírovat provedené změny CSS zpět do místního kódu.

Jak upravit CSS z knihoven nebo rámců třetích stran

Můžete také provádět změny prvků HTML, pokud používáte knihovny nebo rámce třetích stran, jako je Bootstrap.

1. Použitím tento web, klikněte pravým tlačítkem na jedno z tlačítek Bootstrap na stránce.
2. Uvidíte dvě třídy použité na tlačítko, "btn" a "btn-primary". Bootstrap již má svůj vlastní styl aplikovaný na obě tyto třídy. Barvy, které se používají jako barvy pozadí a ohraničení, jsou #007bff. Změňte to na něco jiného, ​​například Violet.
3. Pokud zobrazujete náhled místního webu, můžete nové změny přidat zpět do místního kódu. V závislosti na pořadí vašeho CSS možná budete muset použijte specifičtější selektor CSS. Například před selektor uveďte „.btn“. Tím přepíšete původní styl Bootstrapu.

   .btn.btn-primární {
    barva pozadí: fialová;
    barva ohraničení: fialová;
   }

Co znamená element.style na kartě Styly?

Každý element HTML, který zvýrazníte v okně Inspect Element, má blok element.styles. Jedná se o ekvivalent přidání vloženého stylu do prvku HTML namísto cílení pomocí selektoru.

1. Klepněte pravým tlačítkem myši na prvek HTML. Přidejte libovolný styl do sekce element.style, například:

   barva: whitesmoke;

2. Uvidíte, že se změnil i kód prvku HTML. Kód v prvku HTML má nyní nový řádek:

   styl="barva: whitesmoke;"

Jak podřízené prvky HTML dědí styl

Pokud použijete dvě různé hodnoty stylu na nadřazený prvek a podřízený prvek, bude mít přednost hodnota v podřízeném prvku.

1. Použitím tento web, klikněte pravým tlačítkem kdekoli na vnějších okrajích webu.
2. V sekci HTML okna Prozkoumat prvek se zaměřte na dva konkrétní prvky HTML. Existuje nadřazený prvek div, na který je aplikována třída "content". Tento HTML element má podřízený element h4 s třídou „text-grey“.
3. Vyberte podřízený prvek HTML h4 a zakažte styl barev ve třídě „text-grey“.
4. Vyberte nadřazený prvek HTML s třídou "obsah". Přidejte do třídy následující styl CSS:

   červená barva;

   Veškerý text v nadřazeném prvku div zčervená. Tato změna se také přenese do podřízených prvků, což znamená, že h4 bude mít také červenou barvu.
5. Vyberte podřízený prvek HTML h4 a přidejte nový styl do třídy „text-grey“:

   barva: zelená;

   Tím se přepíše styl všech nadřazených tříd. HTML element h4 se změní z červené na zelenou.
6. Přeškrtnutí také uvidíte, když si prohlédnete styl pro třídu „obsah“. To potvrzuje, že podřízený prvek h4 přepisuje barvu rodiče.

Výhody ladění CSS v prohlížeči

Ladění CSS ve vašem prohlížeči může ušetřit spoustu času a urychlit váš pracovní postup při kódování. To platí zejména v případě, že potřebujete vidět, jak vaše nové změny CSS ovlivňují uživatelské rozhraní na vašem webu v reálném čase.

Tuto techniku ​​můžete použít namísto provádění změn v místním kódu a opětovného načítání aplikace. To vám ušetří hádání, jaké hodnoty CSS by fungovaly, protože nyní můžete prohlížet změny uživatelského rozhraní, jak je provádíte.

V okně Inspect Element můžete provádět změny, dokud se nepřiblížíte k požadovanému návrhu. Jakmile budete mít, můžete zkopírovat kód z okna Inspect Element zpět do místního kódu. Stále můžete aplikaci znovu spustit a otestovat, že vaše nové změny CSS stále fungují.

Tento výukový program pokryl základy toho, jak ladit CSS webu pomocí okna Inspect Element, včetně toho, kde na kartě Styly najít CSS.

Zabýval se také tím, jak provádět změny v CSS a zobrazovat vizuální změny uživatelského rozhraní v reálném čase. Doufejme, že také rozumíte tomu, jak provádět změny, když CSS používá knihovnu třetí strany, a jak funguje dědění stylů.

S oknem Inspect Element můžete dělat mnoho dalších zajímavých věcí.

7 hravých věcí, které můžete dělat s prvkem Inspect

Přečtěte si další

O autorovi